/*	h1
============================== */
.low h1 a {
   display: block;
   background-image: url(../img/lower_header.png);
}
@media all and (min-width: 768px) {
   .low h1 a {
      width: 960px;
      height: 125px;
      margin: 0 auto;
      text-indent:100%; white-space:nowrap; overflow:hidden;
   }
}
@media all and (max-width: 767px) {
   .low h1 {
      padding: 0 10px;
   }
   .low h1 a {
		display: block;
		background-size:cover;
		height:0;
		/* 縦÷横 */
		padding-top:13.0208333333333%;
	}
   .low h1 a span {
		display: block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
      text-indent:100%; white-space:nowrap; overflow:hidden;
	}
}
/*	hd menu
============================== */
div.hd_menu {
   background-image: url(../img/bg_dot_rd.jpg);
   border-top: 2px solid #9e0013;
   border-bottom: 2px solid #9e0013;
}
div.hd_menu li a {
   display: block;
   float: left;
   border-radius: 5px;
   background-color: hsla(347, 100%, 65%, 0.3);
   text-indent:100%; white-space:nowrap; overflow:hidden;
   transition: background-color 0.25s ease 0s;
}
/*	hd menu PC
============================== */
@media all and (min-width: 768px) {
   div.hd_menu {
      padding: 9px;
      margin-bottom: 30px;
   }
   div.hd_menu ul {
      width: 960px;
      margin: 0 auto;
   }
   div.hd_menu li a {
      height: 55px;
      margin-right: 9px;
      background-image: url(../img/hd_menu.png?0110);
      background-repeat: no-repeat;
   }
   div.hd_menu li:last-child a {
      margin-right: 0;
   }
   div.hd_menu li a:hover {
      background-color: hsla(347, 100%, 65%, 0);
   }

   div.hd_menu li.info a { width: 122px; background-position: left top; }
   div.hd_menu li.intro a { width: 121px; background-position: -131px top; }
   div.hd_menu li.original a { width: 127px; background-position: -261px top; }
   div.hd_menu li.story a {width: 117px;background-position: -397px top;}
   div.hd_menu li.cast a { width: 102px; background-position: -523px top; }
   div.hd_menu li.staff a { width: 117px; background-position: -634px top; }
   div.hd_menu li.message a { width: 200px; background-position: right top; }

   div.hd_menu li.info a:hover { background-position: left bottom; }
   div.hd_menu li.intro a:hover { background-position: -131px bottom; }
   div.hd_menu li.original a:hover { background-position: -261px bottom; }
   div.hd_menu li.story a:hover { background-position: -397px bottom; }
   div.hd_menu li.cast a:hover { background-position: -523px bottom; }
   div.hd_menu li.staff a:hover { background-position: -634px bottom; }
   div.hd_menu li.message a:hover { background-position: right bottom; }

   body.info div.hd_menu li.info a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: left bottom;
   }
   body.intro div.hd_menu li.intro a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: -131px bottom;
   }
   body.original div.hd_menu li.original a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: -261px bottom!important;
   }
   body.story div.hd_menu li.story a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: -397px bottom;
   }
   body.cast div.hd_menu li.cast a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: -523px bottom;
   }
   body.staff div.hd_menu li.staff a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: -634px bottom;
   }
   body.message div.hd_menu li.message a {
      background-color: hsla(347, 100%, 65%, 0);
      background-position: right bottom!important;
   }
}

