@charset "utf-8";

/*
Theme Name:     tenipurirenew
Description:    tenipuri renew
Author:         CrapsiB
Version:        0.04
*/


:root {
  --m_color: #0058a6;
  --m_color: #0049a3;
  --m_color: #004797;
  --m_color: #0b3d92;
  --s_color: #5f96d9;
}

/*------------------------------------------------------------------------------
  0px 以上 767px まで
------------------------------------------------------------------------------*/
html {
	background-color: #fff;
	font-size: calc(100vw / 64); /* 横640px時に10px */
}

a {
	font-weight: bold;
	color: var(--m_color);
	text-decoration: none;
}

a:hover {
	color: #377cd0;
	text-decoration: underline;
}

.display_none {
	display: none;
}

.pc-on {
	display: none !important;
}
.sp-on {
	display: initial !important;
}

/* header */
header {
	position: fixed;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	
	height: 15vw;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 20;
}
/* header */
header::before {
	content:"";
	position: fixed;
	height: 15vw;
	width: 100%;
	background-color: rgba(255,255,255,0.8);
	top: 0;
	left: 0;
	z-index: 8;
}

/* logo */
header h1 {
	position: relative;
	display: block;
	width: 20vw;
	height: 20vw;
	top: 0;
	left: 0;
	z-index: 10;
}

header h1 a {
	width: 100%;
	height: 100%;
	background: transparent url(../img/common/logo.png) 0 0 no-repeat;
	background-size: contain;
	text-indent: -9999px;
	display: block;  
}

header h1 a::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	background-color: rgba(255,255,255,0.5);
	mask:url(../img/common/logo.png) no-repeat top left;
	-webkit-mask:url(../img/common/logo.png) no-repeat top left;
	mask-size: contain;
	-webkit-mask-size: contain;
	transition: all 0.2s 0s;
	opacity: 0;
}
header h1 a:hover::after {
	opacity: 1;
}

/* main menu */
header nav h2:hover {
	cursor: pointer;
}

h2.menu-btn {
	position: relative;
	width: 15vw;
	height: 15vw;
	background: transparent url(../img/common/sp_menu.svg) 0 0 no-repeat;
	text-indent: -9999px;
	z-index: 10;
}

ul.main-menu {
	display: none;
	flex-direction: column;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;

	background: linear-gradient(
	-45deg,
	#6eb3ff 25%, #60ACFF 25%,
	#60ACFF 50%, #6eb3ff 50%,
	#6eb3ff 75%, #60ACFF 75%,
	#60ACFF );
	background-size: 20px 20px;
	
	padding: 20vw 6.25% 0;
	box-sizing: border-box;
	list-style: none;
  
	overflow: auto;
	z-index: 9;
}

ul.main-menu li {
	width: 100%;
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #fff;
}
ul.main-menu li:last-child {
	border-bottom: none;
}

ul.main-menu li a {
	display: block;
	width:100%;
	padding: 0.5em 0;
	color: #fff;
	text-decoration: none;
	transition: 1s all 0s;
	-webkit-transition: 1s all 0s;
}

ul.main-menu li a:hover {
	color: #ff0;
}

/* search menu */
header nav .search-btn {
	display: none;
}

div.search-menu {
	position: relative;
	display: block;
	width: 100%;
	margin: 3em 0;
	padding: 0;
}

div.search-menu input[type="search"] {
	background-color: #fff;
	border: #999999 solid 1px;
	width:75%;
	height: 3em;
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	color: #333;
	text-align: left;
	text-indent: 1em;
	float: left;
	box-sizing: border-box;
}
div.search-menu input[type="submit"] {
	background: url(../img/common/search_btn.png) #000 center center no-repeat;
	background-size: contain;
	border: #000000 solid 1px;

	width: 25%;
	height: 3em;
	margin: 0;
	font-size: 1.5em;
	box-sizing: border-box;
}
div.search-menu input[type="submit"]:hover {
	opacity: 0.5;
}
#top{
  transform:translate3d(0,0,0);
}
#top #kv {
  display: block;
  background-color: #fff;
}
#top #kv div {
  position: relative;
  -webkit-transform:translate3d(0,0,0);
}
#top #kv div.sp-on {
  display:block !important;
}
#top #kv div img {
  width: 100%;
  margin: 0;
  pointer-events: none;
  -webkit-transform:translateZ(0px);
}
#top #kv div img:not(:first-child) {
  bottom: 0%;
  position: absolute;
  z-index:100;
  -webkit-transform:translateZ(100px);
}
#top #kv div img.text {
  bottom: 2%;
  width: 50%;
  left: 2%;
}
#top #kv div img.logo {
  bottom: 2%;
  width: 20%;
  right: 2%;
}

.kv-image {
  background-color: #fff;
}

.kv-image img {
  width: 100%;
}

/* OVA banner 2014.12.16追記 */
#ova-banner {
  display: none;
}

