@charset "UTF-8";
html,body {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,div,section,a,span,form,iframe,figure {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.fill {
	object-fit: fill;
}
.contain {
	object-fit: contain;
}
a {
	color: 000;
	text-decoration: none;
	outline: none;
}
li {
	list-style-type: none;
}

.sp {
	display: none;
}
body.noscroll {
	overflow: hidden;
}

.ld-overlay {
  	position: fixed;
	color: #f6bed3;
	font-size: 32px;
	letter-spacing: 0.4pt;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 1000;
	overflow: hidden;
}
.ld-overlay .loading {
	position: fixed;
	width: 150px;
	z-index: 1002;
	padding-bottom: 30px;
	transition: all 1s;
}
.ld-overlay::after {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	width: 100%;
  	height: 100vh;
	z-index: 1001;
	transition: all 0.5s 1s cubic-bezier(.49,.06,.57,.97);
}
.ld-overlay::before {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	width: 100%;
  	height: 100vh;
	background-color: #FFF;
	z-index: 1000;
	transition: all 0.5s 1.4s cubic-bezier(.49,.06,.57,.97);
}
.ld-overlay.loaded .loading {
	opacity: 0;
}
.ld-overlay.loaded::after {
	left: 100%;
	width: 0%;
}
.ld-overlay.loaded::before {
	left: 70%;
	width: 30%;
}

body {
	background: #000;
	transition: all 1s;	
}
body.dark {
	background: #000;
}
body.white {
	background: #FFF;
}

#container {
	position: relative;
}

.home-nav {
	display: flex;
	margin: 20px auto 0;
	width: 100%;
}
.home-nav li span.btn,
.home-nav li a {
	display: block;
	overflow: hidden;
	transition: all 0.3s ease-out;
	position: relative;
}
.home-nav li span.btn img,
.home-nav li a img {
	transition: all 0.3s ease-out;
}
.home-nav li span.btn:hover img,
.home-nav li a:hover img {
	transform: scale(1.1);
}
.home-nav li a span,
.home-nav li span.btn span {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.home-nav li.btn-intro {
	margin-right: 10px;
}
.home-nav li.btn-intro span.btn {
	cursor: pointer;
}
.home-nav li.btn-intro span.btn span::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url(../../images/home/btn_introduction_t.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s ease-out;
}
.home-nav li.btn-intro span.btn::after {
	content: '';
	display: block;
	width: 36%;
	height: auto;
	aspect-ratio: 16/9;
	background: url(../../images/home/btn_arrow.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: all 0.3s ease-out;
}
.home-nav li.btn-intro span.btn:hover::after {
	right: -8px;
}
.home-nav li.btn-trailer {
	margin-left: 10px;
}
.home-nav li.btn-trailer a span::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: url(../../images/home/btn_trailer_t_2.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.home-nav li.btn-trailer a::after {
	content: '';
	display: block;
	width: 53px;
	height: 53px;
	background: url(../../images/home/btn_trailer_playbtn.png) no-repeat left top;
	background-size: cover;
	position: absolute;
	border-radius: 50%;
	border: solid 1px #FFF;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease-out;
}
.home-nav li.btn-trailer a:hover::after {
	transform: translate(-50%, -50%) scale(1.16);
}

.home-sns {
	width: 180px;
	display: flex;
	justify-content: center;
	margin: 40px auto 30px;
}
.home-sns a {
	transition: all 0.2s;
}
.home-sns a:hover {
	opacity: 0.6;
}
/*.sns-title {
	position: relative;
	margin-bottom: 75px;
}
.sns-title::after {
	content: '';
	display: block;
	width: 1px;
	height: 35px;
	background: #b1b1b1;
	position: absolute;
	bottom: -58px;
	left: 25px;
}*/
.home-info {
	width: 100%;
	margin: 0 auto;
}
.home-info .casting,
.koukai {
	position: relative;
}
.home-info .casting {
	margin-top: 15px;
}
.home-info .billing {
	padding: 20px;
}
.home-info .banner {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.home-info .banner a {
	display: block;
	margin: 0 5px;
}
.home-info .banner a img {
	height: 40px;
	width: auto;
}

.home-info .casting img.t2,
.koukai img.t2 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
.home-info .casting img.t2,
.koukai img.t2 {
	opacity: 0;
}




.kv-slider {
	width: 100%;
	height: 100%;
	aspect-ratio: 1124/1537;
	overflow: hidden;
	position: relative;
}
.kv-slider .kv-title img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 100%;
	width: auto;
}
.kv-slider .kv-title img.t2 {
	opacity: 0;
}
.kv-slider ul {
	width: 100%;
	height: auto;
	aspect-ratio: 1124/3074;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0px;
	z-index: 1;
}
.kv-slider .bar {
	height: 4px;
	width: 0;
	background: #FFF;
	position: absolute;
	top: 0;
	left: 0px;
	z-index: 10;
}

.kv-slider .kv1 {
	width: 100%;
	height: auto;
	aspect-ratio: 1124/1537;
	background: url(../../images/kv/slider_kv3.jpg?2) no-repeat top center;
	background-size: cover;
}
.kv-slider .kv2 {
	width: 100%;
	height: auto;
	aspect-ratio: 1124/1537;
	background: url(../../images/kv/slider_kv2_2.jpg) no-repeat top center;
	background-size: cover;
}
.kv-slider .kv img {
	width: auto;
	height: 100%;
	opacity: 0;
}

.dots {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
}
.dots li {

}
.dots li span {
	display: block;
	transition: all 0.3s 0.3s;
}
.dots li:nth-child(1) span {
	width: 7px;
	height: 7px;
	background: #FFF;
	border-radius: 4px;
}
.dots li:nth-child(2) span {
	width: 5px;
	height: 5px;
	background: #666;
	border-radius: 4px;
}
body.white .dots li:nth-child(1) span {
	width: 5px;
	height: 5px;
	background: #ece9e2;
	border-radius: 4px;
}
body.white .dots li:nth-child(2) span {
	width: 7px;
	height: 7px;
	background: #ea4f6e;
	border-radius: 4px;
}

.btn-theater a {
	display: block;
	background: #2a2a2a;
	margin: 10px 20px 5px;
	text-align: center;
}
.btn-theater img {
	width: 45%;
}
.btn-comments a {
	display: block;
	background: #2a2a2a;
	margin: 15px 20px 5px;
	text-align: center;
}
.btn-interviews {
	margin: 15px 20px 5px;
	display: flex;
	justify-content: space-between;
}
.btn-interviews a {
	display: block;
	width: calc(50% - 5px);
}
.btn-news span,
.btn-news2 span {
	display: block;
	background: #2a2a2a;
	margin: 15px 20px 5px;
	text-align: center;
}


.contents {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1;
}
.trailer-area {
	width: 100%;
	padding: 15px 15px 0px;
	margin: 0 auto 0;
	position: relative;
}
.trailer-area a {
	display: block;
	/*background: url("../images/teaser/trailer_thumb.jpg") no-repeat center top;*/
	background: #FFF;
	background-size: cover;
	overflow: hidden;
}
.trailer-area img {
	transition: all 0.2s;
}
.trailer-area a:hover img {
	/*transform: scale(1.1);*/
	opacity: 0.7;
}
.info-area {
	position: relative;
	width: 100%;
	max-width: 375px;
	margin: 0 auto;
}

.fadein {
	opacity: 0;
	transition: all 1s;
}


.trailer-btns.current {
	display: block;
}
.trailer-btns ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.trailer-btns ul li {
	color: #CCC;
	border-left: solid 1px #777;
	border-bottom: solid 1px #777;
	font-size: 16px;
	line-height: 1.4em;
	padding: 10px;
	letter-spacing: 0.075em;
	font-family: sans-serif;
	width: 50%;
}
.trailer-btns ul li:nth-child(3),
.trailer-btns ul li:nth-child(4),
.trailer-btns ul li:nth-child(5) {
	width: calc(100% / 3);
	border-bottom: none;
}
.trailer-btns ul li:first-child,
.trailer-btns ul li:nth-child(3) {
	border-left: none;
}
.trailer-btns ul li span {
	display: block;
	padding: 8px;
	cursor: pointer;
	border-radius: 3px;
}
.trailer-btns ul li span em {
	display: block;
	font-size: 10px;
	font-style: normal;
}
.trailer-btns ul li span.sub {
	font-size: 12px;
}
.trailer-btns ul li span:hover {
	color: #CCC;
	background: #bf1037;
}
.trailer-btns ul li span.current {
	color: #CCC;
	background: #bf1037;
}

.mubichike {
	padding: 5px 0 20px;
}
#mvtk-widgets-container {
	margin: 0 auto;
}

.variafree {
	background: #FFF;
	padding: 0 0 5px;
}
.variafree img {
	display: block;
	width: 50%;
	max-width: 200px;
	margin: 0 auto;
}

/* Introduction */
.modal-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
	z-index: 100;
	background: #000;
	height: 100vh;
}

.intro-bg {
	width: 100%;
    height: 100%;
	min-height: 728px;
	position: absolute;
    top: 0;
    left: 0;
	z-index: 101;
}
.modal-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 102;
	overflow: auto;
}
.modal-title {
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 40px;
	z-index: 1001;

}
.introduction-inner {
	padding: 90px 20px 0 58px;
	width: 100%;
    z-index: 1099;
}

.introduction-catch {
	width: 100%;
	margin-bottom: 40px;
}
.introduction-catch .catch1-1 {
	width: 100%;
	max-width: 480px;
	margin-bottom: 70px;
}
.introduction-catch .catch2-1 {
	width: 73.5%;
    max-width: 305px;
	margin-bottom: 22px;
	position: relative;
}
.introduction-catch .catch2-2 {
	width: 71%;
    max-width: 295px;
	margin-bottom: 22px;
	position: relative;
}
.introduction-catch .catch2-3 {
	width: 100%;
    max-width: 415px;
	position: relative;
}
.introduction-catch .catch2-1 img,
.introduction-catch .catch2-2 img,
.introduction-catch .catch2-3 img {
	opacity: 0;
}

.introduction-catch .catch2-1::after,
.introduction-catch .catch2-2::after,
.introduction-catch .catch2-3::after {
	content: '';
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.introduction-catch .catch2-1::after {
	background: #FFF;
}
#introduction.is_opened .introduction-catch .catch2-1 img {
	animation-name: fadeInAnime;
    animation-duration:0.1s;
    animation-delay: 0.9s;
	animation-fill-mode:forwards;
}
#introduction.is_opened .introduction-catch .catch2-1::after {
	animation-name: catchBar;
    animation-duration:1s;
    animation-delay: 0.4s;
}
.introduction-catch .catch2-2::after,
.introduction-catch .catch2-3::after {
	background: #de304a;
}
#introduction.is_opened .introduction-catch .catch2-2 img {
	animation-name: fadeInAnime;
    animation-duration:0.1s;
    animation-delay: 1s;
	animation-fill-mode:forwards;
}
#introduction.is_opened .introduction-catch .catch2-2::after {
	animation-name: catchBar;
    animation-duration:1s;
    animation-delay: 0.5s;
}
#introduction.is_opened .introduction-catch .catch2-3 img {
	animation-name: fadeInAnime;
    animation-duration:0.1s;
    animation-delay: 1.1s;
	animation-fill-mode:forwards;
}
#introduction.is_opened .introduction-catch .catch2-3::after {
	animation-name: catchBar;
    animation-duration:1s;
    animation-delay: 0.6s;
}