/*	hd menu SMP (80%)
============================== */
@media all and (max-width: 767px) {
   div.hd_menu {
      padding: 9px;
   }
   div.hd_menu ul {
      width: 100%;
      margin: 0 auto;
   }
   div.hd_menu li a {
      width: 49%;
      height: 44px;
      margin-right: 2%;
      margin-bottom: 2%;
   }
   div.hd_menu li a span {
      display: block;
      background-image: url(../img/hd_menu.png?0110);
      background-size: 768px 88px;
      height: 44px;
      margin: 0 auto;
   }
   div.hd_menu li:nth-child(2n) a {
      margin-right: 0;
   }
   div.hd_menu li:last-child a {
      width: 100%;
      margin-bottom: 0;
   }
   div.hd_menu li.info a span { width: 97.6px; background-position: left top; }
   div.hd_menu li.intro a span { width: 96.8px; background-position: -104.8px top; }
   div.hd_menu li.original a span { width: 101.6px; background-position: -208.8px top; }
   div.hd_menu li.story a span { width: 93.6px; background-position: -317.6px top; }
   div.hd_menu li.cast a span { width: 81.6px; background-position: -418.4px top; }
   div.hd_menu li.staff a span { width: 93.6px; background-position: -507.2px top; }
   div.hd_menu li.message a span { width: 160px; background-position: right top; }

   div.hd_menu li.info a:hover span { background-position: left bottom; }
   div.hd_menu li.intro a:hover span { background-position: -104.8px bottom; }
   div.hd_menu li.original a:hover span { background-position: -208.8px bottom; }
   div.hd_menu li.story a:hover span { background-position: -317.6px bottom; }
   div.hd_menu li.cast a:hover span { background-position: -418.4px bottom; }
   div.hd_menu li.staff a:hover span { background-position: -507.2px bottom; }
   div.hd_menu li.message a:hover span { background-position: right bottom; }


}
/*	contents
============================== */
@media all and (max-width: 767px) {
   div.contents {
      padding: 15px;
   }
}

/*	lower article.outer
============================== */
article.outer {
   background-image: url(../img/bg_ptn02.jpg);
   border: 2px solid #fff;
   box-sizing: border-box;
}
@media all and (min-width: 768px) {
   article.outer {
      width: 960px;
      margin: 0 auto 16px;
      border-radius: 10px;
      padding: 15px;
   }
}
@media all and (max-width: 767px) {
   article.outer {
      width: 100%;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 2%;
   }
}
/*	lower h2
============================== */
h2 {
   background-repeat: no-repeat;
   text-indent:200%; white-space:nowrap; overflow:hidden;
}
@media all and (min-width: 768px) {
   h2 {
      background-image: url(../img/h2_pc.png?0112);
      width: 960px;
      height: 50px;
      margin: 0 -15px 15px;
   }
}
@media all and (max-width: 767px) {
   h2 {
      background-image: url(../img/h2_smp.png?0112);
      margin: 0 -5px 10px;
   	display: block;
   	background-size:cover;
   	height:0;
   	/* 縦÷横 */
   	padding-top:10%;
      position: relative;
   }
   h2 span {
   	display: block;
   	position:absolute;
   	left:0;
   	top:0;
   	width:100%;
   	height: 100%;
   }
}
/*	lower article.outer inner
============================== */
div.atcl_inner {
   background-color: #fff;
}
@media all and (min-width: 768px) {
   div.atcl_inner {
      padding: 30px;
   }
}
@media all and (max-width: 767px) {
   div.atcl_inner {
      padding: 15px;
   }
}
/*	lower footer menu
============================== */
div.ft_menu nav ul li a.lazy-done {
	-webkit-animation: fadeIn 500ms;
	animation: fadeIn 500ms;
}
div.ft_menu nav ul li a {
   position: relative;
   background-color: #fff7ed;
}
div.ft_menu nav ul li.interview a {
	border: 2px solid #fff;
}

div.ft_menu nav ul li.chart a {
	border: 2px solid #fff;
}

div.ft_menu nav ul li.report a {
	border: 2px solid #fff;
	box-sizing:  border-box;
}

div.ft_menu nav ul li.gallery a {
	border: 2px solid #9e0013;
}

div.ft_menu nav ul li.invite a {
	border: 2px solid #f9e9b9;
}

div.ft_menu nav ul li.sns > div {
	background-image: url(../img/menu_sns_btns.jpg);
	border: 2px solid #fff;
}

div.ft_menu nav ul li > a,
div.ft_menu nav ul li > div {
	display: block;
	border-radius:10px 10px 10px 10px;
	box-sizing: border-box;
}