#ova-banner a img:hover {
  opacity: 0.6;
}

/* OVA 告知画像 2014.12.16追記 */
#ova-image {
  background-color: #fff;
}

#ova-image img {
  width: 100%;
  padding-bottom: 1em;
}

#ova-image a img:hover {
  opacity: 0.6;
}

/* banner OVA 11.07追記 */
a.banner_ova {
  display: block;
  width: 205px;
  height: 45px;
  position: absolute;
  right: 0px;
  top: 0px;

  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;

  background: no-repeat top left url(../img/banner/banner_ova_vo1s.png);
}
a.banner_ova:hover {
  background-position: bottom;
}


/* ========== contents ========== */
#contents-bg{
	overflow-x: hidden;
}
#contents-wrap{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-between;
	flex-basis: auto;
	
	font-size: 1.6rem;
	padding: 20vw 0 0;
}

#contents-wrap section:first-child {
	flex-basis:auto;
	margin: 0  6.25vw 40vw;
}
#contents-wrap h2{
	text-align: center;
	font-size: 2.5em;
	font-weight: bold;
    color: var(--m_color);
    line-height: 1.25em;
	margin: 0em;
}
#contents-wrap h3{
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--m_color);
	
	border-bottom: solid 1px var(--m_color);
	margin: 2em auto;
}
#contents-wrap h4{
	font-size: 1em;
	font-weight: normal;
	color: #999999;
	margin-bottom: 0.5em;
}

.entry-title {
	font-size: 2rem;
	font-weight: normal;
	margin-bottom: 2em;
}

#contents-wrap p{
	margin: 0 auto 1em auto;
}
#contents-wrap p:last-child{
	margin: 0 auto 0em auto;
}
#contents-wrap img{
	margin: 2em auto;
	display: block;
}

/* slide image */
#slide-image h2 {
	display: none;
}

#slide-image ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#slide-image li {
	background-color: #fff;
}

#slide-image a {
	display: block;
}

#slide-image img {
	width: 100%;
}

#slide-image img:hover {
	opacity: 0.6;
}


/* special site banner */

/* ========== side-menu ========== */
#side-menu {
	padding: 0em 6.25vw 6.25vw;
}
#side-menu h3 {
	background-color: var(--m_color);
	color: #fff;
	font-size: 1.6rem;
	padding: 1em 0.5em;
	margin: 0;
	text-align: center;
	border: none;
}
#side-menu ul {
	list-style: none;
	padding: 0;
}
#side-menu ul:first-child {
	padding: 1em 0;
	margin: 1em 0;
}
#side-menu ul li {
	list-style: none;
	padding: 0.5em 0;
	border-bottom: solid 1px var(--m_color);
}
#side-menu ul li:last-child {
	margin-bottom: 2em;
}
#side-menu ul li li {
	border-bottom: none;
}
#side-menu ul li li:last-child {
	margin-bottom: 0em;
}

#side-menu ul a {
	line-height: 2em;
}

/* ========== sub-menu ========== */
#sub-menu {
	margin: 20vw 0 0 0;
}
#sub-menu h3 {
	display: none;
}
#sub-menu ul {
	list-style: none;
	padding: 0;
	border-top: solid 1px #377cd0;
}
#sub-menu li {
	background-color: var(--m_color);
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #377cd0;
}
#sub-menu li a {
	display: block;
	color: #fff;
	padding: 1.5em 0;
	text-decoration: none;
	transition: 0.25s all 0s;
	-webkit-transition: 0.25s all 0s;
}
#sub-menu li a:hover {
	background-color: var(--s_color);
}
/* ========== banner ========== */
#banner {
	background-color: var(--m_color);
	padding: 10vw 6.25vw 5vw;
	margin: 0;
	text-align: center;
}
#banner ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2em; /* 余白 */

	padding: 0;
	text-align: center;
	list-style: none;
}
#banner li {
	border-radius: 0px;
	font-size: 2em;
	width: calc(50% - 0.5em);
	border: solid 4px #fff;
	box-sizing: border-box;
	transform: skew(-20deg);
}

#banner li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	border-left: solid 4px #fff;
	box-sizing: border-box;
}
#banner li:hover {
	opacity: 0.6;
	transition: 0.25s all 0s;
}
#banner li:hover a {
	text-decoration: none;
}
#banner .link_twitter {
	background-color: #00acee;
	border-color: #00acee;
}
#banner .link_youtube {
	background-color: #cd201f;
	border-color: #cd201f;
}
#banner .link_tennimu {
	background-color: #323232;
	border-color: #323232;
}
#banner .link_sq {
	background-color: #FF6600;
	border-color: #FF6600;
}
#banner h3 {
	display: none;
}
.link_links {
	display: inline-block;
	color: #fff;
	font-size: 2em;
	margin-top: 1em;
	padding: 0.5em;
	text-decoration: underline;
}

