@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap');

*{
	box-sizing: border-box;
}

body{
	margin: 0px;
	padding: 0px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	color: #fff;
    background: #000;
	-webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	font-size: 100%;
	font-weight: normal;
}
p {
	margin: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ol {
	margin: 0;
	padding: 0 0 0 16px;
}
dl,dt,dd {
	margin: 0px;
	padding: 0px;
}
a {
	opacity: 1;
	text-decoration: none;
	transition: all 0.4s ease;
}
a:hover {
	opacity: 0.6;
}
a img {
	border: none;
}
img {
	width: auto;
	height: auto;
	max-width: 100%;
	border: 0;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
}
table {
    border-collapse: collapse;
}
main{
	display: block;
}
.layout{
	max-width: 784px;
	margin: 0 auto;
	padding: 0 24px 120px;
}
.sp{
	display: none;
}
@media screen and (max-width:767px){
	body {
		font-size: 14px;
	}
    body.nav_open {
        position: fixed;
        width: 100%;
    }
	.layout{
		padding: 0 24px;
	}
	.sp{
		display: block;
	}
}

/*header*/
header{
	position: relative;
	padding: 40px 0 32px;
	background: #000;
    font-family: 'Oswald', sans-serif;
}

header .logo{
	display: none;
	margin:  0 auto;
	text-align: center;
}
header .nav{
    background: #000;
}
header .nav ul{
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    padding: 0 32px;
}
header .nav ul li{
    margin: 0 18px;
    font-size: 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    transition: 0.4s ease;
}
header .nav ul li.current,
header .nav ul li:hover{
    border-bottom: 2px solid #fff;
}
header .nav ul li.none{
    pointer-events: none;
}
header .nav ul li a{
	white-space: nowrap;
    color: #fff;
}
header .nav ul li.none a{
    color: #616161;
}
header .nav ul li a:hover{
    opacity: 1;
}
header .nav ul li:last-of-type{
	border: none;
}
header .nav ul li:last-of-type:hover{
	border: none;
}
header .nav ul li .ico_group{
	display: flex;
	justify-content: center;
}
header .nav ul li .ico_group .ico{
	width: 24px;
	margin: 0 12px;
}
header .nav ul li .ico_group .ico a:hover{
	opacity: 0.6;
}
header .nav_btn{
    display: none;
}
.disabled{
    pointer-events: none;
    opacity: 0.4;
}
@media screen and (max-width:767px){
	header{
		padding: 40px 0;
	}
	header .logo{
		max-width: 224px;
	}
    header .nav{
        opacity: 0;
        display: flex;
        align-items: center;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 999;
        transition: .4s ease;
    }
    header .nav.on{
        opacity: 1;
        visibility: visible;
    }
    header .nav ul{
        display: block;
        width: 100%;
        text-align: center;
    }
    header .nav ul li{
        margin-bottom: 20px;
    }
    header .nav_btn{
        position: absolute;
        display: block;
        top: 40px;
        right: 24px;
        width: 30px;
        height: 22px;
        z-index: 1000;
    }
    header .nav_btn span{
        position: absolute;
        width: 100%;
        height: 2px;
        background: #fff;
        transition: .4s ease;
        top: 10px;
    }
    header .nav_btn span:first-of-type{
        top: 0;
    }
    header .nav_btn span:last-of-type{
        top: 20px;
    }
    header .nav_btn.on span{
        top: 10px;
        transform: rotate(-45deg);
    }
    header .nav_btn.on span:last-of-type{
        top: 10px;
        transform: rotate(45deg);
    }
}

/*top*/
main{
	padding-bottom: 55px;
}
#top .layout{
	max-width: 1184px;
	margin: 0 auto;
	padding: 0 32px;
}
/*hero*/
.hero{
	margin-bottom: 40px;
}
.hero img{
    display: block;
    margin:  0 auto;
}
@media screen and (max-width:767px){
	.hero{
		padding-bottom: 32px;
	}
}
/*news*/
.news{
    margin-bottom: 80px;
}
/*.news .head{
	font-size: 20px;
	letter-spacing: 0.075em;
	color: #fff;
	text-align: center;
	margin-bottom: 32px;
	padding: 10px;
}*/
.news .item .ico_group{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}
.news .item .ico{
	width: 32px;
	text-align: center;
	margin: 0 20px;
}
.news .timeline{
	width: 350px;
    height: 500px;
    border: 1px solid #e8ebee;
    margin: 0 auto;
}
@media screen and (max-width:767px){
    .news{
        margin-bottom: 40px;
    }
	.news .timeline{
		width: 272px;
    	margin: 0 auto 40px;
	}
}
/*base*/
.base{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	font-size: 24px;
	letter-spacing: 0.075em;
	color: #000;
	font-weight: 600;
	background: #fff;
	padding: 8px 20px;
	text-align: center;
}
.base .small{
	font-size: 20px;
}
.base a{
	color: #fff;
}
@media screen and (max-width:1024px){
    .base .sp{
        display: block;
    }
}
@media screen and (max-width:767px){
	.base{
		font-size: 12px;
	}
	.base .small{
		font-size: 10px;
	}
}