/*	pc
============================== */
@media all and (min-width: 768px) {
	div.ft_menu nav ul li > a {
		overflow: hidden; text-indent: 110%; white-space: nowrap;
		float: left;
		margin-right: 16px;
		margin-bottom: 16px;
		box-shadow:0px 3px 16px 2px #a3a3a3;
		background-position: center;
	}
   div.ft_menu nav ul li > div {
      float: left;
      margin-right: 16px;
      margin-bottom: 16px;
      box-shadow:0px 3px 16px 2px #a3a3a3;
      background-position: center;
   }
	div.ft_menu nav ul li.s_btn > a,
   div.ft_menu nav ul li.s_btn > div {
		width: 228px;
		height: 140px;
	}
	div.ft_menu nav ul li.l_btn > a,
	div.ft_menu nav ul li.l_btn > div {
		width: 472px;
		height: 140px;
	}
	div.ft_menu nav ul li:nth-child(4) a,
	div.ft_menu nav ul li:nth-child(6) a {
		margin-right: 0;
	}
	div.ft_menu nav ul li.invite a {
		float: none;
		margin: 0 auto;
	}
}
/*	smp
============================== */
@media all and (max-width: 767px) {
	div.ft_menu nav ul li {
		float: left;
		margin-bottom: 2%;
	}
	div.ft_menu nav ul li > a,
	div.ft_menu nav ul li > div {
		box-shadow:0px 1px 3px 1px #a3a3a3;
	}

	div.ft_menu nav ul li a span {
		overflow: hidden; text-indent: 110%; white-space: nowrap;
	}
	div.ft_menu nav ul li.s_btn {
		width: 49%
	}
	div.ft_menu nav ul li.chart,
	div.ft_menu nav ul li.gallery {
		margin-right: 2%;
	}
	div.ft_menu nav ul li.l_btn {
		width: 100%
	}
	div.ft_menu nav ul li.s_btn > a,
	div.ft_menu nav ul li.s_btn > div {
		display: block;
		background-size:cover;
		height:0;
		/* 縦÷横 */
		padding-top: 59.6491228070175%;
		position: relative;
	}
	div.ft_menu nav ul li.s_btn > a span,
	div.ft_menu nav ul li.s_btn > div div {
		display: block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height: 100%;
	}
	div.ft_menu nav ul li.l_btn > a,
	div.ft_menu nav ul li.l_btn > div {
		display: block;
		background-size:cover;
		height:0;
		/* 縦÷横 */
		padding-top: 29.6610169491525%;
		position: relative;
	}
	div.ft_menu nav ul li.l_btn > a span,
	div.ft_menu nav ul li.l_btn > div div {
		display: block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height: 100%;
	}
}
/*	lower sns buttons
============================== */
div.ft_menu nav ul li.sns div {
   position: relative;
}
div.ft_menu nav ul li.sns p a {
   display: block;
   overflow: hidden; text-indent: 110%; white-space: nowrap;
   border-radius: 50%;
   box-shadow:0px 5px 0px 0px rgba(0,0,0,0.1);
   position: absolute;
   background-size: cover;
   background-position: center;
}
div.ft_menu nav ul li.sns p.tw_btn a {
   background-image: url(../img/tw_btn.jpg);
}
div.ft_menu nav ul li.sns p.ig_btn a {
   background-image: url(../img/ig_btn.jpg);
}
div.ft_menu nav ul li.sns p.ln_btn a {
   background-image: url(../img/ln_btn.jpg);
}
@media all and (min-width: 768px) {
   div.ft_menu nav ul li.sns p a {
      width: 62px;
      height: 62px;
      top: 40px;
   }
   div.ft_menu nav ul li.sns p.tw_btn a {
      left: 197px;
   }
   div.ft_menu nav ul li.sns p.ig_btn a {
      left: 289px;
   }
   div.ft_menu nav ul li.sns p.ln_btn a {
      left: 381px;
   }
}
@media all and (max-width: 767px) {
   div.ft_menu nav ul li.sns p a {
      width: 13.135593220339%;
      height: 44.2857142857143%;
      top: 28.5714285714286%;
   }
   div.ft_menu nav ul li.sns p.tw_btn a {
      left: 41.7372881355932%;
   }
   div.ft_menu nav ul li.sns p.ig_btn a {
      left: 61.228813559322%;
   }
   div.ft_menu nav ul li.sns p.ln_btn a {
      left: 80.7203389830508%;
   }
}