/* ========== share ========== */
#btn_social {
	display: flex;
	justify-content: center;
	padding-bottom: 10vw;
	background-color: var(--m_color);
}
#btn_social a {
	display: block;
	width: 7.5vw;
	height: 7.5vw;
	transition: 0.2s all 0s;
	margin: 0 2em;


	mask:url(../img/common/btn_tweet.svg) no-repeat;
	-webkit-mask:url(../img/common/btn_tweet.svg) no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
}
#btn_social a.btn_tweet {
	background: url(../img/common/btn_tweet.svg) no-repeat;
	background-size: contain;
}
#btn_social a.btn_facebook {
	background: url(../img/common/btn_facebook.svg) no-repeat;
	background-size: contain;
}
#btn_social a.btn_line {
	background: url(../img/common/btn_line.svg) no-repeat;
	background-size: contain;
}
#btn_social a:hover {
	background-blend-mode:lighten;
	background-color: rgba(255,255,255,0.5);
}

/* ========== footer ========== */
footer {
	background-color: var(--m_color);
	padding: 0 1em 1em;
	font-size: 1.6rem;
	color: #fff;
	text-align: center;
}

/*----------------
  top page
----------------*/
#contents-wrap #top-wrap {
	margin: 0 0 6.25vw;
	padding: 0;
	max-width: 100%;
}
#top {
	position: relative;
	margin: 0;
}
#top ul.show_box {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 2em;
}
#top ul.show_box img{
	opacity: 0;
}
#top ul.show_box .slick-list img {
	opacity: 1;
}
#top ul.show_box .slick-list .slick-track li {
	opacity:0;
}
#top ul.show_box .slick-list .slick-active {
	animation: top_show 8s 0.5s forwards;
	-webkit-animation: top_show 8s 0.5s forwards;
	z-index:1;
}
@keyframes top_show{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	95%{
		z-index:2;
		opacity:1;
	}
	100%{
		opacity: 0;
	}
}

#top .slick-dots {
	position: absolute;
	padding: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding-top: 1em;
	text-align: center;
	gap:2em;
	font-size:1.4em;
}
#top .slick-dots li{
	color:transparent;
	background-color: transparent;
	border: none;
}
#top .slick-dots li button{
	position: relative;
	color:transparent;
	background-color: transparent;
	border: none;
}
top .slick-dots li button:focus {
	outline: none;
}
#top .slick-dots li button:after{
	content:"●";
	display: block;
	position: absolute;
	color:var(--s_color);
	top:0;
}
#top .slick-dots .slick-active button:after{
background-color: transparent;
}
#top .slick-dots li:nth-child(1) button:after{
	color:var(--m_color);
}
#top .slick-dots li:nth-child(2) button:after{
	color:rgb(74, 127, 159);
}
#top .slick-dots li:nth-child(3) button:after{
	color:rgb(229, 191, 0);
}
#top .slick-dots li:nth-child(4) button:after{
	color:rgb(82, 55, 116);
}
#top .slick-dots li:nth-child(5) button:after{
	color:rgb(127, 196, 28);
}

#top li img {
	margin: 0;
}
#top-banner {
	text-align: center;
	position: relative;
	background-color: var(--m_color);
	margin: 0;
	padding: 2em 1em;
}
#top-banner:before {
	content:"";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 calc(50% - 50vw);
	width: calc( (100vw));
	height: 100%;
	background-color: var(--m_color);
}
#top-banner ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em; /* 余白 */

	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
#top-banner li {
	margin: 0;
	padding: 0;
	background-color: transparent;
	transition: 0.5s all 0s ease;
}
#top-banner li:hover {
	background-color: #fff;
	opacity:0.5;
}
#top-banner li img {
	margin: 0;
	padding: 0;
}

