@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    font-style: normal;
    list-style: none;
    box-sizing: border-box;
}
header, nav, section, article, figure, figcaption, footer {
    display: block;
}
a {
    color: #fff;
    text-decoration: none;
    transition: .3s;
}
#loading {
    position: fixed;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ddd;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    text-align: center;
    margin: 0:;
}
#loading div {
    position: fixed;
    top: auto;
    width: 30%;
    left: 35%;
}
#loading div img {
    max-width: 100% !important;
}
#loading div p {
    animation: inout 3s ease 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    font-weight: 900;
}
@keyframes inout {0% {opacity: 0;}100% {opacity:1;}}
body{font-family:vdl-v7gothic;}
header + div {
    background-size: 100% auto !important;
}
body {
    font-family: '游ゴシック','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
    font-size: 14px;
    line-height: 1.7em;
    text-align: center;
    -webkit-text-size-adjust: 100%;
    background: #000;
    color: #FFF;
}
header#header {
    background: #000;
    overflow: hidden;
    padding: 1em 1.5em;
display:flex;
flex-wrap:wrap;
}
header#header > h1{width: 6em;margin: -0.5em 0;}
header#header > h1 img{width: 100%;}
header#header > nav{flex:1 1 auto;}
header#header > nav ul{display:flex;justify-content:flex-end;}
header#header > nav ul li{}
header#header > nav ul li a{font-size: 18px;
    display: block;
    color: #FFF;
    padding: 8px 15px;
    font-weight: bold;
}
header#header > nav ul li a img{width: 1.2em;}
header#header > #menu-button{}
.content {
    max-width: 980px;
    margin: auto;
    position: relative;
}
section{position:relative;background-size: cover;
    background-position: center center;
    border-bottom: 3px solid #000;}
section > .content {padding: 6.5em 0 0;}
section > *:last-child {padding-bottom: 6.5em;}
section > .content > h2{font-size: 3em;
    line-height: 1em;
    text-align: center;
    margin-bottom: 1em;
font-family: dnp-shuei-mincho-pr6n, sans-serif;
}
section > .content > p{
display: block;
    max-width: 800px;
    margin: auto;    text-align: left;
    padding: 0em;
    white-space: pre-wrap;}
section#visual{overflow: hidden;}
section#visual > h2{padding:0;}
section#visual > h2 img{width: 100%;}
section#visual > p.date{position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    display: inline-block;
    font-size: 4.0vw;
    text-align: center;
    font-family: dnp-shuei-mincho-pr6n, sans-serif;
    line-height: 1em;
    background: rgba(0,0,0,0.4);
    padding: 0 0.3em;
    letter-spacing: 0.12em;}
section#visual > p.date span{font-size: 0.7em;}
section#visual > p.caststaff{position: absolute;
    bottom: 5em;
    left: 0;
    right: 0;
    display: inline-block;
    font-size: 2.3vw;
    text-align: center;
    font-family: dnp-shuei-mincho-pr6n, sans-serif;
    line-height: 1.5em;
    padding: 0 49% 0 0;
    letter-spacing: 0.2em;
    color: #a6bdac;}
section#visual > p.catch{position: absolute;
    top: -2em;
    left: 0.5em;
    right: 0;
    display: inline-block;
    font-size: 1.9vw;
    text-align: left;
    font-family: dnp-shuei-mincho-pr6n, sans-serif;
    line-height: 1.5em;
    /* padding: 0 49% 0 0; */
    /* letter-spacing: 0.2em; */
    color: #a6bdac;
    white-space: pre-wrap;
    transform: rotate(-12deg);}