@media all and (min-width: 768px) {
   .low div.sns-btns {
       width: 241px;
       margin: 0 auto;
       border-radius: 10px;
       height: 68px;
       padding-top: 22px;
       padding-bottom: 30px;
   }
   .low div.sns-btns {
       box-sizing: border-box;
   }
}

/*	pics main
============================== */
figure.cmn-pic-main p span {
	background-color:#fff;
}
figure.cmn-pic-main p span,
figure.cmn-pic-main p span img {
	display:block;
   margin: 0 auto;
}
figure.cmn-pic-main p span {
	background-size:cover;
	box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.2);
	position: relative;
}
figure.cmn-pic-main p span.lazy-done {
	-webkit-animation: fadeIn 500ms;
	animation: fadeIn 500ms;
}
@media all and (min-width: 768px) {
   figure.cmn-pic-main p span {
      border: 7px solid #fff;
      margin-bottom: 30px;
   }
   div.inner figure.cmn-pic-main:not(:last-child) {
   	margin-bottom:30px;
   }
}
@media all and (max-width: 767px) {
   figure.cmn-pic-main p {
   	padding:7px;
   }
   figure.cmn-pic-main p span {
      box-sizing: content-box;
      outline: 5px solid #fff;
      position:relative;
      height:0;
      background-repeat:no-repeat;
      background-size:cover;
      /*padding-top:66.4285714%;*/
      margin-bottom: 10px;
   }
   figure.cmn-pic-main p span img {
   	position: absolute;
   	left:0;
   	top:0;
   	width:100%;
   	height:100%;
   }
   div.inner figure.cmn-pic-main:not(:last-child) {
   	margin-bottom:27px;
   }
}
/*	text lines
============================== */
div.inner cite {
	color:#ea337b;
	font-style:normal;
	font-weight:bold;
}
article p.lines {
	background-position:left bottom;
	background-repeat:repeat;
	text-align: justify;
	text-justify: inter-ideograph; /* IE のみ、こちらも必要 */
	padding: 0 0.75em;
}
@media all and (min-width: 768px) {
   article p.lines {
   	font-size: 91%;
   	background-image:url(../img/line30.png);
   	line-height:30px;
   }
   article p.lines:not(:last-child) {
   	margin-bottom:30px;
   }
}
@media all and (max-width: 767px) {
   article p.lines {
   	font-size:83%;
   	background-image:url(../img/line27.png);
   	line-height:27px;
   }
   article p.lines:not(:last-child) {
   	margin-bottom:27px;
   }
}