#pickup {
	position: relative;
	padding: 6em 0 6em;
	width: 100%;
	box-sizing: border-box;
}
#pickup:before {
	content:"";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100vw);
	height: 100%;
	margin: 0 calc(50% - 50vw);
	z-index: -1;
	background-image: linear-gradient(
		-45deg,
		transparent 25%,
		#edf5ff 25%,
		#edf5ff 50%,
		transparent 50%,
		transparent 75%,
		#edf5ff 75%,
		#edf5ff
	);
	background-size: 40px 40px;

}
#pickup h2 {
	margin-bottom: 6.25vw;
}
#pickup ul {
	display: block;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;

}
#pickup .slick-arrow{
	position: absolute;
	display: block;
	z-index: 2;
	top: calc(50% - 1em);
	width: 2em;
	height: 2em;
	border: none;
	background: transparent;
	color: transparent;
}
#pickup .slick-arrow::before {
	position: absolute;
	display: block;
	content: url("img/common/ball_y.svg");
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: solid 2px var(--m_color);
}
#pickup .slick-arrow::before:hover {
	opacity: 0.5;
}
#pickup .slick-prev {
	left: 3em;
}
#pickup .slick-next {
	right: 3em;;
}
#pickup .slick-dots {
	position: absolute;
	display: flex;
	justify-content: center;
	padding-top: 1em;
	text-align: center;
	gap:0.5em;
	font-size:0.8em;
}
#pickup .slick-dots li{
	color:transparent;
	background-color: transparent;
	border: none;
}
#pickup .slick-dots li button{
	position: relative;
	color:transparent;
	background-color: transparent;
	border: none;	
}
#pickup .slick-dots li button:after{
	content:"○";
	display: block;
	position: absolute;
	color:var(--m_color);
	top:0;
}
#pickup .slick-dots .slick-active button:after{
	content:"●";
}
#pickup li {
	padding: 0 10px;
	box-sizing: border-box;
}
#pickup li img {
	margin: 0;
	padding: 0;
}
.youtube_box {
	position: relative;
	padding-top:56.25%!important;
	width: 100%;
}
.youtube_box iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
#view_btn {
	color: #000;
	text-align: center;
	font-size: 0.5em;
	margin: 2em 0em var(--s80);
}
#view_btn label {
	margin: 0em 1em ;
}
#view_btn label:hover {
	cursor: pointer;
}
#view_btn label::before {
	content: "○";
}


#side-wrap {
	display: grid;
	padding-top: 6.25vw;
}

/* topics */
#topics-box {
	margin: 6.25vw;
}
#topics-box dt {
	color: #ff7200;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 0.25em;
}

#topics-box dd {
	line-height: 1.4;
	text-align: justify;
	margin: 0 0 0.5em 0;
	padding-bottom: 0.5em;
	border-bottom: dotted 1px #cfcfcf;
}

#topics-box dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

#topics-box dl + p {
	text-align: right;
	padding-top: 8px;
}
#topics-box dl + p a {
	padding: 0.25em 0.5em;
	background-color: #e2edff;
}


/* twitter widget */
#twitter-widget {
	margin: 6.25vw 6.25vw 0;
}
.twitter-timeline {
	min-width: 100%;
}


/*----------------
  Page
----------------*/


#topics-box dl,
#twitter-widget,
#dvd-bd-entry,
.news-entry,
#character-list,
#school-wrap
{
	position: relative;
	border: solid 3px var(--m_color);
	border-left: none;
	border-right: none;
	padding: 2em 0em;
	margin-top: 2.5em;
}
#topics-box dl:before,
#twitter-widget:before,
#dvd-bd-entry:before,
.news-entry:before,
#character-list:before,
#school-wrap:before
{
	content: "";
	position: absolute;
	top: -26px;
	left: 50%;
	margin-left: -16px;
	border: 14px solid transparent;
	border-bottom: 14px solid #FFF;
	z-index: 2;
}
#topics-box dl:after,
#twitter-widget:after,
#dvd-bd-entry:after,
.news-entry:after,
#character-list:after,
#school-wrap:after
{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -16px;
	border: 14px solid transparent;
	border-bottom: 14px solid #0049a3;
	z-index: 1;
}
#dvd-bd-entry:first-child,
.news-entry:first-child {
	font-size: 1em;
	
	font-weight: normal;
	color: #0049a3;
	
	display: inline-block;
	padding: 0.125em 1em;
	border: solid 1px var(--m_color);
}
/*----------------
  News
----------------*/
h3#category-title {
	border: none;
	margin-top: 0;
}
#contents-wrap .news-entry h3 {
	display: block;
	border: none;
	padding: 0.25em;
	margin: 0 0 0.25em ;
	background-color: var(--s_color);
	color: #fff;
	font-size: 0.8em;
}
.entry-title{
	padding: 0;
}

.news-date {
	color: #666;
}

#category-title ~ .news-entry {
	padding: 1em 0 ;
}
#category-title ~ .news-entry:first-of-type {
	border-bottom: none;
}
#category-title ~ .news-entry:not(:first-of-type) {
	border-top: none;
}
#category-title ~ .news-entry:not(:first-of-type):not(:last-of-type) {
	padding-top: 0;
	margin-top: 0;
	border-bottom: none;
}
#category-title ~ .news-entry:last-of-type {
	padding-top: 0;
	margin-top: 0;
}

#category-title ~ .news-entry:not(:first-of-type)::before ,
#category-title ~ .news-entry:not(:first-of-type)::after {
	content: none;
}

#category-title ~ .news-entry .news-date {
	margin-bottom: 0.5em;
}
#category-title ~ .news-entry .entry-title {
	margin-bottom: 0;
}