/*video*/
.video_container {
    max-width: 736px;
    padding: 0 20px;
    margin: 80px auto;
}
.video {
    position: relative;
    padding-top: 56.25%;
}
.video:not(:last-of-type) {
	margin-bottom: 40px;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video_area {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 999;
}
.video_area .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 853px;
	transform: translate(-50%,-50%);
}
.video_area .video {
	position: relative;
	height: 0;
	width: 100%;
	padding-top: 56.25%;
}
.video_area #player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video_area .close_btn {
	position: absolute;
	top: -64px;
	right: 10px;
	width: 48px;
	height: 48px;
	transform: rotate(45deg);
	z-index: 1000;
	cursor: pointer;
}
.video_area .close_btn:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
}
.video_area .close_btn:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #fff;
	transform: translateX(-50%);
}
@media screen and (max-width:767px){
	.video_container {
    	margin: 40px auto;
	}
}

/* f-news */
.f-news {
	margin-bottom: 32px; 
	padding: 40px;
	border: 1px solid #212121;
}
.f-news p:not(:last-child) {
	margin-bottom: 1em;
}
@media screen and (max-width:767px) {
	.f-news {
		padding: 20px;
	}
}

/*banner*/
.banner{
    margin-bottom: 80px;
}
.banner .item{
    max-width: 824px;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width:767px){
    .banner{
        margin-bottom: 40px;
    }
}
/*scene*/
.scene{
    background: #000000;
}
.scene .head{
    margin-bottom: 32px;
}
.scene .layout{
    max-width: 1184px;
    margin: 0 auto;
    padding: 0 32px 32px!important;
}
.scene .img_group{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    margin-bottom: 32px;
}
.scene .img_group .img{
	width: calc((100% - 32px)/2);
	overflow: hidden;
	margin-bottom: 32px;
	cursor: pointer;
}
.scene .img_group .img:nth-of-type(n+3):nth-of-type(-n+5) {
    width: calc((100% - 64px)/3);
}
.scene .img_group .img:hover img{
	transform: scale(1.1);
	transition: all 0.15s linear;
}

.scene .modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 999;
}
.scene .close_btn{
	position: absolute;
	top: -64px;
	right: 10px;
	width: 48px;
	height: 48px;
	transform: rotate(45deg);
	z-index: 1000;
	cursor: pointer;
}
.scene .close_btn:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
}
.scene .close_btn:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #fff;
	transform: translateX(-50%);
}
.scene .modal .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    padding: 0 100px;
    max-width: 1028px;
    margin: 0 auto;
}
.scene .slick-slide img{
    margin: 0 auto;
}
.scene .slick-prev{
    left: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
}
.scene .slick-next{
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
}
.scene .slick-prev:before,.scene .slick-next:before {
    display: none;
}
@media screen and (max-width:767px){
    .scene .img_group{
        margin-bottom: 32px;
    }

	.scene .img_group .img{
		  width: calc((100% - 16px)/2);
        margin-bottom: 16px;
	}
    .scene .img_group .img:nth-of-type(n+3):nth-of-type(-n+5){
        width: calc((100% - 32px)/3);
    }
    .scene .modal .inner{
        padding: 0 20px;
    }
}
/*container*/
.container .layout{
    padding-bottom: 0;
}