@keyframes catchBar {
    0%   { width: 0; } /* 初期状態 */
    50%  { width: 100%; left: 0; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
	54%  { width: 100%; left: 0; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    100% { width: 0; left: 100%; } /* 初期状態に戻る */
}
@keyframes catchText {
    0%   { opacity: 0; } /* 初期状態 */
    100% { opacity: 1; } /* 初期状態に戻る */
}

#introduction .scroll-text {
    width: 100%;
}
#introduction .scroll-text p {
    margin-bottom: 2em;
    color: #FFF;
    font-size: 14px;
    letter-spacing: 0.075em;
	line-height: 1.8em;
}

.scroll-text::-webkit-scrollbar {
    width: 1px; /* 横幅設定 */
}
.scroll-text::-webkit-scrollbar-thumb {
	display: block;
    background: #e81740;
	position: relative;
}
.scroll-text::-webkit-scrollbar-track {
    background: #FFF; /* 背景色 */
}
.btn-close {
    position: absolute;
    top: 20px;
    left: 30px;
    color: #FFF;
    z-index: 1100;
    transition: all 0.2s ease-out;
}
.btn-close:hover {
    transform: rotateZ(180deg);
    cursor: pointer;
}
.btn-close span {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
}
.btn-close span:before {
    content: '';
    display: block;
    position: absolute;
    top: 13px;
    left: 0;
    width: 30px;
    height: 3px;
    background: #FFF;
    transform: rotate(45deg);
}
.btn-close span:after {
    content: '';
    display: block;
    position: absolute;
    top: 13px;
    left: 0;
    width: 30px;
    height: 3px;
    background: #FFF;
    transform: rotate(-45deg);
}