/*----------------
  DVD Blu-ray
----------------*/
#dvd-bd-entry #dvd-bd-category {
	display: block;
	border: none;
	padding: 0.25em;
	margin: 0 0 0.5em ;
	background-color: var(--s_color);
	color: #fff;
	border: none;
	font-size: 0.8em;
}
.chapter-img {
	text-align: center;
}
#bonus-item-box {
/*	border: solid 1px var(--m_color);*/
	padding: 0em 1em 2em;
	padding: 0em;
	margin-bottom: 2em;
}
#sell-box {
	border: solid 1px var(--m_color);
	padding: 0em 1em 2em;
	margin-bottom: 2em;
}
#sell-detail {
	border-bottom: solid 1px var(--m_color);
	padding-bottom: 1em;
	margin-bottom: 1em;
}
#sell-dvd-bd-img img {
	max-width: 60%;
}
/* afreco btn */
#btn_afreco {
	clear: both;
}
#btn_afreco a {
	background: no-repeat  url(/assets/img/dvd_bd/btn_afreco.svg);
	background-size: contain;
	width: 50vw;
	height: 7.75vw;
	
	display: block;
	margin:2em auto;

	overflow:hidden;
	white-space:nowrap;
	text-indent:100%;
	transition: 0.5s all 0s;
	-webkit-transition: 0.5s all 0s;
}

#btn_afreco a:hover {
	opacity: 0.5;
}

#dvd-bd-title-list {
	text-align: center;
}
#dvd-bd-title-list h2 {
	background-color: var(--m_color);
	color: #fff;
	font-size: 1.6rem;
	padding:1em 0.5em;
}
#dvd-bd-title-list section a {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: solid 1px var(--m_color);
	padding: 2.5% 0;
}
#dvd-bd-title-list img {
	display: block;
	width: 20%;
	margin: 0;
	box-sizing: border-box;
}
#dvd-bd-title-list section a:hover img {
	opacity: 0.75;
}
#dvd-bd-title-list h3 {
	display: block;
	width: 80%;
	font-size: 1.6rem;
	text-align: left;
	margin: 0 0 0 1em;
	box-sizing: border-box;
	border: none;
}

#pager-entry {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}
#prev-entry {
	display: block;
	width: 40%;
}
#next-entry {
	display: block;
	width: 40%;
}

/*----------------
  Character
----------------*/

#contents-wrap #character-wrap #character-list section{
	margin: 0;
	width: 100%;
	padding: 1em 0;
	box-sizing: border-box;
}
#character-list,
#school-wrap {
	display: flex;
	flex-direction: column;
	padding: 0;
}
#character-list section,
#school-wrap section {
	text-align: left;
	padding: 1em 0;
	border-bottom: solid 1px var(--m_color);
}
#character-list section:last-child,
#school-wrap section:last-child {
	border-bottom: none;
}
#character-list section a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
#character-list section img {
	margin: 0 1em;
}
#character-list section h3,
#school-wrap #school-name h2{ 
	margin: 0;
	border-bottom: none;
}

#character-category ul {
	border-top: solid 1px var(--m_color);
	padding: 0;
	padding: 0 6.25%;

}
#character-category ul:first-child {
	border-top: solid 1px var(--m_color);
	padding: 0;
}
#character-category ul li {
	position: relative;
	padding-left: 4em;
}
#character-category ul li:before {
	content:"";
	display:inline-block;
	position: absolute;
	left:0;
	width: 3em;
	height: 2em;
}
#character-category ul li:nth-child(1):before {
	background:url(/assets/img/character/img/flag_seigaku.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(2):before {
	background:url(/assets/img/character/img/flag_hyotei.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(3):before {
	background:url(/assets/img/character/img/flag_rikkai.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(4):before {
	background:url(/assets/img/character/img/flag_higa.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(5):before {
	background:url(/assets/img/character/img/flag_shitenhoji.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(6):before {
	background:url(/assets/img/character/img/flag_fudomine.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(7):before {
	background:url(/assets/img/character/img/flag_rokkaku.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(8):before {
	background:url(/assets/img/character/img/flag_yamabuki.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(9):before {
	background:url(/assets/img/character/img/flag_rudolf.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(10):before {
	background:url(/assets/img/character/img/flag_other.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(11):before {
	background:url(/assets/img/character/img/flag_u17.gif) no-repeat;
	background-size:contain;
}
#character-category ul li:nth-child(12):before {
	background:url(/assets/img/character/img/flag_coach.gif) no-repeat;
	background-size:contain;
}

#school-wrap #school-name {
	display: flex;
	align-items: center;
	margin: 0;
	border-bottom: solid 1px var(--m_color);
}
#school-name img {
	margin: 0 1em;
}
#school-wrap #school-name h2 {
	font-size:2rem;
	color: #000;
	margin-left: 0;
}
.character-detail {
	display: flex;
	flex-direction: column;
}
#school-wrap .character-detail img {
	margin: 0 auto 1em;
}
#school-wrap h3 {
	margin: 0;
	border: none;
	color: #000;
	font-weight: bold;
} 
#school-wrap .cv {
	margin: 0;
	text-align: right;
	font-weight: bold;
}

/*----------------
  ON AIR Schedule
----------------*/

/*----------------
  Links
----------------*/

/*----------------
  Episode List
----------------*/

/*----------------
  Search
----------------*/
#search-wrap {
	margin: 0;
}
#search-wrap strong {
	font-size:1.4em;
}
#search-wrap .paging {
	font-size: 1.6em;
	margin: 1em 0;
}
#search-wrap .paging a:not(:first-child) {
	margin-left: 1em;
}
#search-wrap #character-lists ul {
	padding: 0;
	list-style: none;
}
#search-wrap #character-lists li {
	display: inline-block;
	padding: 1em ;
	list-style: none;
}
#search-wrap #character-lists img {
	margin: 0;
}
#search-wrap #character-lists h3 {
	margin: 0 ;
	border: none;
	list-style: none;
}
#search-wrap .results {
	padding: 2em 0 ;
	border-bottom: solid 1px #999;
}
#search-wrap .pagetitle {
	font-size:1.6em;
	font-weight: bold;
	color:var(--m_color);
}
#search-wrap .category {
	font-size:1.2em;
	font-weight: normal;
	color:#999;
	margin: 0;
}

/*----------------
  TVseries
----------------*/

#tvseries-wrap {
	position: relative;
}
#tvseries-wrap h2{
	margin-bottom: 1em;
}
#tvseries-wrap h2:first-child::before,
#tvseries-wrap h2:first-child::after {
	content: "";
	background: url("../img/common/title_ball.svg") no-repeat center;
	background-size: contain;
	position: relative;
	top:-0.1em;
	padding: 0 0.4em;
	margin: 0 0.4em;
	vertical-align: middle;
}

