@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

body {
	background:#ffffff;
	margin:0px;
	padding:0px;
	color:#000000;
	font-size:0;
	line-height: 100%;
	width: 100%;
	font-family: 'Kosugi Maru', sans-serif;
}
div,ul,p,ul,li,dl,dt,dd,h1,h2,img {
	margin:0px;
	padding:0px;
}
li {
	list-style-type: none;
	list-style-position: outside;
}
.pc {
	display:block;
}
.sp {
	display:none;
}
.fix-width{
	width:100%;
}
.text-center {
	text-align:center;
}
.text-hd {
	font-weight:bold;
}
.rollanime {
	transition: .5s;
}
.rollanime:hover {
	opacity: .5;
}
header {
	position:relative;
	width:100%;
}
header #top-head {
	position:relative;
}
header #top-head .sns{
	position:absolute;
	top:0px;
	right:30px;
}
header #top-head .sns li{
	display:inline-block;
	margin:0 0 0 20px;
}
header .mainvisual{
	position:relative;
	background:#e60012;
}
header .mainvisual .mv-screen{
	position:relative;
	background:#e60012;
	width:100%;
	height:480px;
	overflow:hidden;
}
header .mainvisual .mv-screen .mv-title{
	position:absolute;
	top:40%;
	right:10%;
}

@media screen and (max-width:720px) {
header .mainvisual .mv-screen{
	height:350px;
}
header .mainvisual .mv-screen .mv-title{
	top:30%;
	right:5%;
}
}

@media screen and (max-width:520px) {
header .mainvisual .mv-screen{
	height:250px;
}
header .mainvisual .mv-screen .mv-title{
	top:30%;

}
}

header .head-intro {
	width:532px;
	margin:50px auto 0 auto;
	padding:0 0 50px 0;
	max-width:95%;
}
main {
	font-size:16px;
	letter-spacing:0.1em;
	line-height: 1.7;
	width:100%;
	background:#f1efdd;
}

footer {
	font-size:15px;
	line-height: 1.7;
	width:1020px;
	margin:0 auto 20px auto;
	text-align:center;
}

h1 {
	margin:20px 0 20px 25px;
}
h1 img{
	max-width:30%;
}

section#movie {
	position:relative;
	background:#f1efdd;
	width:1020px;
	margin:0 auto;
}
section#movie h2 {
	margin:0 auto;
	padding:50px 0 0 0;
}
section#movie h2.movie-list {
	width:404px;
	max-width:90%;
}
section#movie h2.staff-list {
	width:424px;
	max-width:90%;
}

#movie-list {
	margin-top:30px;
	text-align:center;
}
#movie-list .episode{
	position:relative;
	width:400px;
	height:260px;
	display:inline-block;
	margin:10px;
}
#movie-list .episode .prev{
	position:absolute;
	left:0;
	top:0;
}
#movie-list .episode .text{
	position:absolute;
	left:0;
	bottom:0;
	text-align:center;
	width:100%;
}
#movie-list .episode a{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#movie-list .episode a img{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -60%);
	-webkit-transform: translate(-50%, -60%);
	-ms-transform: translate(-50%, -60%);
}
#movie-list .episode .ep1{color:#e62d3c;}
#movie-list .episode .ep2{color:#ee8592;}
#movie-list .episode .ep3{color:#466b85;}

#staff-list {
	margin-top:30px;
	margin-right:40px;
	text-align:right;
}
#staff-list .category-group {
	position:relative;
	margin: 0 90px 0 0;
	padding:0 0 120px 0;
}
#staff-list .category-head {
	position:absolute;
	right:-100px;
	top:-30px;
}
#staff-list .staff{
	display:inline-block;
	position:relative;
	background:#ff0000;
	color:#ffffff;
	border-radius: 30px;
	width:320px;
	padding:20px;
	margin:0 40px 0 0;
	font-size:15px;
}
#staff-list .staff.bg1{background:#e62d3c;}
#staff-list .staff.bg2{background:#ee8592;}
#staff-list .staff.bg3{background:#3f6581;}
#staff-list .staff.ajst-b{top:70px;}
#staff-list .staff.ajst-rb{top:70px;}