.container .mainImage .img{
    width: 84.84%;
}
.container .mainImage .img img{
    width: 100%;
}
.container .title{
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-weight: 500;
    margin-bottom: 40px;
    padding-top: 32px;
}
.container .h{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 48px;
    line-height: 1.75;
}
.container .txt{
    line-height: 2;
    font-weight: 500;
    margin-bottom: 72px;
    font-size: 15px;
}
.container .txt p{
    margin-bottom: 48px;
}
.container .img{
    margin-bottom: 72px;
}
@media screen and (max-width:767px){
      .container .txt{
        margin-bottom: 36px;
    }
  .container .txt:last-of-type{
        margin-bottom: 28px;
    }
.container .img{
        margin-bottom: 36px;
    }
    .container .title{
        padding-top: 0;
    }
}
/*introduction*/
#introduction .container .mainImage .img{
    margin-right : 0;
    margin-left: auto;
}
@media screen and (max-width:767px){

}
/*story*/
#story .container .mainImage .img{
    margin-right : auto;
    margin-left: 0;
}
@media screen and (max-width:767px){
}
/*cast*/
#cast{
    padding-bottom: 0;
}
#cast .layout{
    max-width: 808px;
}
#cast .title{
    margin-bottom: 72px;
}
.flexGroup .item{
    display: flex;
    margin-bottom: 76px;
}
.flexGroup .item:nth-of-type(odd){
    flex-direction: row-reverse;
}
.flexGroup .item:first-of-type{
    flex-direction: row;
    margin-bottom: 40px;
}
.flexGroup .item .img{
    width: 100%;
    max-width: 180px;
    margin-right: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.flexGroup .item .imgL{
    max-width: 240px;
}
.flexGroup .item:nth-of-type(odd) .img{
    margin-right: 0;
    margin-left: 40px;
}
.flexGroup .item:first-of-type .img{
    margin-right: 40px;
    margin-left: 0;
}
.flexGroup .item .txt .name{
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    align-items: center;
    margin-bottom: 19px;
    font-weight: 500;
}
.flexGroup .item .txt .name .medium{
    font-size: 15px;
}
.flexGroup .item .txt .name .large{
    font-size: 20px;
}
.flexGroup .item .txt .name .small{
    font-size: 14px;
}
.flexGroup .item.itemL .txt .name .medium{
    font-size: 16px;
}
.flexGroup .item.itemL  .txt .name .large{
    font-size: 24px;
}
.flexGroup .item.itemL  .txt .name .small{
    font-size: 14px;
}
.flexGroup .item .txt{
    margin-bottom: 0;
}
.flexGroup .item .txt p{
    line-height: 1.86;
    font-size: 15px;
    margin-bottom: 24px;
}
.flexGroup .item .txt p:last-of-type{
    margin-bottom: 0;
}
.flexGroup .item .txt p a{
    display: inline-block;
}
.flexGroup .item .txt a{
    display: block;
    color: #fff;
    text-decoration: underline;
}
.flexGroup .item .comment{
    width: 100%;
}
.flexGroup .item.full .txt{
    width: 100%;
}
.flexGroup .comment{
    padding: 32px 40px;
    border: 1px solid #fff;
    margin-bottom: 80px;
}
.flexGroup .comment p{
    font-size: 15px;
    line-height: 1.86;
}

.flexGroup .comment .h{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
    font-family: 'Oswald', sans-serif;
}
@media screen and (max-width:767px){
    #cast .title{
        margin-bottom: 40px;
    }
    .flexGroup .item{
        display: block;
    }
    .flexGroup .item .img{
        margin: 0 auto 32px!important;
    }
    .flexGroup .item .txt .name{
        margin-bottom: 4px!important;
    }
    .flexGroup .item .txt .name .medium{
    font-size: 14px!important;
}
.flexGroup .item .txt .name .large{
    font-size: 18px!important;
    
}
.flexGroup .item .txt .name .small{
    font-size: 12px;
}
    .flexGroup .comment{
        padding: 16px;
    }
    .flexGroup .comment .h{
        margin-bottom: 8px;
    font-size: 15px;
    }
    .flexGroup .item .txt p{
    font-size: 14px;
    margin-bottom: 8px;
}
    .flexGroup .comment p{
        font-size: 14px;
    }
}