#tvseries-wrap #kv {
	margin: 0 auto 2em ;
	text-align: center;
}
#tvseries-wrap #kv .inner {
	position: relative;
	display: inline-block;
}
#tvseries-wrap #kv img {
	width: auto;
	height: auto;
	max-width: 100%;
	margin:0;
	position: relative;
}
#tvseries-wrap #kv .inner::before {
	content:"";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top:10px;
	left:10px;
	background-color: #999999;
}
#tv_text1 {
	display: block;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
}
#tv_text2 {
	text-align: center;
	font-size: 1.8em;
	font-weight: bold;
	color:#000;
	position: relative;
	text-shadow: #fff 0.075em 0.075em;
}
#tv_text2::before {
	content:"";
	position: absolute;
	width: 100%;
	height: 20%;
	top:80%;
	left:0;
	z-index: -10;
	background-color: #c41414;

	transform: scaleY(1.3) perspective(.6em) rotateX(5deg);
	transform-origin: bottom;
	-webkit-transform: scaleY(1.3) perspective(.6em) rotateX(5deg);
	-webkit-transform-origin: bottom;
}
#tv_text3 {
	text-align: center;
	font-weight: bold;
	font-size:1.4em;
}
span[data-ruby] {
	position: relative;
	display: inline-block;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	left: 50%;
	top:-0.6em;
	font-size: 0.5em;
	font-weight: bold;

	white-space: nowrap;  
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.box_m {
	padding: 0em;
	margin-bottom: 1.5em;
}
.box_s {
	padding: 0em;
	margin-bottom: 1.5em;
}

#contents-wrap .box_m h3,
#contents-wrap .box_s h3 {
	margin: 0 0 1em;
}
#series-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 4em -6.25vw 0;
}
#series-wrap h2 {
	width: 100%;
	margin-bottom: 6.25vw;
}
#series-wrap article {
	width: 50%;
	box-sizing: border-box;
	background-color: var(--m_color);
	color: #fff;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 1em;
}
#series-wrap article:nth-child(4n+3), 
#series-wrap article:nth-child(4n+4) {
	background-color: var(--s_color);	
}
#series-wrap article img {
	display: block;
	width: 50%;
	margin: auto;
	height: auto;
	flex-shrink: 0;
}
#series-wrap article h4 {
	color: #fff;
	font-weight: bold;
}
#series-wrap article div {
	margin-left: 1em;
	word-break: break-all;
	width: 100%;
	box-sizing: border-box;
}

/*----------------
  Search_text
----------------*/
#search-wrap .search-text {
  font-size:1.2rem;
  line-height:1.5rem;
}
#search-wrap .search-text p {
  margin-bottom:1rem;
}
#search-wrap .search-text dt {
  text-indent:1em;
}
#search-wrap .search-text span {
  color:#FF3333;
}

/* 動画用 16.08.18追記 */
#movie-btn {
  display:block;
  background-color:#ffffff;
}
#movie-btn:hover {
  cursor:pointer;
}

#movie-bg {
  background-color: #000;
  height: 100%;
  opacity: 0;
  position: fixed;
  right: 0;
  top: -100%;
  width: 100%;
  z-index: 110;
  transition: all 0.25s linear 0s;
  -webkit-transition: all 0.25s linear 0s;
}
#movie-box {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:95%;
  max-width:960px;
  max-height:540px;
  z-index: 112;
  overflow:hidden;
  visibility: hidden;
}