.intro-slider {
	width: 100%;
	height: 100%;
}
.intro-slider .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	transition: all 2s;
	background-color: #000;
}
.intro-slider .bg img {
	opacity: 0;
}
.intro-slider .intro-bg1 {
	background: url(../../images/home/intro_bg1.jpg) no-repeat center center;
	background-size: cover;
}
.intro-slider .intro-bg2 {
	background: url(../../images/home/intro_bg2.jpg) no-repeat center center;
	background-size: cover;
}
.intro-slider .intro-bg2 {
	opacity: 0;
}
.intro-bg.scene2 .intro-bg1 {
	opacity: 0;
}
.intro-bg.scene2 .intro-bg2 {
	opacity: 1;
}
.intro-dots {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0 8px 0 0;
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 1002;
}
.intro-dots li {

}
.intro-dots li span {
	display: block;
	transition: all 0.3s 0.3s;
}
.intro-dots li:nth-child(1) span {
	width: 7px;
	height: 7px;
	background: #ea4f6e;
	border-radius: 4px;
}
.intro-dots li:nth-child(2) span {
	width: 5px;
	height: 5px;
	background: #ece9e2;
	border-radius: 4px;
}
.intro-bg.scene2 .intro-dots li:nth-child(1) span {
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
}
.intro-bg.scene2 .intro-dots li:nth-child(2) span {
	width: 7px;
	height: 7px;
	background: #ea4f6e;
	border-radius: 4px;
}