/* =================================
   story
================================= */
.story div.title p, .gallery div.title p {
   color: #fff;
   background-color: #DD6868;
   background-repeat:repeat;
   background-position:left top;
   text-align:right;
}
div.player-outer {
   position:relative;
   height:0;
   /* 9/16×100 */
   padding-top:56.25%;
}
div.player-outer iframe {
   display:block;
   position:absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
}
@media all and (min-width: 768px) {
.story div.title,
.gallery div.title {
   margin-bottom:25px;
}
.story div.title h3, .story div.title h3 span,
.gallery div.title h3, .gallery div.title h3 span {
   background-image:url(../img/story_h2.jpg?1128);
   background-repeat:no-repeat;
   height:50px;
}
.story div.title h3, .gallery div.title h3 {
   background-position:left top;
   height:50px;
}
.story div.title h3 > span, .gallery div.title h3 > span {
   display:block;
   text-indent:110%;white-space:nowrap;overflow:hidden;
}
.story div.one h3 span, .gallery div.one h3 span {background-position:0 -50px;}
.story div.two h3 span, .gallery div.two h3 span {background-position:0 -100px;}
.story div.three h3 span, .gallery div.three h3 span {background-position:0 -150px;}
.story div.four h3 span, .gallery div.four h3 span {background-position:0 -200px;}
.story div.five h3 span, .gallery div.five h3 span {background-position:0 -250px;}
.story div.six h3 span, .gallery div.six h3 span {background-position:0 -300px;}
.story div.seven h3 span, .gallery div.seven h3 span {background-position:0 -350px;}
.story div.eight h3 span, .gallery div.eight h3 span {background-position:0 -400px;}
.story div.nine h3 span, .gallery div.nine h3 span {background-position:0 -450px;}
.story div.ten h3 span, .gallery div.ten h3 span {background-position:0 -500px;}
.story div.eleven h3 span, .gallery div.eleven h3 span {background-position:0 -550px;}
.story div.title p, .gallery div.title p {
   line-height:25px;
   padding: 3px 25px;
   border-radius: 5px;
}
div.player-deco {
   border:10px solid #fff;
   margin-bottom:30px;
   width: 560px;
   margin: 0 auto 30px;
   box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
div.player-deco2 {
   border:10px solid #fff;
   margin-bottom:30px;
   width: 400px;
   float: left;
   box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
div.player-deco2:first-child {
   float: left;
}
div.player-deco2:last-child {
   float: right;
}
}
@media all and (max-width: 767px) {
.story div.title, .gallery div.title {
   position:relative;
   margin-bottom:15px;
}
.story div.title:before, .gallery div.title:before {
   content:"";
   width:33px;
   height:33px;
   background-image:url(../img/story_h2.jpg?20171121);
   background-repeat:no-repeat;
   position:absolute;
   left:0;
   top:-13px;
}
.story div.title h3, .gallery div.title h3 {
   padding-left:40px;
   line-height:1.5;
   margin-bottom:0.5em;
}
.story div.title h3 span, .gallery div.title h3 span {
   display:block;
}
.story div.title h3 > span > span:first-child, .gallery div.title h3 > span > span:first-child {
   font-size:112.5%;
   color:#c1262b;
}
.story div.title h3 > span > span:last-child, .gallery div.title h3 > span > span:last-child {
   font-size:83%;
   color:#392424;
}
.story div.title p, .gallery div.title p {
   font-size:87.5%;
   padding:0.25em 0.75em;
   border-radius: 3px;
}
div.player-deco,
div.player-deco2 {
   border:6px solid #fff;
   margin-bottom:15px;
   box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
}

/*	kome
============================== */

ul.kome li, ul.kome2 li {
	color:#7b7b7b;
	line-height:1.5;
	margin-bottom:0.2em;
}
div.nuri ul.kome li {
	color:#000;
}
article#books ul.kome li {
	color:#c00;
}
ul.kome li:before, ul.kome2 li:before {
	display:block;
	float:left;
}
ul.kome li:before {
	content:"※";
}
ul.kome2 li:nth-child(1):before {
	content:"※1";
}
ul.kome2 li:nth-child(2):before {
	content:"※2";
}
ul.kome li span, ul.kome2 li span {
	display:block;
}
ul.kome li span {
	padding-left:1.5em;
}
ul.kome2 li span {
	padding-left:2.5em;
}
ul.mgb15em {
	margin-bottom:1.5em;
}
@media all and (min-width: 768px) {
ul.kome2 {
	margin-bottom:20px;
}
ul.kome li, ul.kome2 li {
	font-size:83%;
}
}
@media all and (max-width: 767px) {
ul.kome2 {
	margin-bottom:12px;
}
ul.kome li, ul.kome2 li {
	font-size:75%;
}
}


/*	table
============================== */

table {
	width:auto;
	border-collapse:collapse;
	border-spacing:0;
	padding:0;
   margin: 0 auto;
}
table th, table td {
	vertical-align:top;
	line-height:1.75;
	text-align:left;
	padding-bottom:0.5em;
}
.cast table th, .cast table td {
	vertical-align:bottom;
}
.staff table th, .staff table td {
	padding-bottom:0.75em;
}
.staff table td b {
	color:#e04866;
}
table th {
	text-align:right;
	font-weight:normal;
	color:#e04866;
	white-space: nowrap;
}
.cast table th {
	width:50%;
}
table td.naka {
	font-family: sans-serif;
	color:#997017;
	text-align:center;
	width:2em;
}
@media all and (min-width: 768px) {
table th, table td {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
table th, table td {
	font-size:83%;
}
}