#movie-bg {
  top: 0;
  opacity: 0.8;
}

.yt-btn {
  display:block;
  background-color:#ffffff;
}
.yt-btn:hover {
  cursor:pointer;
}

.yt-bg {
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 0.25s linear 0s;
  z-index: 110;
  display: none;
}
.yt-box {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:95%;
  max-width:960px;
  max-height:540px;
  z-index: 112;
  overflow:hidden;
}
.yt-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.yt-box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width:100% !important;
  height:100% !important;
}

.load {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width: 60px;
  height: 60px;
  z-index: 111;

  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}



/*------------------------------------------------------------------------------
 480px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 480px) {

}


/*------------------------------------------------------------------------------
 800px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 800px) {

.pc-on {
	display: initial !important;
}
.sp-on {
	display: none !important;
}

html {
	font-size: 87.5%;
}

/* header */
header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items:flex-start;
	
	max-width: 1280px;
	left: 0;
	right: 0;
	height: 80px;
	margin: auto;
}
header::before {
	height: 80px;
}

header h1 {
	position: relative;
	display: block;
	top:0;
	max-width: 120px;
	max-height: 120px
}

header nav {
	box-sizing: border-box;
}


/* main menu */
header nav h2 {
	display: none;
}

ul.main-menu {
	position: relative;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	
	width: auto;
	height: 80px;
	background: transparent;
	margin: 0;
	padding: 0;
	overflow: visible;
}

ul.main-menu li {
	font-size: 1.6rem;
	display: block;
	position: relative;
	width: auto;
	border: none;
	padding: 0 0.5em;
}

ul.main-menu li a {
	display: block;
	position: relative;
	color: #333;
	text-decoration: none;
}
ul.main-menu li a::first-letter {
	color: var(--m_color);
	transition: 1s all 0s;
	-webkit-transition: 1s all 0s;
}
ul.main-menu li a:hover {
	color: #666;
}

ul.main-menu li a::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0%;
	height: 1px;
	background-color: var(--m_color);
	transition: 0.2s all 0s;
	-webkit-transition: 0.2s all 0s;
}
ul.main-menu li a:hover::after {
	left: 0%;
	width: 100%;
}




#btn_social {
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%;
	margin: 0;
    padding-bottom: 40px;
}
#btn_social a {
	width: 2em;
	height: 30px;
	margin: 0 1em;
}


/* search menu */
div.search-menu {
	width: auto;
	margin: 0;
}

div.search-menu input[type="search"] {
	font-size: 1em;
	width: auto;
}
div.search-menu input[type="submit"] {
    width:42px;
    height:42px;
}



/*----------------
  contents
----------------*/
#contents-wrap {
	flex-direction: row-reverse;
	
	padding: 140px 0 0;
	height: auto;
	max-width: 1280px;
	margin: auto auto 200px;
}
#contents-wrap section:first-child{
	flex-basis: 100%;
	height: auto;
	margin: 0 0em 0 ;
	padding: 0;
	box-sizing: border-box;
}
#contents-wrap h2 {
	font-size: 2em;
	margin-top: 40px;
}
#side-wrap {
	padding: 0 40px 0 0;
}
/* side menu */
#side-menu {
    font-size: 0.75em;
	margin: 0;
	padding: 0;
}

/* sub menu */
#sub-menu {
    font-size: 0.75em;
	margin: 0;
	padding: 0;
}

#sub-menu li a:hover {
    background-color: var(--s_color);
}
#sub-menu li a {
    text-shadow: 2px 2px 3px #00306c, -2px 2px 3px #00306c, 2px -2px 3px #00306c, -2px -2px 3px #00306c;
}
#sub-menu li a {
	display: block;
	color: #fff;
	padding: 1.5em 0;
	text-decoration: none;
	transition: 0.25s all 0s;
	-webkit-transition: 0.25s all 0s;
}
a:hover {
	color: #377cd0;
	text-decoration: underline;
}
a:active, a:hover {
	outline: 0;
}
a {
	font-weight: bold;
	color: var(--m_color);
	text-decoration: none;
}
a {
	background: transparent;
}
user agent stylesheet
a:-webkit-any-link {
	color: -webkit-link;
	cursor: pointer;
	text-decoration: underline;
}
#sub-menu li {
	font-size: 1em;
}
#sub-menu li a {
	text-shadow: 2px  2px 3px #00306c, -2px  2px 3px #00306c, 2px -2px 3px #00306c, -2px -2px 3px #00306c;
}

/* special site banner */
#banner {
	padding: 40px 30px;
}
#banner ul{
	max-width: 1280px;
	margin: auto;
}
#banner li {
	font-size: 1.4em;
	width: calc(22%);
}
/* footer */
footer p {
	font-size: 62.5%;
}



/*----------------
  TOP
----------------*/
#contents-wrap #top-wrap {
	margin: 0;
	padding: 0;
}