#introduction {
    opacity: 0;
}

#introduction.is_opened {
    animation-name: fadeInAnime;
    animation-duration:1s;
    animation-delay: 0.1s;
    animation-fill-mode:forwards;
}

/* News */
#news {
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
}
#news::after {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	z-index: -1;
}
.news-inner {
	background: #FFF;
	overflow: scroll;
	height: 100vh;
	padding: 30px 30px 120px;
	margin: 0 auto;
	position: relative;
	overflow: scroll;
}
.btn-close3 {
    position: fixed;
    top: 24px;
    right: 20px;
    color: #000;
    z-index: 1100;
    transition: all 0.2s ease-out;
}
.btn-close3:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.btn-close3 span {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
}
.btn-close3 span:before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 0;
    width: 20px;
    height: 3px;
    background: #000;
    transform: rotate(45deg);
}
.btn-close3 span:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 0;
    width: 20px;
    height: 3px;
    background: #000;
    transform: rotate(-45deg);
}
.news-title {
	color: #000;
	margin-bottom: 1em;
	font-family: sans-serif;
	font-size: 16px;
}
.news-inner .entry {
	text-align: left;
	color: #000;
	padding-bottom: 1.5em;
}
.news-inner .entry-date {
	text-align: left;
	font-size: 12px;
	color: #000;
}
.news-inner .entry {
	margin-top: 1.5em;
}
.news-inner .entry .font-s {
	font-size: 13px;
	display: inline-block;
	line-height: 1.6em;
}
.news-inner .entry .box-gray {
	margin: 1.5em 0;
	padding: 1em;
	background: #EFEFEF;
}
.news-inner .entry:first-child {
	margin-top: 1em;
}
.news-inner {
	/*display: flex;*/
}