/*staff*/
#staff{
    padding-bottom: 0;
}
#staff .layout{
    max-width: 880px;
}
#staff .title{
    margin-bottom: 72px;
}
#staff .flexGroup .item{
    margin-bottom: 60px;
}
#staff .flexGroup .item .name{
    font-weight: 600;
    justify-content: center;
}
#staff .flexGroup .item .name .large{
    font-size: 24px;
}
#staff .txtArea {
    padding: 32px 40px;
    border: 1px solid #fff;
}
#staff .txtArea h2{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
    font-family: 'Oswald', sans-serif;
}
#staff .txtArea .h{
    font-weight: 600;
    margin-bottom: 28px;
}
#staff .txtArea p{
    line-height: 1.86;
    font-size: 15px;
    margin-bottom: 28px;
}
#staff .txtArea p:last-of-type{
    margin-bottom: 0;
}
@media screen and (max-width:767px){
    #staff .title{
        margin-bottom: 40px;
    }
    #staff .txtArea{
        padding: 16px;
    }
    #staff .txtArea h2{
        margin-bottom: 16px;
    }
    #staff .txtArea .h{
        margin-bottom: 16px;
        font-size: 15px;
    }
    #staff .txtArea p{
        margin-bottom: 16px;
        font-size: 14px;
    }
}
/*bottmImg*/
.bottomImg{
    position: relative;
    margin-top: 72px;
}
.bottomImg .img{
    max-width: 100%;
    width: 100%;
}
.bottomImg .img img{
    width: 100%;
}
.bottomImg::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 15%;
    top: 0;
    left: 0;
    background: linear-gradient(#0a0a07,transparent);
}
#introduction .bottomImg::after{
    height: 30%;
}


/* ---------------- theater */
#theater .layout{
    max-width: 968px;
}
#theater .title{
    margin-bottom: 28px;
}
#theater .bodyArea .img{
    margin-bottom: 28px;
}
.theater {
    padding-bottom: 80px;
}

.theater .note {
    margin-bottom: 24px;
    font-size: 13px;
    text-align: center;
}
.theater .area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -16px;

}
.theater .area li {
    margin: 0 16px 8px;
    color: #757575;
    font-size: 16px;
}
.theater .area .a {
    color: #fff;
    cursor: pointer;
}
.theater .area .a:hover{
    text-decoration: underline;
}
.theater .block {
    padding-top: 72px;
}
.theater h2 {
    margin-bottom: 32px;
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
}
.theater table {
    width: 100%;
}
.theater table th {
    padding: 6px 8px;
    border-left: 1px solid #000;
    background: #fff;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    color: #212121;
}
.theater table th:first-child{
    border-left: none;
    width: 120px;
}
.theater table th:nth-of-type(2){
    
}
.theater table th:nth-of-type(3){
    width: 160px;
}
.theater table th:nth-of-type(4){
    width: 160px;
}
.theater table th:nth-of-type(5){
    width: 160px;
}
.theater table td {
    padding: 16px 8px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 400;
    text-align: center;
}
.theater table td a {
    text-decoration: underline;
    color: #fff;
}
@media (max-width: 767px) {
.theater .area {
    margin: 0 -8px;
}
.theater .area li {
    margin: 0 8px;
    font-size: 14px;
}
.theater .block {
    padding-top: 40px;
}
.theater h2 {
    margin-bottom: 24px;
    font-size: 18px;
}
.theater .table {
    overflow: auto;
}
.theater table td {
    white-space: nowrap;
}
}

/*comment*/
#comment .flexGroup .item .txt .name{
    margin-bottom: 0;
    margin-top: 19px;
}
#comment .flexGroup .item:first-of-type{
    margin-bottom: 76px;
}
@media screen and (max-width:767px){
    #comment .flexGroup .item .txt .name{
        margin-bottom: 0!important;
        margin-top: 4px;
    }
}