#staff-list .staff .picture{
	position:absolute;
	left:-25px;
	top:-20px;
}
#staff-list .staff .catch{
	position:absolute;
	right:30px;
	top:-24px;
}
#staff-list .staff .name{
	font-size:30px;
	letter-spacing:0.1em;
	position:absolute;
	left:110px;
	top:15px;
	text-align:left;
}
#staff-list .staff .respons{
	position:absolute;
	left:100px;
	top:60px;
	padding:0 0 10px 10px;
	border-bottom:solid 1px #ffffff;
	width:230px;
	letter-spacing:0.1em;
	font-size:15px;
	text-align:left;
}
#staff-list .staff .respons.ls-s {
	letter-spacing:0em;
}
#staff-list .staff .comment{
	margin-top:100px;
	text-align:left;
}
#shop {
	position:absolute;
	left:40px;
	top:-50px;
}
section#smile-challenge {
	width:100%;
	height:500px;
	background:#e60012;
	overflow:hidden;
}
section#smile-challenge .title{
	position:relative;
	max-width:90%;
	width:586px;
	margin:0 auto;
	padding:60px 0 0 0;
}
section#recruit {
	margin:0;
	padding:20px 0 20px 0;
	font-size:20px;
	color:#e60012;
	font-weight:bold;
	text-align:center;
	background:#ffffff;
}
section#recruit p{
	display:inline-block;
}
section#recruit p.capt {
	vertical-align:top;
	padding:7px 10px 0 0;
}

#playmovie{
	position:fixed;
	left:0px;
	top:0px;
	display:none;
	width:100%;
	height:100%;
}
#playmovie .bgcover{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	background:#000000;
	width:100%;
	height:100%;
	opacity: .7;
}
#playmovie .youtubeplay{
  position: absolute;
	left:0;
	top:0;
}

#playmovie .closebtn{
	position:absolute;
	right:20px;
	top:20px;
}
#cast-march {
	position:relative;
}
#cast-march p{
	position:absolute;
	visibility: hidden;
}
#cast-march p img{
	width:100%;
}
#cast-side {
	position:relative;
}
#cast-side p{
	position:absolute;
	visibility: hidden;
}
#cast-side p img{
	width:100%;
}

/* SP */
@media screen and (max-width:1020px) {

header {
	width:100%;
}

main {
	font-size:16px;
	width:100%;
}
section#movie {
	width:90%;
}
footer {
	font-size:16px;
	width:100%;
}

img {
	max-width:100%;
}
#staff-list {
	margin-right:20px;
}
#staff-list .staff{
	margin:0 20px 0 0;
}
#shop {
	width:320px;
	left:5%;
}

}

@media screen and (max-width:900px) {

#staff-list {
	text-align:center;
}
#staff-list .staff.ajst-b{
	left:20%;
}

#staff-list .category-group {
	margin: 0 90px 0 0;
	padding:70px 0 120px 0;
}
#staff-list .staff.ajst-rb{
	top:0px;
}
#shop {
	position:relative;
	left:50px;
	top:100px;
	width:390px;
	margin:0 auto;
}

}

@media screen and (max-width:640px) {

.pc {
	display:none;
}
.sp {
	display:block;
}
h1 {
	margin:10px 0 10px 15px;
}
header .head-intro {
	margin:8% auto 0 auto;
	padding:0 0 8% 0;
}
header #top-head .sns{
	right:5px;
}
header #top-head .sns li{
	margin:0 0 0 10px;
}
header #top-head .sns li img{
	width:80%;
}
section#movie h2 {
	padding:8% 0 0 0;
}
main {
	letter-spacing:0em;
}
section#smile-challenge {
	height:450px;
}

@media screen and (max-width:540px) {


#staff-list .category-head {
	position:relative;
	right:0;
	top:0;
	margin-bottom:20px;
}
#staff-list .category-group {
	margin: 0 0 0 0;
	padding:0 0 120px 0;
}
#staff-list {
	margin-top:30px;
	margin-right:0px;
	text-align:right;
}
#staff-list .staff{
	width:100%;
	margin:0;
	font-size:16px;
	box-sizing:border-box;
}
#staff-list .staff.ajst-b{
	left:0;
}
#staff-list .staff .picture{
	left:-10px;
	top:-20px;
}
#staff-list .staff .catch{
	right:0px;
	top:-24px;
}
#staff-list .staff .name{
	position:relative;
	left:0px;
	top:0px;
	text-align:left;
	margin-left:100px;
}
#staff-list .staff .respons{
	position:relative;
	left:0px;
	top:0px;
	padding:0 0 10px 0;
	border-bottom:none;
	width:auto;
	margin-left:100px;
}
#staff-list .staff .comment{
	margin-top:10px;
	border-top:solid 1px #ffffff;
	padding:10px 0 0 0;
}
#shop {
	position:relative;
	left:0;
	top:20px;
	width:90%;
}
section#smile-challenge {
	height:400px;
}


}
@media screen and (max-width:480px) {

header #top-head .sns{
	top:-5px;
}
#movie-list .episode{
	width:100%;
	height:auto;
	margin:8% 0;
}
#movie-list .episode .prev{
	position:relative;
	width:100%;
}
#movie-list .episode .text{
	position:relative;
}

section#smile-challenge {
	height:360px;
}

}

@media screen and (max-width:400px) {

header #top-head .sns{
	top:-5px;
}
header #top-head .sns li img{
	width:32px;
}
header #top-head .sns li{
	margin:0 0 0 10px;
}
section#smile-challenge {
	height:320px;
}
section#recruit p {
	width:90%;
}

}