section#visual > p.catch strong{font-size:1.8em;}
section#visual > p.catch span{font-size:0.7em;}
.slider{margin: 4em 0;text-align:center;}
.slider ul{max-width:100%;}
.slider ul li{display:inline-block;width:50%;max-width:512px;}
.slider ul li img{max-width:100%;}
section#cast{background-image:url(/images/sites/retto-seiha/bg01.jpg);}
section#cast ul{display:flex;flex-wrap:wrap;}
section#cast ul li{width:50%;}
section#cast ul li article{margin: 0.7em;background: rgba(0,0,0,0.7);padding: 0.5em;height: 100%;}
section#cast ul li .image{display:none;}
section#cast ul li .image img{width:100%;}
section#cast ul li article > div{padding:1em;}
section#cast ul li h3{font-size: 1.5em;}
section#cast ul li p.profile{display:none;}
section#cast ul li .comment{margin-top:1em;}
section#cast ul li .comment h4{font-size: 1.5em;    margin-bottom: 0.5em;}
section#cast ul li .comment h4 + p{    text-align: left;    padding: 0 0em;    white-space: pre-wrap;font-size: 0.95em;}
section#staff{background: #081118;}
section#staff ul li h3{font-size: 1.5em;}
section#staff ul li p.profile{display:none;}
section#staff ul li .comment{margin-top:1em;}
section#staff ul li .comment h4{font-size: 1.5em;    margin-bottom: 0.5em;}
section#staff ul li .comment h4 + p{    text-align: left;    padding: 0 0em;    white-space: pre-wrap;font-size: 0.95em;}
section#comment {background-image:url(/images/sites/retto-seiha/bg01.jpg);}
section#comment ul {display:flex;flex-wrap:wrap;}
section#comment ul li {width:33%;    margin-bottom: 1em;}
section#comment ul li article {margin:0 0.7em 0.7em;background: rgba(0,0,0,0.5);padding: 0.5em;height: 100%;}
section#comment ul li article > div {padding:1em;}
section#comment ul li h3 {font-size: 1.3em;    margin-top: 1em;font-family: dnp-shuei-mincho-pr6n, sans-serif;}
section#comment ul li .comment {margin-top:1em;}
section#comment ul li .comment p {    text-align: left;    padding: 0 0em;    white-space: pre-wrap;font-size: 0.95em;}
footer {text-align: center;padding: 3.5em 0;}
footer .logo img{width:30%;min-width:200px;}
footer .share .twitter a {background: #00acee;}
footer .share .facebook a {background: #3b5998;}
footer .share li {display: inline-flex;    margin: 1em 5px;    font-weight: 900;    align-items: center;}
footer .share li a {display: block;    border-radius: 0.3em;    padding: 2px 10px;}
footer .share li img {width: 1.1em;}
footer .timeline{padding: 1em;}
footer .billing{margin-top:1em;}
footer .billing dl {overflow: hidden;text-align: center;margin-bottom: 2px;font-family: dnp-shuei-mincho-pr6n, sans-serif;}
footer .billing dl dt {display: inline-block;font-size: 0.9em;}
footer .billing dl dt::after{content:"：";}
footer .billing dl dd {display: inline-block;font-size: 1em;}
footer .billing dl dd::after{content:"、";}
footer .billing dl dd:last-of-type::after{content:"";}
footer .copyright{margin-top:2em;font-size:0.9em;}
footer > nav{flex:1 1 auto;}
footer > nav ul{display:flex;justify-content:flex-end;}
footer > nav ul li{}
footer > nav ul li a{font-size: 18px;
    display: block;
    color: #FFF;
    padding: 8px 15px;
    font-weight: bold;
}
footer > nav ul li a img{width: 1.2em;}

.for-sp{display:none;}

/*mediaquery*/
@media(max-width:480px){body{font-size:3vw;}
section#cast ul li{width:100%;}
section#comment ul li{width:100%;}
section > .content {padding: 3.5em 0 0;}
section > .content > h2{font-size: 2em;margin-bottom: 1.5em;}
section > .content > p{padding: 0 2em;}
section > *:last-child {padding-bottom: 3em;}
}
@media(max-width:960px){
.for-sp{display:block;}
.for-pc{display:none;}
header#header{justify-content: center;    min-height: 5em;}
header#header > h1{position: absolute;    width: 5.5em;    margin-top: -0.7em;}
header#header > nav ul{position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 100vw;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    background: rgba(0,0,0,0.8);transition:all 1s;
}
.openmenu header#header > nav ul{left: 0;justify-content: center;}
#menu-button {
	display: block;
	float: right;
	z-index: 100;
	line-height: 45px;
	cursor: pointer;
	z-index: 10002;
	position: absolute;
    right: 0;
    padding: 7px 15px 13px 15px;
    top: 12px;
}
.openmenu #menu-button {position: fixed;}
	
#menu-button .bar {
	display: block;
	width: 20px;
	height: 3px;
	background: #fff;
	margin: 5px 0 0 0;
	padding: 0;
	opacity: 1;
	
	transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	-o-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	-ms-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	-moz-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	-webkit-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);

}
	