.entry-img {
	width: 190px;
	padding: 0 20px 0 0;
}
.entry-name {
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0.05em;
	margin-bottom: 0.8em;
}
.entry-name span.chara-name {
	font-size: 15px;
	margin-left: 0.1em;
}
.entry-text {
	font-size: 16px;
	letter-spacing: 0.035em;
	line-height: 1.5em;
	font-family: sans-serif;
}

.entry-text .area-block {
	margin-top: 1em;
	padding: 15px;
	background: #EFEFEF;
}
.entry-text h3 {
	color: #000;
	font-size: 21px;
	line-height: 1.4em;
	margin-bottom: 1m;
}
.entry-text h4 {
	color: #000;
	font-size: 16px;
	margin-bottom: 0.1em;
}
.entry-text h5 {
	color: #000;
	font-size: 16px;
	margin-bottom: 0.1em;
}
.entry-text p {
	margin: 1em 0;
	color: #000;
}
.entry-text dl {
	margin: 1em 0;
}
.entry-text dt {
	font-weight: 700;
	font-size: 14px;
}
.entry-text a {
	color: #900;
	text-decoration: underline;
}
.noimg .entry-text {
	width: 100%;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInFromBottomAnime {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes zoomOutAnime {
    from {
        transform: scale(2);
        opacity: 0;
    }
    to {
        transform:scale(1);
        opacity: 1;
    }
}
@keyframes zoomOutBounceAnime {
    0%   { transform: scale(2.4); opacity: 0; } /* 初期状態 */
    40%  { transform: scale(1.0, 1.0); opacity: 1; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    50%  { transform: scale(1.1, 1.1); } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0); opacity: 1; } /* 初期状態に戻る */
}
@keyframes fadeFromLeftAnime {
    0%   { transform: scale(1.2, 1.0) translateX(-600px); opacity: 0; } /* 初期状態 */
    70%  { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    76%  { transform: scale(0.9, 1.0) translateX(20px); opacity: 1; } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; } /* 初期状態に戻る */
}
@keyframes fadeFromRightAnime {
    0%   { transform: scale(1.2, 1.0) translateX(600px); opacity: 0; } /* 初期状態 */
    70%  { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    88%  { transform: scale(0.9, 1.0) translateX(-20px); opacity: 1; } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translateX(0px); opacity: 1; } /* 初期状態に戻る */
}

@keyframes rotateFromRight30Anime {
    0%   { transform: rotateZ(20deg); opacity: 0; } /* 初期状態 */
    30%  { transform: rotateZ(-4deg); opacity: 1; } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    40%  { transform: rotateZ(3deg); opacity: 1; } /* 潰れた反動が終り、空中で元に戻る */
    50%  { transform: rotateZ(1deg); opacity: 1; } /* 潰れた反動が終り、空中で元に戻る */
    60%  { transform: rotateZ(-1deg); opacity: 1; } /* 潰れた反動が終り、空中で元に戻る */
    80% { transform: rotateZ(0deg); opacity: 1; } /* 初期状態に戻る */
    100% { transform: rotateZ(0deg); opacity: 1; } /* 初期状態に戻る */
}