#top #kv div.pc-on {
	display:block !important;
}
#top #kv div.sp-on {
	display: none !important;
}
#top {
	margin: -60px auto 0;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}
#top ul.show_box {
	padding: 0 0 1em;
}
#top .slick-dots {
	gap:1em;
	font-size:0.8em;
}
#top-banner ul {
	gap: 40px;
	flex-direction: row;
}
#top-banner li img {
	max-height: 25vh;
}

#pickup {
	padding: 100px 0px 100px;
}
#pickup h2 {
	margin-bottom: 40px;
}
#pickup ul {
	width: 100%;
	margin: auto;
	max-width: 640px;
}

#pickup .slick-prev {
	left: -3em;
}
#pickup .slick-next {
	right: -3em;;
}
/* slide image */
#slide-image {
  width: 240px;
  padding-top: 138px;
  margin-bottom: 1em;
}

#slide-image img {
  width: 240px;
}

#top-wrap #side-wrap {
	gap: 4%;
	padding: 0 40px;
}
/* topics */
#topics-box {
	font-size: 0.8em;
}
#topics-box h2 {
	margin-bottom: 40px;
}
#topics-box dd {
	margin: 0 0 1em 0;
	padding-bottom: 1em;
}
#topics-box dl {
	margin-top: 40px;
	padding: 36px 0;
}

/* twitter widget */
#twitter-widget {
	padding: 40px 0;
}
#topics-box + div {
	font-size: 0.8em;
}

/*----------------
  News
----------------*/

/*----------------
  dvd blu-ray
----------------*/
#dvd-bd-wrap {
	margin: 0;
	padding: 0;
}
#dvd-bd-entry {
	margin-bottom: 200px
}
#btn_afreco a {
	max-width: 300px;
	max-height: 46px;
}
#dvd-bd-title-list img {
	width:80px;
}
#dvd-bd-title-list h2 {
	font-size: 1.6rem;
	margin-bottom: 0;
}
#sell-dvd-bd-img img {
	max-width: 100%;
}

/*----------------
  character
----------------*/
#school-wrap img {
	float: left;
	height: 100%;
	margin: 1em;
}
#character-list section h3 {
	font-size: 0.8em;
}
#character-category ul li {
	position: relative;
	padding-left: 3em;
}
#character-category ul li:before {
	left:0;
	top:0.75em;
	width: 2em;
	height: 2em;
}
.character-detail {
	display: block;
}
#school-wrap .character-detail img {
	margin: 0 1em 0 0 ; 
}
#school-wrap h3 {
	font-size:1.4rem;
}
#school-wrap p {
	font-size:1.2rem;
}
#school-wrap .cv {
	font-size:1.4rem;
}


/*----------------
  on air schedule
----------------*/

/*----------------
  links
----------------*/

/*----------------
  episode list
----------------*/

/*----------------
  tvseries
----------------*/
#tvseries-wrap {
	margin-left: 0 !important;
	flex-direction: column;
}
#tvseries-wrap #kv img {
	max-width: 100%;
	max-height: 90vh;
}

#series-wrap {
	font-size: 0.8em;
	margin-left: 0;
	margin-right: 0;
}

/*----------------
  Search
----------------*/
#search-wrap #character-lists h3 {
	font-size: 1em;
}
#search-wrap .paging {
	font-size: 1.2em;
}
#search-wrap .pagetitle {
	font-size:1.4em;
}
#search-wrap .category {
	font-size:1em;
}

}


/*------------------------------------------------------------------------------
  960px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
#pickup ul {
	max-width: 800px;
}

#tv_text2::before {
	height: 40%;
	top:60%;
}

}


/*------------------------------------------------------------------------------
  1024px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
#pickup {
	padding-bottom: 80px;
}
#pickup ul {
	max-width: 920px;
}

#top-wrap #side-wrap {
	grid-template-columns: 1fr;
}
#topics-box {
	margin: 0;
}
#twitter-widget {
	margin: 0;
}
#topics-box + div h2 {
	margin-bottom: 40px;
}

}


/*------------------------------------------------------------------------------
  1280px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {

#contents-wrap {
	padding-left:0;
	padding-right:0;
}

#side-wrap {
	flex-basis:400px;
}
#pickup {
	padding-bottom: 100px;
}
#pickup ul {
	max-width: 1080px;
}
#banner {
	padding: 60px 0 20px;
}
#series-wrap article {
	width: 33.3%;
}
#series-wrap article:nth-child(4n+2), 
#series-wrap article:nth-child(4n+3) {
	background-color: var(--m_color);	
}
#series-wrap article:nth-child(2n) {
	background-color: var(--s_color);	
}
}


/*------------------------------------------------------------------------------
  1440px 以上
------------------------------------------------------------------------------*/
@media screen and (min-width: 1440px) {
#pickup ul {
	max-width: 1280px;
}
}