#menu-button .bar:nth-of-type(1) {
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

#menu-button .bar:nth-of-type(2) {
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

.openmenu #menu-button .bar {
	-ms-transform: rotate(215deg);
	-webkit-transform: rotate(215deg);
	-moz-transform: rotate(215deg);
	transform: rotate(215deg);
}

.openmenu #menu-button .bar:nth-of-type(1) {
	position: absolute;
	top: 62px;
	
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	transform: rotate(225deg);
}

.openmenu #menu-button .bar:nth-of-type(2) {
	position: absolute;
	top: 62px;
	
	-ms-transform: rotate(-225deg);
	-webkit-transform: rotate(-225deg);
	-moz-transform: rotate(-225deg);
	transform: rotate(-225deg);
}

.openmenu #menu-button .bar:nth-of-type(3) {
	opacity: 0;
}

.openmenu #menu-button .bar:nth-of-type(1) {
	position: absolute;
	top: 17px;
	
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	transform: rotate(225deg);
}

.openmenu #menu-button .bar:nth-of-type(2) {
	position: absolute;
	top: 17px;
	
	-ms-transform: rotate(-225deg);
	-webkit-transform: rotate(-225deg);
	-moz-transform: rotate(-225deg);
	transform: rotate(-225deg);
}
}

.cover {
    opacity: 0.0001 !important;
    display: inline-block;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/*anime*/
.slidein {
    opacity: 0;
}
.slideup{
	animation:         slideup 2s ease 0s 1 normal;
	-webkit-animation: slideup 2s ease 0s 1 normal;
}
.blurin{-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;}
.blurin.animin{
/*animation:         blurup 5s ease 0s 1 reverse;
    -webkit-animation: blurup 5s ease 0s 1 reverse;*/
    opacity: 0.01;filter: blur(10px);
}
.blurin.animon{
/*    animation:         blurup 5s ease 0s 1 normal;
    -webkit-animation: blurup 5s ease 0s 1 normal;*/
    opacity: 1;filter: blur(0px);
}

/*.slideup {
    animation: slideup 2s ease 0s 1 normal;
    -webkit-animation: slideup 2s ease 0s 1 normal;
}*/
@keyframes slideup{
   0% {opacity: 0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";transform: translateY(30px);-webkit-transform: translateY(30px);-moz-transform: translateY(30px); } 
 100% {opacity: 1;filter: alpha(opacity=1);-ms-filter: "alpha(opacity=1)";transform: translateY( 0px);-webkit-transform: translateY( 0px);-moz-transform: translateY( 0px); }
}
@-webkit-keyframes slideup{
   0% {opacity: 0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";transform: translateY(30px);-webkit-transform: translateY(30px);-moz-transform: translateY(30px); } 
 100% {opacity: 1;filter: alpha(opacity=1);-ms-filter: "alpha(opacity=1)";transform: translateY( 0px);-webkit-transform: translateY( 0px);-moz-transform: translateY( 0px); }
}
@keyframes blurup{
   0% {opacity: 0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";filter: blur(10px); } 
 100% {opacity: 1;filter: alpha(opacity=1);-ms-filter: "alpha(opacity=1)";filter: blur(0px); }
}
@-webkit-keyframes blurup{
   0% {opacity: 0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";filter: blur(10px); } 
 100% {opacity: 1;filter: alpha(opacity=1);-ms-filter: "alpha(opacity=1)";filter: blur(0px); }
}