html{
height: 100vh;
}
body { margin: 0; padding:0;font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','貂ｸ譏取悃菴�','繝偵Λ繧ｮ繝取�譛� ProN','Hiragino Mincho ProN',sans-serif; width:100%; height: 100vh;overflow-x:hidden !important;}
body.fixed {
position: fixed;
width: 100%;
height: 100%;
left: 0;
}
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background:url(../img/intro_bg_pc_2.jpg) center no-repeat;
background-size: cover;
background-position: top center;
min-height: 100%;
}
img {
image-rendering: -webkit-optimize-contrast;
}
.clearfix{
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;/* 髫咎俣蟇ｾ蠢� */
font-size: 0.1em;/* 髫咎俣蟇ｾ蠢� */
line-height: 0;/* 髫咎俣蟇ｾ蠢� */
}
br.clear {
clear:both;
}
br.sponly {display:none;}
br.pconly {display:inline;}
.pccon {display: block;}
.spcon {display: none;}
.pcimg {display: inline;}
.spimg {display: none;}
@media (max-width: 800px) {
.pccon {display: none;}
.spcon {display: block;}
.pcimg {display: none;}
.spimg {display: inline;}
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background:url(../img/intro_bg_sp_2.jpg) center no-repeat;
background-size: cover;
background-position: top center;
min-height: 100%;
}
}
@media (max-width: 510px) {
br.sponly {display:inline;}
br.pconly {display:none;}
}
/* ========================================
繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ
========================================== */
/* 髱櫁｡ｨ遉ｺ */
.is-hidee {
display: none;
}
/* 繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ逕ｻ髱｢繧偵ヵ繧ｧ繝ｼ繝峨い繧ｦ繝� */
.fadeout-bg {
transition-property: opacity;
transition-delay: 0s;
transition-duration: 1s;
opacity: 0;
pointer-events: none;
}
/* 繝ｭ繝ｼ繝繝ｼ繧偵ヵ繧ｧ繝ｼ繝峨い繧ｦ繝� */
.fadeout-loader {
transition-property: opacity;
transition-delay: 0.5s;
transition-duration: 2.0s;
opacity: 0;
pointer-events: none;
}
/* 繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ逕ｻ髱｢ */
#loader-bg {
background: #000;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000000;
display: grid;
place-items: center;
}
#loader {
width:10%;
height:auto;
margin:0;
padding:0;
position:relative;
}
#loader #load1 {
width:100%;
height:auto;
margin:0;
padding:0;
animation-name: anime1;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay:0;
animation-iteration-count: infinite;
animation-fill-mode:forwards;
opacity:0;
}
#loader #load2 {
width:100%;
height:auto;
margin:0;
padding:0;
animation-name: anime2;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay:0;
animation-iteration-count: infinite;
animation-fill-mode:forwards;
opacity:0;
}
#loader #load3 {
width:100%;
height:auto;
margin:0;
padding:0;
animation-name: anime3;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay:0;
animation-iteration-count: infinite;
animation-fill-mode:forwards;
opacity:0;
}
#loader #load1 img ,
#loader #load2 img ,
#loader #load3 img {
width:100%;
height:auto;
}
@keyframes anime1 {
0% { opacity:1; }
25% { opacity:1; }
100% { opacity:1; }
}
@keyframes anime2 {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:1; }
}
@keyframes anime3 {
0% { opacity:0; }
75% { opacity:1; }
100% { opacity:1; }
}
/* 莉･荳九せ繝槭� */
@media (max-width: 600px) {
#loader {
width:80%;
height:auto;
margin:0;
padding:0;
position:relative;
text-align:center;
}
#loader #load1 img {
width:60%;
height:auto;
}
}
/* ========================================
莠亥相邱ｨ繝｢繝ｼ繝繝ｫ
========================================== */
.trailer-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
overflow: hidden !important;
z-index: 1500;
}
.trailer-overlay:after {
position: relative;
}
.trailer-bg {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
}
.trailer-close {
display: none;
position: absolute;
top: -40px;
right: -40px;
cursor: pointer;
z-index: 16000;
}
.trailer-close img {
width: 3vw;
}
.trailer-wrapall {
width: 100vw;
height: 100%;
overflow-x: hidden;
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;
position: absolute;
top: 0;
left: 0;
}
.trailer-video {
z-index: 1500;
width: 100%;
max-width: 1100px;
position: relative;
}
@media screen and (max-height: 700px) {
.trailer-video {
max-width: 137.14286vh;
}
}
.trailer-moviewrap {
clear: both;
z-index: 2000;
width: 100%;
margin: 0 auto;
padding-bottom: 56.25%;
height: 0px;
position: relative;
background: #000;
}
.trailer-moviewrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.trailer-loader {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
width: 128px;
height: 128px;
z-index: 0;
}
.trailer-tabs {
width: 100%;
height: auto;
margin: 0;
padding: 0;
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10px;
-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;
}
.trailer-tab {
width: 29%;
background: #000;
color: #fff;
text-align: center;
font-size: 16px;
line-height: 1.2;
border: solid 1px #fff;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
padding: 6px 0;
margin: 0 1%;
}
.trailer-tab:nth-child(n+4) {
margin-top: 10px;
}
.trailer-tab.active, .trailer-tab:hover {
background: #fff;
color: #000;
}
.trailer-tab.active {
cursor: default;
}
/* 莉･荳九ち繝悶Ξ繝�ヨ繝ｻ繧ｹ繝槭� */
@media (max-width: 800px) {
.trailer-close {
display: none;
position: absolute;
top: -10.5vw;
right: 40px;
cursor: pointer;
z-index: 16000;
}
.trailer-close img {
width: 10vw;
}
}
/* ========================================
繝倥ャ繝繝ｼ
========================================== */
header#pcheader {
display: block;
width:100%;
height:auto;
padding:10px 0;
position:fixed;
top:0;
background:rgba( 20,0,9 , .1 );
z-index:10;
transition-duration: 0.6s;
}
header#pcheader:hover {
background:rgba( 20,0,9 , .2 );
transition-duration: 0.6s;
}
header ul#pcmenu {
width:100%;
height:auto;
padding:5px 0;
margin:0;
list-style-type:none;
display:flex;
justify-content: center;
font-family: 'PT Serif', serif;
}
header ul#pcmenu li {
width:auto;
height:auto;
margin:0 1.5%;
padding:0;
text-align:center;
}
header ul#pcmenu li.menusns {
width:auto;
height:auto;
margin:0 2%;
padding:0;
text-align:center;
display:flex;
justify-content: center;
align-items: center;
}
header ul#pcmenu li a {
color: #fff;
text-decoration: none;
font-size: 2vw;
}
header ul#pcmenu li a:hover {
color: #FB5B78;
transition-duration: 0.6s;
}
.navigation {
display: block !important;
position: absolute;
left: 5px;
top: 5px ;
width: 100%;
height: 60px;
opacity: 1;
overflow-x: hidden;
}
.global-nav {
position: fixed;
right: 0; /* 縺薙ｌ縺ｧ髫�繧後ｋ */
top: -2000px;
width: 100%; /* 繧ｹ繝槭�縺ｫ蜿弱∪繧九￥繧峨＞ */
height: 100vh;
padding-top: 10px;
background:url(../img/menu_bg_pc.png) no-repeat;
background-size: cover;
background-position: center left;
color:#fff;
transition: all .6s;
z-index: 200000;
overflow-y: auto; /* 繝｡繝九Η繝ｼ縺悟､壹￥縺ｪ縺｣縺溘ｉ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺ｧ縺阪ｋ繧医≧縺ｫ */
}
.hamburger {
position: fixed;
right: 17px;
top: 1px;
width: 65px; /* 繧ｯ繝ｪ繝�け縺励ｄ縺吶＞繧医≧縺ｫ縺｡繧�ｓ縺ｨ蟷�ｒ謖�ｮ壹☆繧� */
height: 65px; /* 繧ｯ繝ｪ繝�け縺励ｄ縺吶＞繧医≧縺ｫ縺｡繧�ｓ縺ｨ鬮倥＆繧呈欠螳壹☆繧� */
cursor: pointer;
z-index: 300000;
opacity: 0;
overflow: hidden;
display: block !important;
}
.global-nav #menu-logo {
width:100%;
height:auto;
margin:0;
padding:20px 0;
text-align:center;
}
.global-nav #menu-logo img {
width:15% !important;
height:auto;
}
.global-nav__list {
margin: 0;
padding: 0;
list-style: none;
font-family: 'PT Serif', serif;
}
.global-nav__item {
text-align: center;
padding: 0 14px;
}
.global-nav__item a {
display: block;
padding: 8px 0;
text-decoration: none;
font-size:1.9vw;
color: #fff;
font-weight: bold;
transition: all .6s;
}
.global-nav__item a:hover {
color:#FFCED9;
}
.global-nav ul#sns-link-btn {
width:100%;
height:auto;
list-style-type: none;
padding:10px 0;
margin:0;
display: flex;
justify-content: center;
}
.global-nav ul#sns-link-btn li {
width: 3%;
height: auto;
padding: 0;
margin: 0 2%;
}
.global-nav ul#sns-link-btn li img {
width:100%;
}
.global-nav #menu-logo {
width:100%;
height:auto;
margin:0;
padding:20px 0;
text-align:center;
}
.global-nav #menu-logo img {
width:40%;
height:auto;
}
.hamburger__line {
position: absolute;
left: 8px;
width: 50px;
height: 4px;
background-color: #fff !important;
transition: all .6s;
}
.hamburger #menu {
position: absolute;
top: 44px;
left: 7px;
font-weight:bold;
color:#fff;
font-size:1.0em;
font-family: 'Libre Baskerville', serif;
}
.hamburger__line--1 {
top: 12px;
}
.hamburger__line--2 {
top: 27px;
}
.hamburger__line--3 {
top: 42px;
}
.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}
/* 陦ｨ遉ｺ縺輔ｌ縺滓凾逕ｨ縺ｮCSS */
.nav-open .global-nav {
top: 0;
overflow-x: hidden;
}
.nav-open .black-bg {
opacity: .8;
visibility: visible;
overflow-x: hidden;
}
.nav-open .hamburger__line--1 {
transform: rotate(45deg);
top: 30px;
}
.nav-open .hamburger__line--2 {
width: 0;
left: 50%;
}
.nav-open .hamburger__line--3 {
transform: rotate(-45deg);
top: 30px;
}
header {
width:100%;
height:auto;
background-color:#000000;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
/* 莉･荳九ち繝悶Ξ繝�ヨ繝ｻ繧ｹ繝槭� */
@media (max-width: 800px) {
header#pcheader {
display: none;
}
.navigation {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
background:none;
opacity: 1;
}
.hamburger {
width: 52px; /* 繧ｯ繝ｪ繝�け縺励ｄ縺吶＞繧医≧縺ｫ縺｡繧�ｓ縺ｨ蟷�ｒ謖�ｮ壹☆繧� */
height: 54px; /* 繧ｯ繝ｪ繝�け縺励ｄ縺吶＞繧医≧縺ｫ縺｡繧�ｓ縺ｨ鬮倥＆繧呈欠螳壹☆繧� */
display:block !important;
opacity: 1;
}
.hamburger__line {
position: absolute;
left: 5px;
width: 40px;
height: 4px;
background-color: #fff !important;
transition: all .6s;
}
.hamburger #menu {
position: absolute;
top: 38px;
left: 4px;
font-weight:bold;
color:#fff;
font-size:0.9em;
font-family: 'Libre Baskerville', serif;
}
.hamburger__line--1 {
top: 8px;
}
.hamburger__line--2 {
top: 21px;
}
.hamburger__line--3 {
top: 34px;
}
.global-nav {
position: fixed;
top: 0; /* 縺薙ｌ縺ｧ髫�繧後ｋ */
right: -100%;
width: 100%; /* 繧ｹ繝槭�縺ｫ蜿弱∪繧九￥繧峨＞ */
height: 100vh;
padding-top: 40px;
background:url(../img/menu_bg_3.png) no-repeat;
background-size: cover;
background-position: center left;
color:#fff;
transition: all .6s;
z-index: 200;
overflow-y: auto; /* 繝｡繝九Η繝ｼ縺悟､壹￥縺ｪ縺｣縺溘ｉ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺ｧ縺阪ｋ繧医≧縺ｫ */
}
.global-nav__item a {
display: block;
padding: 2vw 0;
text-decoration: none;
font-size:6.2vw;
color: #fff;
font-weight: bold;
transition: all .6s;
}
.global-nav ul#sns-link-btn li {
width: 12%;
height: auto;
padding: 0;
margin: 5vw 0 0;
}
.global-nav #menu-logo {
width:100%;
height:auto;
margin:0;
padding:20px 0 50px;
text-align:center;
}
.global-nav #menu-logo img {
width:50% !important;
height:auto;
}
/* 陦ｨ遉ｺ縺輔ｌ縺滓凾逕ｨ縺ｮCSS */
.nav-open .global-nav {
right: 0;
}
.nav-open .black-bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger__line--1 {
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger__line--2 {
width: 0;
left: 50%;
}
.nav-open .hamburger__line--3 {
transform: rotate(-45deg);
top: 20px;
}
ul#nav-button {
display:none !important;
}
}
/* ========================================
繝医ャ繝励Γ繧､繝ｳ逕ｻ蜒上∪繧上ｊ
========================================== */
#topmain-sp ,
#theatersp {
display:none !important;
}
#topmain-pc {
width:100%;
height:auto;
padding:0;
margin:0;
text-align:center;
position:relative;
background-color: #000;
}
#topmain-pc #up1 {
width:100%;
height:auto;
text-align:center;
opacity:0;
position: relative;
z-index:1;
}
#topmain-pc #up1 img {
width:100%;
height:auto;
vertical-align:bottom;
}
#topmain-pc #up2 ,
#topmain-pc #up3 ,
#topmain-pc #up4 {
width:100%;
height:auto;
text-align:center;
opacity:0;
position:absolute;
top:0;
left:0;
}
#topmain-pc #up2 {
z-index:3;
}
#topmain-pc #up3 {
z-index:3;
}
#topmain-pc #up4 {
z-index:4;
}
#topmain-pc #up2 img ,
#topmain-pc #up3 img ,
#topmain-pc #up4 img {
width:100%;
height:auto;
vertical-align:bottom;
}
#topmain-pc #up5 {
width:40%;
height:auto;
text-align:center;
opacity:0;
position:absolute;
top:35%;
left:45%;
z-index: 5;
}
#topmain-pc #up5 img {
width: 100%;
}
#topmain-pc .trailer {
width:30%;
height:100vw;
margin:0;
padding:0;
overflow-x: hidden;
position: absolute;
top: 40%;
right:5%;
z-index: 5;
opacity: 0;
}
#topmain-pc .trailer #video-wrap {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
}
#topmain-pc .trailer #video-wrap video {
width:90%;
height: auto;
margin: 2vw 5% 0;
padding: 0;
}
#topmain-pc .trailer #video-wrap #tvframe {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
#topmain-pc .trailer #video-wrap #tvframe img {
width: 100%;
height: auto;
}
#topmain-pc .trailer #video-wrap #tvnoise {
width: 86%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 2vw;
left: 7%;
opacity: 1;
}
#topmain-pc .trailer #video-wrap #tvnoise img {
width: 100%;
height: auto;
}
#topmain-pc #wow-toppc {
width: 20%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
position: absolute;
top: 44%;
left: 41%;
z-index: 5;
opacity: 0;
}
#topmain-pc #stream-toppc {
width: 20%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
position: absolute;
top: 52%;
left: 41%;
z-index: 5;
opacity: 0;
}
#topmain-pc #dvd-toppc {
width: 20%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
position: absolute;
top: 60%;
left: 41%;
z-index: 5;
opacity: 0;
}
#topmain-pc #wow-toppc img ,
#topmain-pc #stream-toppc img ,
#topmain-pc #dvd-toppc img {
width: 100%;
}
#topmain-pc #wow-toppc img:hover ,
#topmain-pc #dvd-toppc img:hover ,
#topmain-pc #stream-toppc img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#topmain-pc #theater-toppc {
width: 14%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
position: absolute;
top: 60%;
left: 46.2%;
z-index: 5;
opacity: 0;
}
#topmain-pc #theater-toppc img {
width: 100%;
}
#topmain-pc #theater-toppc img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#topmain-pc #jimaku-fukikae {
width: 14%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: left;
position: absolute;
top: 69%;
left: 46.2%;
z-index: 5;
opacity: 0;
font-size: 0.8vw;
color: #fff;
font-family: YuGothic,'Yu Gothic',sans-serif;
}
ul#ticket-banners {
width: 28%;
height: auto;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0.3%;
right: 0%;
z-index: 5;
opacity: 0;
transition-duration: 0.6s;
}
ul#ticket-banners li {
width: 25%;
height: auto;
margin: 0 2%;
}
ul#ticket-banners li.linemangapc {
width: 10%;
}
ul#ticket-banners li img {
width: 100%;
height: auto;
}
ul#ticket-banners li img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
/* 莉･荳九ち繝悶Ξ繝�ヨ繝ｻ繧ｹ繝槭� */
@media (max-width: 800px) {
#topmain-pc {
display:none !important;
}
#theatersp {
display:block !important;
width:22%;
height:auto;
text-align:center;
position:fixed;
bottom:6%;
right:2%;
z-index:5;
opacity:0;
}
#theatersp img {
width:100%;
height:auto;
vertical-align:bottom;
}
#topmain-sp {
display:block !important;
width:100%;
height:auto;
margin:0;
padding:0;
background:#000;
position:relative;
}
#topmain-sp #up1sp {
width:100%;
height:auto;
margin:0;
padding:0;
}
#topmain-sp #up1sp img {
width:100%;
height:auto;
vertical-align:bottom;
}
#topmain-sp #up2sp ,
#topmain-sp #up3sp ,
#topmain-sp #up4sp {
width:100%;
height:auto;
text-align:center;
position:absolute;
top:0;
left:0;
opacity:0;
}
#topmain-sp #up2sp img ,
#topmain-sp #up3sp img ,
#topmain-sp #up4sp img {
width:100%;
height:auto;
vertical-align:bottom;
}
#topmain-sp #seiyu-sp {
width:100%;
height:auto;
margin:0 0 20px;
padding: 0;
text-align: center;
opacity: 0;
}
#topmain-sp #seiyu-sp img {
width:63%;
height:auto;
}
#topmain-sp #wow-topsp {
width:100%;
height:auto;
margin:10px 0 10px;
padding: 0;
text-align: center;
opacity: 0;
}
#topmain-sp #wow-topsp img {
width: 80%;
}
#topmain-sp #stream-topsp {
width:100%;
height:auto;
margin:0 0 10px;
padding: 0;
text-align: center;
opacity: 0;
}
#topmain-sp #stream-topsp img {
width: 80%;
}
#topmain-sp #dvd-topsp {
width:100%;
height:auto;
margin:0 0 10px;
padding: 0;
text-align: center;
opacity: 0;
}
#topmain-sp #dvd-topsp img {
width: 80%;
}
#topmain-sp #ticket-banners-sp {
width:100%;
height:auto;
margin:0 0 20px;
padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
}
#topmain-sp #ticket-banners-sp li {
width: 40%;
height: auto;
margin: 5px 2%;
padding: 0;
}
#topmain-sp #ticket-banners-sp li.linemangapc {
width: 20%;
}
#topmain-sp #ticket-banners-sp li img {
width: 100%;
}
#topmain-sp #theater-topsp {
width:100%;
height:auto;
text-align:center;
margin:0;
padding: 0;
opacity: 0;
}
#topmain-sp #theater-topsp img {
width: 60%;
}
#topmain-sp #jimaku-fukikae-sp {
width: 90%;
height: auto;
margin: 0 5%;
padding: 10px 0 0;
text-align: center;
color: #fff;
font-size: 2.6vw;
}
#topmain-sp .trailer {
width:95%;
height:auto;
margin:0;
padding:30px 2.5% 80px;
overflow-x: hidden;
position: static;
opacity: 0;
}
#topmain-sp .trailer #video-wrap {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
}
#topmain-sp .trailer #video-wrap video {
width:90%;
height: auto;
margin: 5vw 5% 0;
padding: 0;
}
#topmain-sp .trailer #video-wrap #tvframe {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
#topmain-sp .trailer #video-wrap #tvframe img {
width: 100%;
height: auto;
}
#topmain-sp .trailer #video-wrap #tvnoise {
width: 86%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 2vw;
left: 7%;
opacity: 1;
}
#topmain-sp .trailer #video-wrap #tvnoise img {
width: 100%;
height: auto;
}
.hamburger {
display:block !important;
}
ul#nav-button {
display:none !important;
}
}
/* 莉･荳九せ繝槭� */
@media (max-width: 511px) {
#topmain-pc {
display:none !important;
}
}
/* ========================================
繝悶Μ繝�ず
========================================== */
#bridge {
width: 100%;
height: auto;
margin: 0;
padding: 20px 0 50px;
background-color: #000;
position: relative;
}
#bridge #catch-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0 30px;
text-align: center;
}
#bridge #catch-pc img {
width: 70%;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#bridge #catch-sp {
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 10px;
text-align: center;
}
#bridge #catch-sp img {
width: 90%;
}
#bridge #awards-sp {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
}
#bridge #awards-sp img {
width: 90%;
}
#bridge #billing-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
}
#bridge #billing-pc img {
width: 98%;
}
#bridge #date-sp {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
}
#bridge #date-sp img {
width: 80%;
}
#bridge #tw-bridge {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
}
#bridge #tw-bridge img {
width: 70%;
}
#bridge #theater-bridge {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
}
#bridge #theater-bridge img {
width: 70%;
}
#bridge ul#ticket-banner {
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#bridge ul#ticket-banner li {
width: 60%;
margin: 10px 0;
}
}
/* ========================================
繧､繝ｳ繝医Ο��せ繝医�繝ｪ繝ｼ
========================================== */
#introduction {
display: block;
width: 100%;
height: auto;
margin: 0 0 -0.8vw;
padding: 400px 0 0;
}
#introduction h2 {
width: 100%;
height: auto;
margin: 0;
padding: 30px 0;
text-align: center;
}
#introduction h2 img {
width: 30%;
height: auto;
}
#introduction .intro-wrap {
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
}
#introduction .intro-wrap2 {
width: 100%;
height: auto;
margin: 40px 0;
padding: 0 0 80px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#introduction .intro-wrap .intro-txt-area {
width: 66%;
height: auto;
margin: 0 17%;
}
#introduction .intro-wrap .intro-txt-area h3.introhead {
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
}
#introduction .intro-wrap .intro-txt-area h3.introhead img {
width: 50%;
}
#introduction .intro-wrap .intro-txt-area .mirror {
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 1;
}
#introduction .intro-wrap .intro-txt-area .mirror img {
width: 30%;
height: auto;
}
#introduction .intro-wrap2 .intro-txt-area {
width: 40%;
height: auto;
margin: 0 30%;
position: relative;
z-index: 2;
}
#introduction .intro-wrap2 .mirror2 {
width: 20%;
height: auto;
margin: 0 ;
text-align: center;
position: absolute;
top: 5%;
right: 10%;
z-index: 1;
}
#introduction .intro-wrap2 .mirror2 img {
width: 70%;
height: auto;
margin-top: 9vw;
}
#introduction .intro-wrap2 .intro-txt-area h3.directohead {
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0;
text-align: center;
}
#introduction .intro-wrap2 .intro-txt-area h3.directohead img {
width: auto;
height: 4vw;
}
#introduction .intro-wrap .intro-txt-area p ,
#introduction .intro-wrap2 .intro-txt-area p {
width: 100%;
height: auto;
margin: 0;
padding: 20px 0;
text-align: left;
color: #fff;
font-size: 1.3vw;
position: relative;
z-index: 2;
}
#introduction .intro-wrap .intro-txt-area p span {
letter-spacing: -0.3vw;
margin: 0 10px;
}
#introduction #slider {
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#introduction #slider .inside-slider {
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: hidden;
}
#introduction #slider .inside-slider vue-slick-carousel {
margin: 0;
padding: 0;
}
.one-slide {
width: 30%;
height: auto;
margin: 0;
padding: 0;
}
.one-slide img {
width: 100%;
height: auto;
vertical-align: bottom;
margin: 0;
padding: 0;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#introduction {
display: block;
width: 100%;
height: auto;
margin: 0 0 -1.5vw;
padding: 60px 0 0;
}
#introduction h2 img {
width: 60%;
height: auto;
}
#introduction .intro-wrap ,
#introduction .intro-wrap2 {
width: 100%;
height: auto;
margin: 40px 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#introduction .intro-wrap .intro-txt-area .mirror {
width: 100%;
height: auto;
margin: 0;
text-align: center;
position: static;
}
#introduction .intro-wrap .intro-txt-area .mirror img {
width: 76%;
height: auto;
margin-top: 9vw;
}
#introduction .intro-wrap .mirror2 ,
#introduction .intro-wrap2 .mirror2 {
width: 100%;
height: auto;
margin: 0;
text-align: center;
order: -1;
position: static;
}
#introduction .intro-wrap .mirror2 img ,
#introduction .intro-wrap2 .mirror2 img {
width: 50%;
height: auto;
margin-top: 9vw;
}
#introduction .intro-wrap .intro-txt-area ,
#introduction .intro-wrap2 .intro-txt-area {
width: 86%;
height: auto;
margin: 0 7%;
}
#introduction .intro-wrap .intro-txt-area h3.introhead ,
#introduction .intro-wrap2 .intro-txt-area h3.introhead {
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
}
#introduction .intro-wrap .intro-txt-area h3.introhead img ,
#introduction .intro-wrap2 .intro-txt-area h3.introhead img {
width: 70%;
}
#introduction .intro-wrap .intro-txt-area h3.directohead ,
#introduction .intro-wrap2 .intro-txt-area h3.directohead {
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0;
text-align: center;
}
#introduction .intro-wrap .intro-txt-area h3.directohead img ,
#introduction .intro-wrap2 .intro-txt-area h3.directohead img {
width: auto;
height: 12vw;
}
#introduction .intro-wrap .intro-txt-area p ,
#introduction .intro-wrap2 .intro-txt-area p {
width: 100%;
height: auto;
margin: 0;
padding: 20px 0;
text-align: left;
color: #fff;
font-size: 4vw;
position: static;
}
#introduction #slider-sp {
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#introduction #slider-sp .inside-slider {
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: hidden;
}
#introduction #slider-sp .inside-slider vue-slick-carousel {
margin: 0;
padding: 0;
}
}
/* ========================================
邨ｵ譛ｬ
========================================== */
#ehon {
width: 95%;
height: auto;
margin: 0;
padding: 50px 2.5%;
position: relative;
background:url(../img/dscr_bg_pc_2.jpg) center no-repeat;
background-size: cover;
background-position: center center;
}
#ehon h2 {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
color: #fff;
font-size: 3vw;
text-align: center;
}
#pcbook {
display: block;
}
#spbook {
display: none;
}
.flipbook {
width: 100%;
height: 90vh;
}
button {
width: 200px;
color: #fff;
background-color: transparent;
border: none;
text-align: center;
font-size: 16px;
line-height: 1.2;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
padding: 6px 0;
margin: 0 1%;
position: relative;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','貂ｸ譏取悃菴�','繝偵Λ繧ｮ繝取�譛� ProN','Hiragino Mincho ProN',sans-serif !important;
}
button img {
width: 100%;
}
button span {
width: 100%;
text-align: center;
position: absolute;
top:32%;
left: 0;
}
button span:hover {
color: #A67D3F;
transition-duration: 0.6s;
}
#pre-btn {
position: absolute;
top: 10%;
left: 30%;
z-index: 10;
}
#nex-btn {
position: absolute;
top: 10%;
right: 30%;
z-index: 10;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#pcbook {
display: none;
}
#spbook {
display: block;
}
#ehon {
width: 95%;
height: auto;
margin: 0;
padding: 150px 2.5%;
position: relative;
}
button {
width: 40%;
color: #fff;
background-color: transparent;
border: none;
text-align: center;
font-size: 3vw;
line-height: 1.2;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
padding: 6px 0;
margin: 0 1%;
outline: none;
position: relative;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','貂ｸ譏取悃菴�','繝偵Λ繧ｮ繝取�譛� ProN','Hiragino Mincho ProN',sans-serif !important;
}
button span {
width: 100%;
text-align: center;
position: static;
}
button span:hover {
color: #A67D3F;
transition-duration: 0.6s;
}
#pre-btn-sp {
position: absolute;
top: 8%;
left: 3%;
z-index: 10;
}
#nex-btn-sp {
position: absolute;
top: 8%;
right: 3%;
z-index: 10;
}
}
/* 莉･荳九せ繝槭� */
@media (max-width: 600px) {
#ehon {
width: 95%;
height: auto;
margin: 0;
padding: 120px 2.5%;
position: relative;
}
button {
font-size: 6vw;
}
#pre-btn-sp {
position: absolute;
top: 10%;
left: 3%;
z-index: 10;
}
#nex-btn-sp {
position: absolute;
top: 10%;
right: 3%;
z-index: 10;
}
}
/* 莉･荳九せ繝槭� */
@media (max-width: 380px) {
#ehon {
width: 95%;
height: auto;
margin: 0;
padding: 100px 2.5%;
position: relative;
}
#pre-btn-sp {
position: absolute;
top: 12%;
left: 3%;
z-index: 10;
}
#nex-btn-sp {
position: absolute;
top: 12%;
right: 3%;
z-index: 10;
}
}
/* ========================================
SNS繝懊ち繝ｳ繧｢繝ｪ繧｢
========================================== */
#button-area {
width:100%;
height:auto;
margin:0;
padding:0;
}
#button-area ul.social_sq_buttons {
width:100%;
height:auto;
padding:0;
margin:0;
list-style-type: none;
display:flex;
justify-content: center;
flex-wrap:wrap;
}
#button-area ul.social_sq_buttons li {
width:140px;
height: 20px;
margin:0 3px;
padding:0;
display: flex;
justify-content: center;
}
#button-area ul.social_sq_buttons li.fb {
background:#1877F2;
}
#button-area ul.social_sq_buttons li.tw {
background:#1B95E0;
}
#button-area ul.social_sq_buttons li.line {
background:#00B900;
}
#button-area ul.social_sq_buttons li.checkin {
background:#10519D;
}
#button-area ul.social_sq_buttons li.filmarks {
background:#FFE100;
}
#button-area ul.social_sq_buttons li.fb .fb_iframe_widget > span {
vertical-align: baseline !important;
}
/* 莉･荳九ち繝悶Ξ繝�ヨ繝ｻ繧ｹ繝槭� */
@media (max-width: 800px) {
#button-area {
width:100%;
height:auto;
margin:0;
padding:10px 0 30px;
}
#button-area ul.social_sq_buttons {
width:100%;
height:auto;
padding:0;
margin:0;
list-style-type: none;
display:flex;
justify-content: center;
flex-wrap:wrap;
}
#button-area ul.social_sq_buttons li {
width:150px;
height: 20px;
margin:5px;
padding:0;
display: flex;
justify-content: center;
}
}
/* ========================================
繝輔ャ繧ｿ繝ｼ
========================================== */
footer {
width:100%;
height:auto;
padding:0;
text-align:center;
margin:0;
background:#0E0309;
overflow-x: hidden;
}
footer #foot-wrap-pc {
width:100%;
height:auto;
padding:0;
margin:0;
position: relative;
overflow: hidden;
}
footer #foot-wrap-pc #foot-img1 {
width:100%;
height:auto;
padding:0;
margin:0;
}
footer #foot-wrap-pc #foot-img2 ,
footer #foot-wrap-pc #foot-img3 ,
footer #foot-wrap-pc #foot-img4 ,
footer #foot-wrap-pc #foot-img5 {
width:100%;
height:auto;
padding:0;
margin:0;
position: absolute;
top: 0;
left: 0;
}
footer #foot-wrap-pc #foot-img1 img ,
footer #foot-wrap-pc #foot-img2 img ,
footer #foot-wrap-pc #foot-img3 img ,
footer #foot-wrap-pc #foot-img4 img ,
footer #foot-wrap-pc #foot-img5 img {
width:100%;
height:auto;
vertical-align: bottom;
}
footer #foot-wrap-pc #tw-bird {
width: 100%;
height: 500px;
position: absolute;
top: 52%;
left:30%;
}
footer #foot-wrap-pc #tw-bird img {
width: 4%;
}
footer #foot-wrap-pc #billing-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
position: absolute;
bottom: 18%;
}
footer #foot-wrap-pc #billing-pc img {
width: 45%;
}
footer #foot-wrap-pc #billing-jp {
width: 100%;
height: auto;
text-align: center;
position: absolute;
bottom: 12%;
left:0;
}
footer #foot-wrap-pc #billing-jp img {
width: 30%;
}
footer #foot-wrap-pc ul#ticket-banner-sp {
display: none;
}
footer #foot-wrap-pc ul#ticket-banner {
width: 28%;
height: auto;
margin: 0 36%;
padding: 30px 0;
list-style-type: none;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0%;
}
footer #foot-wrap-pc ul#ticket-banner li {
width: 10%;
margin: 0 1%;
}
footer #foot-wrap-pc ul#ticket-banner li img {
width: auto;
height: 3vw;
}
footer #foot-wrap-pc ul#ticket-banner li img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
footer #foot-wrap-pc #button-area {
position: absolute;
bottom: 0%;
}
footer .copyright {
width:100%;
height:auto;
padding:5px 0;
color:#fff;
text-align:center;
background:#000;
font-size:0.8vw;
}
/* 莉･荳九ち繝悶Ξ繝�ヨ繝ｻ繧ｹ繝槭� */
@media (max-width: 800px) {
footer {
width:100%;
height:auto;
padding:0;
text-align:center;
margin:0;
vertical-align:bottom;
}
footer #foot-wrap-pc {
width:100%;
height:auto;
padding:0;
margin:0;
position: relative;
overflow-x: hidden;
}
footer #foot-wrap-pc #foot-img1sp {
width:100%;
height:auto;
padding:0;
margin:0;
}
footer #foot-wrap-pc #foot-img2sp {
width:100%;
height:auto;
padding:0;
margin:0;
text-align: center;
position: absolute;
top: 15%;
left: 0;
}
footer #foot-wrap-pc #foot-img3sp {
width:100%;
height:auto;
padding:0;
margin:0;
text-align: center;
position: absolute;
top: 27%;
left: 0;
}
footer #foot-wrap-pc #foot-img4sp {
width:100%;
height:auto;
padding:0;
margin:0;
text-align: center;
position: absolute;
top: 39%;
left: 0;
}
footer #foot-wrap-pc #foot-img1sp img {
width:100%;
height:auto;
vertical-align: bottom;
}
footer #foot-wrap-pc #foot-img2sp img {
width:80%;
height:auto;
}
footer #foot-wrap-pc #foot-img3sp img {
width:60%;
height:auto;
}
footer #foot-wrap-pc #foot-img4sp img {
width:80%;
height:auto;
}
footer #foot-wrap-pc #tw-bird-sp {
width: 100%;
height: 500px;
position: absolute;
top: 43%;
left:37%;
z-index: 10;
}
footer #foot-wrap-pc #tw-bird-sp img {
width: 12%;
}
footer #foot-wrap-pc #billing-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
position: absolute;
top: 50%;
}
footer #foot-wrap-pc #billing-pc img {
width: 90%;
}
footer #foot-wrap-pc #billing-jp {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 62%;
left:0;
}
footer #foot-wrap-pc #billing-jp img {
width: 80%;
}
footer #foot-wrap-pc ul#ticket-banner {
display: none;
}
footer #foot-wrap-pc ul#ticket-banner-sp {
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 20px;
list-style-type: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: absolute;
top: 70%;
z-index:12;
}
footer #foot-wrap-pc ul#ticket-banner-sp li {
width: 40%;
margin: 7px 2%;
}
footer #foot-wrap-pc ul#ticket-banner-sp li img {
width: auto;
height: 11vw;
}
footer #foot-wrap-pc #button-area {
position: absolute;
top: 90%;
padding: 20px 0;
z-index:12;
}
footer .copyright {
width:100%;
height:auto;
padding:10px 0;
color:#fff;
text-align:center;
background:#1E0210;
font-size:0.7em;
}
}
/* 莉･荳九せ繝槭� */
@media (max-width: 600px) {
footer #foot-wrap-pc #tw-bird-sp {
width: 100%;
height: 500px;
position: absolute;
top: 47%;
left:37%;
z-index: 10;
}
footer #foot-wrap-pc #billing-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
position: absolute;
top: 50%;
}
footer #foot-wrap-pc #billing-pc img {
width: 90%;
}
footer #foot-wrap-pc #billing-jp {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 62%;
left:0;
}
footer #foot-wrap-pc #billing-jp img {
width: 80%;
}
footer #foot-wrap-pc ul#ticket-banner-sp {
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 20px;
list-style-type: none;
display: flex;
justify-content: center;
position: absolute;
top: 63%;
}
footer #foot-wrap-pc ul#ticket-banner-sp li {
width: 40%;
margin: 5px 2%;
}
footer #foot-wrap-pc #button-area {
position: absolute;
top: 84%;
padding: 20px 0;
display: block;
}
}
@media (max-width: 380px) {
footer #foot-wrap-pc #tw-bird-sp {
width: 100%;
height: 500px;
position: absolute;
top: 44%;
left:37%;
z-index: 10;
}
footer #foot-wrap-pc #billing-pc {
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
position: absolute;
top: 52%;
}
footer #foot-wrap-pc #billing-jp {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 64%;
left:0;
}
footer #foot-wrap-pc ul#ticket-banner-sp {
width: 100%;
height: auto;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
position: absolute;
top: 70%;
}
footer #foot-wrap-pc #button-area {
position: absolute;
top: 84%;
padding: 20px 0;
display: block;
}
}
/* ========================================
螢ｰ蜆ｪ邏ｹ莉�
========================================== */
body#voice-body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background:url(../img/fukikae_bg_1.jpg) center no-repeat;
background-size: cover;
background-position: top center;
min-height: 100%;
}
#voice-menu {
opacity: 1 !important;
}
#voice-menu .hamburger {
opacity: 1 !important;
}
#voice {
width: 100%;
height: auto;
margin: 0;
padding:0;
position: relative;
}
#voice .voice-slider-sp {
display: none;
}
#voice .voice-slider {
display: block;
width:100%;
height:100vh;
margin:0;
padding:0;
position: fixed;
top: 0;
}
#voice .voice-slider .slide-img {
width:100%;
height:auto;
margin:0;
padding:0;
border: none;
}
#voice .voice-slider .slide-img img {
width:100%;
height: auto;
margin:0;
padding:0;
vertical-align: bottom;
border: none;
}
#voice #voice-wrap {
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
#voice #voice-wrap h1 {
width: 100%;
height: auto;
margin: 80px 0 30px;
padding: 0;
text-align: center;
}
#voice #voice-wrap h1 img {
width: 20%;
}
#voice #voice-wrap .voice-unit ,
#voice #voice-wrap .other-unit {
width: 64%;
height: auto;
margin: 80px 16%;
padding: 30px 2% 80px;
background-color: rgba( 0,0,0 , 0.65 );
}
#voice #voice-wrap .voice-unit h2 {
width: 100%;
height: auto;
margin: 30px 0;
padding: 0;
text-align: center;
font-size: 2vw;
color: #fff;
}
#voice #voice-wrap .voice-unit h2 img {
width: 30%;
height: auto;
}
#voice #voice-wrap .voice-unit .actor-img {
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit .actor-img img {
width: 30%;
height: auto;
}
#voice #voice-wrap .voice-unit .role-img1 ,
#voice #voice-wrap .voice-unit .role-img {
width: 100%;
height: auto;
margin: 20px 0 20px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit .role-img1 img {
width: 50%;
height: auto;
}
#voice #voice-wrap .voice-unit .role-img img {
width: 22%;
height: auto;
}
#voice #voice-wrap .voice-unit h3 {
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit h3 img {
width: 20%;
height: auto;
}
#voice #voice-wrap .voice-unit h4 {
width: 100%;
height: auto;
margin: 60px 0 10px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit h4 img {
width: 20%;
height: auto;
}
#voice #voice-wrap .voice-unit .actor-txt {
width: 70%;
height: auto;
margin: 0 15%;
padding: 0;
text-align: left;
color: #fff;
font-size: 1.2vw;
}
#voice #voice-wrap .other-unit #other-txtsp {
display: none;
}
#voice #voice-wrap .other-unit #other-txt {
display: block;
width: 70%;
height: auto;
margin: 50px 15% 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .other-unit #other-txt img {
width: 70%;
}
#voice #voice-wrap .voice-unit #dub-list {
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#voice #voice-wrap .voice-unit #dub-list .dub-role ,
#voice #voice-wrap .voice-unit #dub-list .dcp {
width: 40%;
height: auto;
margin: 10px 2%;
padding: 0;
text-align: right;
color: #fff;
font-size: 1.2vw;
}
#voice #voice-wrap .voice-unit #dub-list .dub-name ,
#voice #voice-wrap .voice-unit #dub-list .dcpname {
width: 40%;
height: auto;
margin: 10px 2%;
padding: 0;
text-align: left;
color: #fff;
font-size: 1.2vw;
}
#voice #voice-wrap .voice-unit #original-txt {
width: 70%;
height: auto;
margin: 0 15%;
padding: 0;
text-align: center;
color: #fff;
font-size: 1.2vw;
}
#voice #voice-wrap .voice-unit #line-manga {
width: 100%;
height: auto;
margin: 50px 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit #line-manga img {
width: 7%;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#voice #voice-wrap h1 {
width: 100%;
height: auto;
margin: 80px 0 30px;
padding: 0;
text-align: center;
}
#voice #voice-wrap h1 img {
width: 60%;
}
#voice .voice-slider .voice-slider {
display: none;
}
#voice .voice-slider-sp {
display: block;
width:100%;
height:100vh;
margin:0;
padding:0;
position: fixed;
top: 0;
}
#voice .voice-slider-sp .slide-img {
width:100%;
height:auto;
margin:0;
padding:0;
border: none;
}
#voice .voice-slider-sp .slide-img img {
width:100%;
height: auto;
margin:0;
padding:0;
vertical-align: bottom;
border: none;
}
#voice #voice-wrap .voice-unit {
width: 90%;
height: auto;
margin: 80px 4%;
padding: 30px 1% 50px;
background-color: rgba( 0,0,0 , 0.65 );
}
#voice #voice-wrap .voice-unit h2 {
width: 100%;
height: auto;
margin: 30px 0;
padding: 0;
text-align: center;
font-size: 6vw;
color: #fff;
}
#voice #voice-wrap .voice-unit h2 img {
width: 80%;
height: auto;
}
#voice #voice-wrap .voice-unit .actor-img {
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit .actor-img img {
width: 80%;
height: auto;
}
#voice #voice-wrap .voice-unit .role-img1 ,
#voice #voice-wrap .voice-unit .role-img {
width: 100%;
height: auto;
margin: 20px 0 20px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit .role-img1 img {
width: 100%;
height: auto;
}
#voice #voice-wrap .voice-unit .role-img img {
width: 70%;
height: auto;
}
#voice #voice-wrap .voice-unit h3 {
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit h3 img {
width: 50%;
height: auto;
}
#voice #voice-wrap .voice-unit h4 {
width: 100%;
height: auto;
margin: 60px 0 10px;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit h4 img {
width: 50%;
height: auto;
}
#voice #voice-wrap .voice-unit .actor-txt {
width: 90%;
height: auto;
margin: 0 5%;
padding: 0;
text-align: left;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .other-unit {
width: 90%;
height: auto;
margin: 80px 4%;
padding: 30px 1%;
background-color: rgba( 0,0,0 , 0.65 );
}
#voice #voice-wrap .other-unit #other-txt {
display: none;
}
#voice #voice-wrap .other-unit #other-txtsp {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .other-unit #other-txtsp img {
width: 100%;
}
#voice #voice-wrap .voice-unit #dub-list .dub-role {
width: 30%;
height: auto;
margin: 10px 2%;
padding: 0;
text-align: right;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .voice-unit #dub-list .dub-name {
width: 60%;
height: auto;
margin: 10px 1%;
padding: 0;
text-align: left;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .voice-unit #dub-list .dcp {
width: 40%;
height: auto;
margin: 10px 2%;
padding: 0;
text-align: left;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .voice-unit #dub-list .dcpname {
width: 30%;
height: auto;
margin: 10px 1%;
padding: 0;
text-align: left;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .voice-unit #line-manga {
width: 100%;
height: auto;
margin: 50px 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit #line-manga img {
width: 7%;
}
#voice #voice-wrap .voice-unit #original-txt {
width: 90%;
height: auto;
margin: 0 5%;
padding: 0;
text-align: center;
color: #fff;
font-size: 4vw;
}
#voice #voice-wrap .voice-unit #line-manga {
width: 100%;
height: auto;
margin: 50px 0;
padding: 0;
text-align: center;
}
#voice #voice-wrap .voice-unit #line-manga img {
width: 20%;
}
}
/* ========================================
繧ｳ繝｡繝ｳ繝�
========================================== */
body#com-body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background:url(../img/comment_bg_pc.jpg) center no-repeat;
background-size: cover;
background-position: top center;
min-height: 100%;
}
#comment {
width: 100%;
height: auto;
margin: 0;
padding:0;
position: relative;
}
#comment h1 {
width: 100%;
height: auto;
margin: 0;
padding:100px 0 50px;
text-align: center;
}
#comment h1 img {
width: 20%;
}
#comment #keisho {
width: 90%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
color: #fff;
font-size: 1.1vw;
}
#comment #com-cards {
width: 90%;
height: auto;
margin: 0 auto;
padding: 0;
}
#comment #com-cards .com-unit {
width: 30%;
height: auto;
padding: 20px 0;
margin: 10px 1.5%;
border: #fff 2px solid;
color: #fff;
}
#comment #com-cards .com-unit .name {
width: 100%;
height: auto;
margin: 5px 0;
padding: 0;
text-align: center;
font-size: 1.7vw;
}
#comment #com-cards .com-unit .title {
width: 100%;
height: auto;
margin: 5px 0;
padding: 0;
text-align: center;
font-size: 1.1vw;
}
#comment #com-cards .com-unit .line {
width: 100%;
height: auto;
margin: 5px 0;
padding: 0;
text-align: center;
}
#comment #com-cards .com-unit .line img {
width: 50%;
height: auto;
}
#comment #com-cards .com-unit .txt {
width: 84%;
height: auto;
margin: 5px 0;
padding: 0 8%;
text-align: left;
font-size: 1.15vw;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#comment h1 {
width: 100%;
height: auto;
margin: 0;
padding:80px 0 30px;
text-align: center;
}
#comment h1 img {
width: 50%;
}
#comment #keisho {
width: 90%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
color: #fff;
font-size: 3.5vw;
}
#comment #com-cards {
width: 90%;
height: auto;
margin: 0 5%;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#comment #com-cards .com-unit {
width: 100%;
height: auto;
padding: 20px 0;
margin: 20px 0 !important;
border: #fff 2px solid;
color: #fff;
box-sizing:border-box;
}
#comment #com-cards .com-unit .name {
font-size: 5.2vw;
}
#comment #com-cards .com-unit .title {
font-size: 3.8vw;
}
#comment #com-cards .com-unit .txt {
width: 90%;
height: auto;
margin: 5px 0;
padding: 0 5%;
text-align: left;
font-size: 4.2vw;
}
}
/* ========================================
DVD
========================================== */
.dvd-slider-sp {
display: none;
}
.dvd-slider {
display: block;
width:100%;
height:100vh;
margin:0;
padding:0;
position: fixed;
top: 0;
z-index: 0;
}
.dvd-slider .slide-img {
width:100%;
height:auto;
margin:0;
padding:0;
border: none;
}
.dvd-slider .slide-img img {
width:100%;
height: auto;
margin:0;
padding:0;
vertical-align: bottom;
border: none;
}
#dvd {
width: 100%;
height: auto;
margin: 0;
padding:0;
position: relative;
overflow-x: hidden;
}
#dvd h2 {
width: 100%;
height: auto;
margin: 8vw 0 4vw;
padding: 0;
text-align: center;
}
#dvd h2 img {
width: 30%;
}
#dvd #dvd-wrap {
width: 60%;
height: auto;
margin: 3vw 15%;
padding: 3vw 5%;
text-align: center;
background-color: rgba( 60,2,21 , 0.8 );
}
#dvd #dvd-wrap #dvd-img {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#dvd #dvd-wrap #dvd-img img {
width: 40%;
}
#dvd #dvd-wrap #dvd-contents {
width: 100%;
height: auto;
margin: 0;
padding: 3vw 0;
position: relative;
}
#dvd #dvd-wrap #dvd-contents #dvd-bg {
width: 90%;
height: auto;
margin: 0 5%;
padding: 0;
}
#dvd #dvd-wrap #dvd-contents #dvd-bg img {
width: 100%;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt {
width: 98%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 12%;
left: 1%;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt p.dvd-center-txt {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
font-size: 1.2vw;
color: #fff;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt p.dvd-left-txt {
width: 64%;
height: auto;
margin: 2vw 18%;
padding: 0;
text-align: left;
font-size: 1.1vw;
color: #fff;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt #buy-btn {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt #buy-btn img {
width: 20%;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt #buy-btn img:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#dvd footer {
width: 100%;
height: auto;
margin: 15vw 0 0;
padding: 0;
background-color: transparent;
}
#dvd footer #dvd-foot-logo {
width: 100%;
height: auto;
margin: 3vw 0 0;
padding: 0;
text-align: center;
}
#dvd footer #dvd-foot-logo img {
width: 25%;
}
#dvd footer #dvd-foot-tw {
width: 100%;
height: auto;
margin: 2vw 0 10vw;
padding: 0;
text-align: center;
}
#dvd footer #dvd-foot-tw img {
width: 3%;
}
#dvd footer #button-area {
margin: 2vw 0;
}
#dvd footer .copyright {
background:#0E0309;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
.dvd-slider {
display: none;
}
.dvd-slider-sp {
display: block;
width:100%;
height:100vh;
margin:0;
padding:0;
position: fixed;
top: 0;
z-index: 0;
min-height: 100%;
}
.dvd-slider-sp .slide-img {
width:100%;
height:auto;
margin:0;
padding:0;
border: none;
}
.dvd-slider-sp .slide-img img {
width:100%;
height: auto;
margin:0;
padding:0;
vertical-align: bottom;
border: none;
}
#dvd h2 {
width: 100%;
height: auto;
margin: 22vw 0 15vw;
padding: 0;
text-align: center;
}
#dvd h2 img {
width: 95%;
}
#dvd #dvd-wrap {
width: 86%;
height: auto;
margin: 3vw 5%;
padding: 10vw 2%;
text-align: center;
background-color: rgba( 60,2,21 , 0.8 );
}
#dvd #dvd-wrap #dvd-img {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#dvd #dvd-wrap #dvd-img img {
width: 80%;
}
#dvd #dvd-wrap #dvd-contents #dvd-bg {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt {
width: 98%;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 10%;
left: 1%;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt p.dvd-center-txt {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
font-size: 3.9vw;
color: #fff;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt p.dvd-left-txt {
width: 88%;
height: auto;
margin: 2vw 6%;
padding: 0;
text-align: left;
font-size: 3.5vw;
color: #fff;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt #buy-btn {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#dvd #dvd-wrap #dvd-contents #dvd-txt #buy-btn img {
width: 50%;
}
#dvd footer #dvd-foot-logo {
width: 100%;
height: auto;
margin: 15vw 0 7vw;
padding: 0;
text-align: center;
}
#dvd footer #dvd-foot-logo img {
width: 70%;
}
#dvd footer #dvd-foot-tw {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#dvd footer #dvd-foot-tw img {
width: 12%;
}
#dvd footer #button-area {
margin: 2vw 0;
}
}
/* 莉･荳九せ繝槭� */
@media (max-width: 400px) {
.dvd-slider-sp {
display: block;
width:120%;
height:100vh;
margin:0;
padding:0;
position: fixed;
top: 0;
left: -10%;
z-index: 0;
}
}
/* ========================================
繧ｹ繝医Μ繝ｼ繝溘Φ繧ｰ
========================================== */
#streaming {
width: 100%;
height: auto;
margin: 0;
padding:0;
position: relative;
overflow-x: hidden;
}
#streaming h2 {
width: 100%;
height: auto;
margin: 8vw 0 4vw;
padding: 0;
text-align: center;
}
#streaming h2 img {
width: 15%;
}
#streaming #dvd-wrap {
width: 60%;
height: auto;
margin: 3vw 15%;
padding: 3vw 5%;
text-align: center;
background-color: rgba( 60,2,21 , 0.8 );
}
#streaming #dvd-wrap .line-img {
width: 100%;
height: auto;
margin: 0;
padding: 3vw 0;
text-align: center;
}
#streaming #dvd-wrap .line-img img {
width: 50%;
}
#streaming #dvd-wrap ul {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
list-style-image: url(../img/vod-dot.png);
}
#streaming #dvd-wrap ul li {
width: 70%;
margin: 1vw 0 1vw 30%;
padding: 0;
text-align: left;
color: #D6C59B;
font-size: 1.1vw;
}
#streaming #dvd-wrap ul li a {
width: 100%;
color: #D6C59B;
text-decoration: none;
font-size: 1.3vw;
}
#streaming #dvd-wrap ul li a:hover {
text-decoration: underline;
}
#streaming #dvd-wrap .warning {
width: 100%;
height: auto;
margin: 0;
padding: 1vw 0;
text-align: center;
color: #fff;
font-size: 1.2vw;
}
#streaming footer {
width: 100%;
height: auto;
margin: 15vw 0 0;
padding: 0;
background-color: transparent;
}
#streaming footer #dvd-foot-logo {
width: 100%;
height: auto;
margin: 3vw 0 0;
padding: 0;
text-align: center;
}
#streaming footer #dvd-foot-logo img {
width: 25%;
}
#streaming footer #dvd-foot-tw {
width: 100%;
height: auto;
margin: 2vw 0 10vw;
padding: 0;
text-align: center;
}
#streaming footer #dvd-foot-tw img {
width: 3%;
}
#streaming footer #button-area {
margin: 2vw 0;
}
#streaming footer .copyright {
background:#0E0309;
}
/* 莉･荳九せ繝槭� */
@media (max-width: 800px) {
#streaming h2 {
width: 100%;
height: auto;
margin: 22vw 0 15vw;
padding: 0;
text-align: center;
}
#streaming h2 img {
width: 50%;
}
#streaming #dvd-wrap {
width: 86%;
height: auto;
margin: 3vw 5%;
padding: 10vw 2%;
text-align: center;
background-color: rgba( 60,2,21 , 0.8 );
}
#streaming #dvd-wrap .line-img {
width: 100%;
height: auto;
margin: 0;
padding: 3vw 0;
text-align: center;
}
#streaming #dvd-wrap .line-img img {
width: 50%;
}
#streaming #dvd-wrap ul {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
}
#streaming #dvd-wrap ul li {
width: 90%;
margin: 1vw 0 1vw 10%;
padding: 0;
text-align: left;
font-size: 3.5vw;
}
#streaming #dvd-wrap ul li a {
width: 100%;
text-decoration: none;
font-size: 4vw;
}
#streaming #dvd-wrap ul li a:hover {
text-decoration: underline;
}
#streaming #dvd-wrap .line-img {
width: 100%;
height: auto;
margin: 0;
padding: 3vw 0;
text-align: center;
}
#streaming #dvd-wrap .line-img img {
width: 80%;
}
#streaming #dvd-wrap .warning {
width: 100%;
height: auto;
margin: 0;
padding: 5vw 0;
text-align: center;
color: #fff;
font-size: 3.8vw;
}
#streaming footer #dvd-foot-logo {
width: 100%;
height: auto;
margin: 15vw 0 7vw;
padding: 0;
text-align: center;
}
#streaming footer #dvd-foot-logo img {
width: 70%;
}
#streaming footer #dvd-foot-tw {
width: 100%;
height: auto;
margin: 2vw 0;
padding: 0;
text-align: center;
}
#streaming footer #dvd-foot-tw img {
width: 12%;
}
#streaming footer #button-area {
margin: 2vw 0;
}
}