は、width指定もしくはdisplay:inline-block */
/*-------------------------------------------*/
/* [ロールオーバーで枠線が太くなる] */
/* @MEMO */
/*
*/
/*
は、width指定もしくはdisplay:inline-block */
/*-------------------------------------------*/
/* [ロールオーバーでマーカーが伸びる(ver.1行)] */
/*-------------------------------------------*/
/* [ロールオーバーで揺らす] */
@-webkit-keyframes shakeAction {
0% {
-webkit-transform: rotate(1.2deg);
-ms-transform: rotate(1.2deg);
transform: rotate(1.2deg);
}
20% {
-webkit-transform: rotate(-0.8deg);
-ms-transform: rotate(-0.8deg);
transform: rotate(-0.8deg);
}
40% {
-webkit-transform: rotate(0.4deg);
-ms-transform: rotate(0.4deg);
transform: rotate(0.4deg);
}
60% {
-webkit-transform: rotate(-0.75deg);
-ms-transform: rotate(-0.75deg);
transform: rotate(-0.75deg);
}
70% {
-webkit-transform: rotate(0.375deg);
-ms-transform: rotate(0.375deg);
transform: rotate(0.375deg);
}
80% {
-webkit-transform: rotate(-0.25deg);
-ms-transform: rotate(-0.25deg);
transform: rotate(-0.25deg);
}
90% {
-webkit-transform: rotate(0.125deg);
-ms-transform: rotate(0.125deg);
transform: rotate(0.125deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shakeAction {
0% {
-webkit-transform: rotate(1.2deg);
-ms-transform: rotate(1.2deg);
transform: rotate(1.2deg);
}
20% {
-webkit-transform: rotate(-0.8deg);
-ms-transform: rotate(-0.8deg);
transform: rotate(-0.8deg);
}
40% {
-webkit-transform: rotate(0.4deg);
-ms-transform: rotate(0.4deg);
transform: rotate(0.4deg);
}
60% {
-webkit-transform: rotate(-0.75deg);
-ms-transform: rotate(-0.75deg);
transform: rotate(-0.75deg);
}
70% {
-webkit-transform: rotate(0.375deg);
-ms-transform: rotate(0.375deg);
transform: rotate(0.375deg);
}
80% {
-webkit-transform: rotate(-0.25deg);
-ms-transform: rotate(-0.25deg);
transform: rotate(-0.25deg);
}
90% {
-webkit-transform: rotate(0.125deg);
-ms-transform: rotate(0.125deg);
transform: rotate(0.125deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes shakeActionHard {
0% {
-webkit-transform: rotate(2.4deg);
-ms-transform: rotate(2.4deg);
transform: rotate(2.4deg);
}
20% {
-webkit-transform: rotate(-1.6deg);
-ms-transform: rotate(-1.6deg);
transform: rotate(-1.6deg);
}
40% {
-webkit-transform: rotate(0.8deg);
-ms-transform: rotate(0.8deg);
transform: rotate(0.8deg);
}
60% {
-webkit-transform: rotate(-1.5deg);
-ms-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
}
70% {
-webkit-transform: rotate(0.7deg);
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
}
80% {
-webkit-transform: rotate(-0.5deg);
-ms-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
}
90% {
-webkit-transform: rotate(0.25deg);
-ms-transform: rotate(0.25deg);
transform: rotate(0.25deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shakeActionHard {
0% {
-webkit-transform: rotate(2.4deg);
-ms-transform: rotate(2.4deg);
transform: rotate(2.4deg);
}
20% {
-webkit-transform: rotate(-1.6deg);
-ms-transform: rotate(-1.6deg);
transform: rotate(-1.6deg);
}
40% {
-webkit-transform: rotate(0.8deg);
-ms-transform: rotate(0.8deg);
transform: rotate(0.8deg);
}
60% {
-webkit-transform: rotate(-1.5deg);
-ms-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
}
70% {
-webkit-transform: rotate(0.7deg);
-ms-transform: rotate(0.7deg);
transform: rotate(0.7deg);
}
80% {
-webkit-transform: rotate(-0.5deg);
-ms-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
}
90% {
-webkit-transform: rotate(0.25deg);
-ms-transform: rotate(0.25deg);
transform: rotate(0.25deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/*-------------------------------------------*/
/* [揺らぎ演出] */
@-webkit-keyframes yuragiSSsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(5px, 9999px, 10px, 0);
}
2% {
clip: rect(10px, 9999px, 17px, 0);
}
3% {
clip: rect(15px, 9999px, 20px, 0);
}
5% {
clip: rect(0, 9999px, 5px, 0);
}
8% {
clip: rect(30px, 9999px, 40px, 0);
}
10% {
clip: rect(10px, 9999px, 20px, 0);
}
11% {
clip: rect(45px, 9999px, 50px, 0);
}
12% {
clip: rect(30px, 9999px, 40px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(10px, 9999px, 15px, 0);
}
35% {
clip: rect(15px, 9999px, 25px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiSSsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(5px, 9999px, 10px, 0);
}
2% {
clip: rect(10px, 9999px, 17px, 0);
}
3% {
clip: rect(15px, 9999px, 20px, 0);
}
5% {
clip: rect(0, 9999px, 5px, 0);
}
8% {
clip: rect(30px, 9999px, 40px, 0);
}
10% {
clip: rect(10px, 9999px, 20px, 0);
}
11% {
clip: rect(45px, 9999px, 50px, 0);
}
12% {
clip: rect(30px, 9999px, 40px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(10px, 9999px, 15px, 0);
}
35% {
clip: rect(15px, 9999px, 25px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiSSsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 40px, 0);
}
2% {
clip: rect(0, 9999px, 10px, 0);
}
3% {
clip: rect(10px, 9999px, 20px, 0);
}
5% {
clip: rect(5px, 9999px, 15px, 0);
}
9% {
clip: rect(10px, 9999px, 20px, 0);
}
10% {
clip: rect(40px, 9999px, 50px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(20px, 9999px, 45px, 0);
}
36% {
clip: rect(50px, 9999px, 60px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiSSsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 40px, 0);
}
2% {
clip: rect(0, 9999px, 10px, 0);
}
3% {
clip: rect(10px, 9999px, 20px, 0);
}
5% {
clip: rect(5px, 9999px, 15px, 0);
}
9% {
clip: rect(10px, 9999px, 20px, 0);
}
10% {
clip: rect(40px, 9999px, 50px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(20px, 9999px, 45px, 0);
}
36% {
clip: rect(50px, 9999px, 60px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiMsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 50px, 0);
}
2% {
clip: rect(10px, 9999px, 35px, 0);
}
3% {
clip: rect(40px, 9999px, 70px, 0);
}
5% {
clip: rect(150px, 9999px, 200px, 0);
}
8% {
clip: rect(100px, 9999px, 160px, 0);
}
10% {
clip: rect(40px, 9999px, 90px, 0);
}
11% {
clip: rect(150px, 9999px, 220px, 0);
}
12% {
clip: rect(140px, 9999px, 160px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(40px, 9999px, 50px, 0);
}
35% {
clip: rect(80px, 9999px, 100px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiMsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 50px, 0);
}
2% {
clip: rect(10px, 9999px, 35px, 0);
}
3% {
clip: rect(40px, 9999px, 70px, 0);
}
5% {
clip: rect(150px, 9999px, 200px, 0);
}
8% {
clip: rect(100px, 9999px, 160px, 0);
}
10% {
clip: rect(40px, 9999px, 90px, 0);
}
11% {
clip: rect(150px, 9999px, 220px, 0);
}
12% {
clip: rect(140px, 9999px, 160px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(40px, 9999px, 50px, 0);
}
35% {
clip: rect(80px, 9999px, 100px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiMsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(320px, 9999px, 350px, 0);
}
2% {
clip: rect(300px, 9999px, 335px, 0);
}
3% {
clip: rect(250px, 9999px, 270px, 0);
}
5% {
clip: rect(400px, 9999px, 420px, 0);
}
9% {
clip: rect(400px, 9999px, 420px, 0);
}
10% {
clip: rect(300px, 9999px, 340px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(490px, 9999px, 510px, 0);
}
36% {
clip: rect(540px, 9999px, 580px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiMsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(320px, 9999px, 350px, 0);
}
2% {
clip: rect(300px, 9999px, 335px, 0);
}
3% {
clip: rect(250px, 9999px, 270px, 0);
}
5% {
clip: rect(400px, 9999px, 420px, 0);
}
9% {
clip: rect(400px, 9999px, 420px, 0);
}
10% {
clip: rect(300px, 9999px, 340px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(490px, 9999px, 510px, 0);
}
36% {
clip: rect(540px, 9999px, 580px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiLsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(80px, 9999px, 110px, 0);
}
2% {
clip: rect(30px, 9999px, 65px, 0);
}
3% {
clip: rect(100px, 9999px, 140px, 0);
}
5% {
clip: rect(390px, 9999px, 450px, 0);
}
8% {
clip: rect(250px, 9999px, 320px, 0);
}
10% {
clip: rect(140px, 9999px, 180px, 0);
}
11% {
clip: rect(400px, 9999px, 440px, 0);
}
12% {
clip: rect(280px, 9999px, 310px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(45px, 9999px, 100px, 0);
}
35% {
clip: rect(150px, 9999px, 200px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiLsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(80px, 9999px, 110px, 0);
}
2% {
clip: rect(30px, 9999px, 65px, 0);
}
3% {
clip: rect(100px, 9999px, 140px, 0);
}
5% {
clip: rect(390px, 9999px, 450px, 0);
}
8% {
clip: rect(250px, 9999px, 320px, 0);
}
10% {
clip: rect(140px, 9999px, 180px, 0);
}
11% {
clip: rect(400px, 9999px, 440px, 0);
}
12% {
clip: rect(280px, 9999px, 310px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(45px, 9999px, 100px, 0);
}
35% {
clip: rect(150px, 9999px, 200px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiLsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(680px, 9999px, 710px, 0);
}
2% {
clip: rect(630px, 9999px, 665px, 0);
}
3% {
clip: rect(500px, 9999px, 540px, 0);
}
5% {
clip: rect(890px, 9999px, 950px, 0);
}
9% {
clip: rect(890px, 9999px, 950px, 0);
}
10% {
clip: rect(700px, 9999px, 780px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(980px, 9999px, 1010px, 0);
}
36% {
clip: rect(1045px, 9999px, 1180px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiLsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(680px, 9999px, 710px, 0);
}
2% {
clip: rect(630px, 9999px, 665px, 0);
}
3% {
clip: rect(500px, 9999px, 540px, 0);
}
5% {
clip: rect(890px, 9999px, 950px, 0);
}
9% {
clip: rect(890px, 9999px, 950px, 0);
}
10% {
clip: rect(700px, 9999px, 780px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(980px, 9999px, 1010px, 0);
}
36% {
clip: rect(1045px, 9999px, 1180px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
/*-------------------------------------------*/
/* [スノーノイズ] */
@-webkit-keyframes snowNoiseFrame {
0% {
background-position: 50px 0;
}
40% {
background-position: 10px 50%;
}
80% {
background-position: 300px 100%;
}
100% {
background-position: 0 0;
}
}
@keyframes snowNoiseFrame {
0% {
background-position: 50px 0;
}
40% {
background-position: 10px 50%;
}
80% {
background-position: 300px 100%;
}
100% {
background-position: 0 0;
}
}
/*----------------------------------*/
/* [BLINK EFFECT] */
/* @MEMO */
.blinkEf {
display: block;
width: 0;
overflow: hidden;
}
.blinkEf .blinkEfC {
display: block;
background-color: white;
}
.blinkEf.is-render {
-webkit-animation: blinkEfWidthFrame 0.2s ease-out;
animation: blinkEfWidthFrame 0.2s ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.blinkEf.is-render .blinkEfC {
-webkit-animation: blinkEfCFrame 0.2s ease-out;
animation: blinkEfCFrame 0.2s ease-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes blinkEfWidthFrame {
0% {
width: 0;
}
1% {
width: 100%;
}
20% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes blinkEfWidthFrame {
0% {
width: 0;
}
1% {
width: 100%;
}
20% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes blinkEfCFrame {
0% {
background-color: white;
}
50% {
background-color: white;
}
100% {
background-color: rgba(255, 255, 255, 0);
}
}
@keyframes blinkEfCFrame {
0% {
background-color: white;
}
50% {
background-color: white;
}
100% {
background-color: rgba(255, 255, 255, 0);
}
}
/* common
##################################### */
.img_hover, #header h1 a, #bnr a, #index_main #main_bnr a, #index.april #index_main #mainvisual #bnr_true a, #story .box_story .img li {
position: relative;
display: inline-block;
}
.img_hover::after, #header h1 a::after, #bnr a::after, #index_main #main_bnr a::after, #index.april #index_main #mainvisual #bnr_true a::after, #story .box_story .img li::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #960600;
opacity: 0;
transition: all 0.4s;
}
.img_hover:hover::after, #header h1 a:hover::after, #bnr a:hover::after, #index_main #main_bnr a:hover::after, #index.april #index_main #mainvisual #bnr_true a:hover::after, #story .box_story .img li:hover::after {
opacity: .2;
}
.v_marker, #header #gnav ul a, #index_news .btn_more {
position: relative;
display: inline-block;
}
.v_marker::before, #header #gnav ul a::before, #index_news .btn_more::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: #91130f;
transition: all 0.4s;
}
.v_marker img, #header #gnav ul a img, #index_news .btn_more img {
position: relative;
transition: all 0.4s;
}
.v_marker::after, #header #gnav ul a::after, #index_news .btn_more::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.4s;
}
.v_marker:hover::before, #header #gnav ul a:hover::before, #index_news .btn_more:hover::before {
height: 100%;
}
.v_marker:hover img, #header #gnav ul a:hover img, #index_news .btn_more:hover img {
opacity: 0;
}
.v_marker:hover::after, #header #gnav ul a:hover::after, #index_news .btn_more:hover::after {
opacity: 1;
}
.h_marker, #news #pager .pager_side a, #news #pager .pager_center > a, #news .btn_back a, #special #pager .pager_side a, #special #pager .pager_center > a, #special .btn_back a {
position: relative;
display: inline-block;
color: #91130f;
}
.h_marker::before, #news #pager .pager_side a::before, #news #pager .pager_center > a::before, #news .btn_back a::before, #special #pager .pager_side a::before, #special #pager .pager_center > a::before, #special .btn_back a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #91130f;
transition: all 0.4s;
}
.h_marker img, #news #pager .pager_side a img, #news #pager .pager_center > a img, #news .btn_back a img, #special #pager .pager_side a img, #special #pager .pager_center > a img, #special .btn_back a img, .h_marker span, #news #pager .pager_side a span, #news #pager .pager_center > a span, #news .btn_back a span, #special #pager .pager_side a span, #special #pager .pager_center > a span, #special .btn_back a span {
position: relative;
}
.h_marker.imgtxt img, #news #pager .pager_side a.imgtxt img, #news #pager .pager_center > a.imgtxt img, #news .btn_back a.imgtxt img, #special #pager .pager_side a.imgtxt img, #special #pager .pager_center > a.imgtxt img, #special .btn_back a.imgtxt img, .h_marker span, #news #pager .pager_side a span, #news #pager .pager_center > a span, #news .btn_back a span, #special #pager .pager_side a span, #special #pager .pager_center > a span, #special .btn_back a span {
transition: all 0.4s;
}
.h_marker.imgtxt::after, #news #pager .pager_side a.imgtxt::after, #news #pager .pager_center > a.imgtxt::after, #news .btn_back a.imgtxt::after, #special #pager .pager_side a.imgtxt::after, #special #pager .pager_center > a.imgtxt::after, #special .btn_back a.imgtxt::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.4s;
}
.h_marker:hover, #news #pager .pager_side a:hover, #news #pager .pager_center > a:hover, #news .btn_back a:hover, #special #pager .pager_side a:hover, #special #pager .pager_center > a:hover, #special .btn_back a:hover {
color: #000;
}
.h_marker:hover::before, #news #pager .pager_side a:hover::before, #news #pager .pager_center > a:hover::before, #news .btn_back a:hover::before, #special #pager .pager_side a:hover::before, #special #pager .pager_center > a:hover::before, #special .btn_back a:hover::before {
width: 100%;
}
.h_marker:hover.imgtxt img, #news #pager .pager_side a:hover.imgtxt img, #news #pager .pager_center > a:hover.imgtxt img, #news .btn_back a:hover.imgtxt img, #special #pager .pager_side a:hover.imgtxt img, #special #pager .pager_center > a:hover.imgtxt img, #special .btn_back a:hover.imgtxt img {
opacity: 0;
}
.h_marker:hover.imgtxt::after, #news #pager .pager_side a:hover.imgtxt::after, #news #pager .pager_center > a:hover.imgtxt::after, #news .btn_back a:hover.imgtxt::after, #special #pager .pager_side a:hover.imgtxt::after, #special #pager .pager_center > a:hover.imgtxt::after, #special .btn_back a:hover.imgtxt::after {
opacity: 1;
}
.h_marker_txt {
position: relative;
display: inline-block;
}
.h_marker_txt::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #91130f;
transition: all 0.4s;
}
.h_marker_txt span {
position: relative;
}
.h_marker_txt:hover {
color: #000;
}
.h_marker_txt:hover::before {
width: 100%;
}
/* structure
##################################### */
body.page {
overflow-y: scroll;
}
#loader, #shutter {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
}
#loader .shutter_l, #shutter .shutter_l {
position: absolute;
top: 0;
left: 0;
height: 0;
border-style: solid;
border-width: 90vw 90vw 0 0;
border-color: #000 transparent transparent transparent;
}
#loader .shutter_r, #shutter .shutter_r {
position: absolute;
bottom: 0;
right: 0;
height: 0;
border-style: solid;
border-width: 0 0 90vw 90vw;
border-color: transparent transparent #000 transparent;
}
.april #loader .shutter_l, .april #shutter .shutter_l {
border-color: #fff transparent transparent transparent;
}
.april #loader .shutter_r, .april #shutter .shutter_r {
border-color: transparent transparent #fff transparent;
}
#stage {
position: relative;
width: 100%;
min-width: 1240px;
max-width: 2000px;
margin: 0 auto;
}
#header {
position: absolute;
top: 50px;
left: 0;
width: 100%;
z-index: 100;
}
#header h1 {
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 100px;
}
#header h1 a {
width: 100%;
padding-top: 100%;
font-size: 0;
text-indent: -9999px;
background: url("../img/common/logo.jpg") no-repeat 0 0;
background-size: contain;
}
#header #gnav {
position: absolute;
top: 0;
right: 100px;
}
#header #gnav ul {
overflow: hidden;
}
#header #gnav ul li {
float: right;
margin-left: 10px;
}
#header #gnav ul a {
background: #91130f;
}
#header #gnav ul a::before {
background: #000;
}
#header #gnav ul .news a::after {
background: url("../img/common/btn_gnav_news_on.png") no-repeat 0 0;
}
#header #gnav ul .intro a::after {
background: url("../img/common/btn_gnav_intro_on.png") no-repeat 0 0;
}
#header #gnav ul .onair a::after {
background: url("../img/common/btn_gnav_onair_on.png") no-repeat 0 0;
}
#header #gnav ul .story a::after {
background: url("../img/common/btn_gnav_story_on.png") no-repeat 0 0;
}
#header #gnav ul .chara a::after {
background: url("../img/common/btn_gnav_chara_on.png") no-repeat 0 0;
}
#header #gnav ul .staffcast a::after {
background: url("../img/common/btn_gnav_staffcast_on.png") no-repeat 0 0;
}
#header #gnav ul .movie a::after {
background: url("../img/common/btn_gnav_movie_on.png") no-repeat 0 0;
}
#header #gnav ul .music a::after {
background: url("../img/common/btn_gnav_music_on.png") no-repeat 0 0;
}
#header #gnav ul .package a::after {
background: url("../img/common/btn_gnav_package_on.png") no-repeat 0 0;
}
#header #gnav ul .goods a::after {
background: url("../img/common/btn_gnav_goods_on.png") no-repeat 0 0;
}
#header #gnav ul .special a::after {
background: url("../img/common/btn_gnav_special_on.png") no-repeat 0 0;
}
#header #gnav ul .tw a::after {
background: url("../img/common/btn_gnav_tw_on.png") no-repeat 0 0;
}
#header #gnav ul .is-active a {
background: #000;
}
#header #gnav ul .is-active a::after {
opacity: 1;
}
#header #gnav ul .is-active a img {
opacity: 0;
}
#index h1 {
width: 200px;
height: 199px;
}
#main {
background-image: url("../img/common/bg_mv04.png"), url("../img/common/bg_mv02.png"), url("../img/common/bg_pat.png"), url("../img/common/bg_mv01.png");
background-repeat: no-repeat,
no-repeat,
repeat,
repeat-x;
background-position: 50% 120px,
50% -260px,
50% -260px,
0 -260px;
}
.ttl_page {
margin: 0 100px;
padding: 200px 0 60px;
}
.ttl_sub {
position: absolute;
top: -10px;
left: 0;
z-index: 60;
}
.ttl_elem {
padding-bottom: .3em;
margin-bottom: 20px;
border-bottom: 1px solid #c3ba78;
}
.ttl_elem::before {
content: '';
display: inline-block;
width: 20px;
height: 24px;
margin-right: .5em;
background: url("../img/common/ico01.png") no-repeat;
vertical-align: text-bottom;
}
#main_inner {
padding-top: 80px;
background-color: #000;
background-image: url("../img/common/bg_flower01.png"), url("../img/common/bg_cor01.png");
background-repeat: no-repeat,
no-repeat;
background-position: 50% 100%,
0 0;
}
#main_inner.pb {
padding-bottom: 300px;
}
.box_on {
padding-bottom: 250px;
background-color: #91130f;
background-image: url("../img/common/bg_flower02.png");
background-repeat: no-repeat;
background-position: 50% 100%;
}
.box_on .box .inner {
padding-top: 80px;
}
#share {
position: absolute;
top: 267px;
left: 100px;
width: 96px;
height: 74px;
background: url("../img/common/bg_share.png") no-repeat 0 0;
z-index: 100;
}
#share li {
position: absolute;
width: 26px;
height: 26px;
}
#share li span {
display: inline-block;
width: 100%;
height: 100%;
}
#share li span::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
transition: all 0.4s;
}
#share li span::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.4s;
}
#share li.tw {
top: 13px;
left: 12px;
}
#share li.tw span::before {
background: url("../img/common/btn_share_tw.png") no-repeat 50% 50%;
}
#share li.tw span::after {
background: url("../img/common/btn_share_tw_on.png") no-repeat 50% 50%;
}
#share li.fb {
top: 12px;
left: 57px;
}
#share li.fb span::before {
background: url("../img/common/btn_share_fb.png") no-repeat 50% 50%;
}
#share li.fb span::after {
background: url("../img/common/btn_share_fb_on.png") no-repeat 50% 50%;
}
#share li.hatebu {
top: 35px;
left: 34px;
}
#share li.hatebu span::before {
background: url("../img/common/btn_share_hatebu.png") no-repeat 50% 50%;
}
#share li.hatebu span::after {
background: url("../img/common/btn_share_hatebu_on.png") no-repeat 50% 50%;
}
#share li a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 0;
text-indent: -9999px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
#share li a:hover + span::before {
opacity: 0;
}
#share li a:hover + span::after {
opacity: 1;
}
#index #share {
top: inherit;
bottom: 215px;
left: 100px;
}
#bnr {
margin-bottom: 50px;
}
#bnr ul {
width: 780px;
margin: 0 auto;
overflow: hidden;
}
#bnr ul li {
margin-top: 20px;
}
#bnr ul li:nth-child(1), #bnr ul li:nth-child(2) {
margin-top: 0;
}
#bnr ul li:nth-child(odd) {
float: left;
}
#bnr ul li:nth-child(even) {
float: right;
}
#index #bnr {
float: right;
margin-bottom: 0;
}
#index #bnr ul {
width: auto;
}
#index #bnr ul li {
float: none;
margin-top: 0;
}
#index #bnr ul li:not(:last-child) {
margin-bottom: 20px;
}
#footer {
padding: 50px 0;
background: #1a1a1a;
border-top: 2px solid #c3ba78;
text-align: center;
font-size: 11px;
font-size: 1.1rem;
line-height: 1.7;
font-weight: normal;
}
#footer #fnav {
margin: 20px 0 40px;
letter-spacing: -.4em;
}
#footer #fnav li {
display: inline-block;
padding: 0 1.5em;
border-right: 1px solid #2e2e2e;
letter-spacing: normal;
}
#footer #fnav li:first-child {
border-left: 1px solid #2e2e2e;
}
#footer #fnav a {
color: #fff;
transition: all 0.4s;
}
#footer #fnav a:hover {
color: #91130f;
}
#footer #copyright {
font-size: 9px;
font-size: 0.9rem;
line-height: 1.7;
font-weight: normal;
}
#btn_ptop {
position: fixed;
bottom: -10px;
right: 20px;
display: block;
z-index: 200;
opacity: 0;
transition: all 0.4s;
}
#btn_ptop img {
transition: all 0.4s;
}
#btn_ptop::after {
content: url("../img/common/btn_ptop_on.png");
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.4s;
}
#btn_ptop.on {
bottom: 20px;
opacity: 1;
}
#btn_ptop:hover img {
opacity: 0;
}
#btn_ptop:hover::after {
opacity: 1;
}
/* parts
##################################### */
.box {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
z-index: 100;
}
.table01 thead th {
padding: 3px 20px;
border-bottom: 2px solid #000;
color: #000;
}
.table01 tbody {
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.table01 tbody tr:not(:last-child) td {
border-bottom: 1px solid #000;
}
.table01 tbody td {
padding: 20px;
}
.btn01 {
display: inline-block;
padding: .2em 1em;
border: 1px solid #fff;
color: #fff;
transition: all 0.4s ease-out;
}
.btn01:hover {
background: #fff;
color: #000;
}
/* index
##################################### */
#index .box .inner {
padding: 80px 0;
margin-left: 140px;
}
#index #bg_flower {
position: fixed;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#index #bg_flower > div {
width: 960px;
padding: 0 450px;
margin: 0 auto;
opacity: 0;
}
#index #bg_flower .flower01 {
height: 521px;
background-image: url("../img/index/flower_l02.png"), url("../img/index/flower_r02.png");
background-repeat: no-repeat,
no-repeat;
background-position: 246px 100%, 1440px 0;
}
#index #bg_flower .flower02 {
height: 348px;
margin-top: -168px;
background-image: url("../img/index/flower_r01.png");
background-repeat: no-repeat;
background-position: 1605px 0;
}
#index #bg_flower .flower03 {
height: 380px;
background-image: url("../img/index/flower_l01.png"), url("../img/index/flower_r03.png");
background-repeat: no-repeat,
no-repeat;
background-position: 201px 0, 1480px 100%;
}
#index_main {
position: relative;
height: 100vh;
min-height: 780px;
max-height: 880px;
background-color: #000;
overflow: hidden;
}
#index_main #bg_set {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/common/bg_mv04.png"), url("../img/common/bg_mv03.png"), url("../img/common/bg_mv02.png"), url("../img/common/bg_pat.png"), url("../img/common/bg_mv01.png");
background-repeat: no-repeat,
no-repeat,
no-repeat,
repeat,
repeat-x;
background-position: 50% 100%,
50% 100%,
50% 50%,
50% 0,
0 0;
}
#index_main #bg_set02 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/index/bg_mv05.png");
background-repeat: no-repeat;
background-position: 0 100%;
z-index: 30;
}
#index_main #mainvisual {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#index_main #mainvisual #img_chara {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-364px, 0);
-ms-transform: translate(-364px, 0);
transform: translate(-364px, 0);
z-index: 30;
}
#index_main #mainvisual #img_chara02 {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-410px, 0);
-ms-transform: translate(-410px, 0);
transform: translate(-410px, 0);
z-index: 20;
}
#index_main #mainvisual #img_chara03 {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-364px, 0);
-ms-transform: translate(-364px, 0);
transform: translate(-364px, 0);
z-index: 10;
}
#index_main #mainvisual #img_copy01 {
position: absolute;
top: 54px;
left: 50%;
-webkit-transform: translate(-25px, 0);
-ms-transform: translate(-25px, 0);
transform: translate(-25px, 0);
z-index: 50;
}
#index_main #mainvisual #img_copy01_02 {
position: absolute;
bottom: 3.6%;
left: 50%;
-webkit-transform: translate(472px, 0);
-ms-transform: translate(472px, 0);
transform: translate(472px, 0);
z-index: 50;
}
#index_main #mainvisual #img_copy02 {
position: absolute;
bottom: 44.5%;
left: 92px;
z-index: 50;
}
#index_main #releaseday {
position: absolute;
bottom: 48px;
left: 100px;
z-index: 50;
}
#index_main #main_bnr {
position: absolute;
bottom: 48px;
left: 560px;
z-index: 50;
}
#index_main #main_bnr ul {
overflow: hidden;
}
#index_main #main_bnr ul li {
float: left;
margin-left: 20px;
}
#index_main .opmv {
display: none;
}
#index_news {
position: relative;
background: url("../img/common/bg_cor01.png") no-repeat -220px 0 #91130f;
}
#index_news .btn_more {
position: absolute;
top: 182px;
left: 7px;
}
#index_news .btn_more::after {
background: url("../img/index/btn_more_on.png") no-repeat 0 0;
}
#index_news ol {
overflow: hidden;
}
#index_news ol li {
float: left;
width: 160px;
}
#index_news ol li:not(:last-child) {
margin-right: 60px;
}
#index_news ol li.new .thum::before {
content: '';
position: absolute;
bottom: -25px;
right: 0;
width: 34px;
height: 17px;
background: url("../img/common/ico_new.png") no-repeat 0 0;
}
#index_news ol a {
display: block;
color: #000;
}
#index_news ol a .thum {
position: relative;
padding-top: 100%;
margin-bottom: 10px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#index_news ol a .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #91130f;
opacity: 0;
transition: all 0.4s;
}
#index_news ol a .date {
display: block;
color: #c3ba78;
}
#index_news ol a:hover .thum::after {
opacity: .2;
}
#index_tw {
position: relative;
background: url("../img/common/bg_flower01.png") no-repeat 50% 100% #000;
}
#index_tw .inner {
overflow: hidden;
}
#index_tw #widget {
float: left;
box-sizing: border-box;
width: 400px;
height: 520px;
padding: 80px 50px 70px;
background: url("../img/index/bg_widget.png") no-repeat 0 0;
}
#index.april {
background-color: #fff;
}
#index.april #gnav, #index.april #index_news, #index.april #index_tw {
display: none !important;
}
#index.april h1 {
top: 0;
left: 67px;
width: 266px;
height: 266px;
margin-top: -33px;
}
#index.april h1 a {
background: url("../img/index_april/logo.png") no-repeat;
transition: all 0.4s;
}
#index.april h1 a:hover {
opacity: .9;
}
#index.april h1 a::after {
display: none !important;
}
#index.april #bg_flower {
display: none !important;
}
#index.april #bg_flower .flower01 {
height: 585px;
background-image: url("../img/index_april/flower_l02.png"), url("../img/index_april/flower_r02.png");
background-position: 146px 100%,
1480px 0;
}
#index.april #bg_flower .flower02 {
margin-top: -98px;
background-image: url("../img/index_april/flower_r01.png");
background-position: 1515px 0;
}
#index.april #bg_flower .flower03 {
height: 312px;
margin-top: -60px;
background-image: url("../img/index_april/flower_l01.png"), url("../img/index_april/flower_r03.png");
background-position: 141px 0,
1460px 100%;
}
#index.april #index_main {
background-color: #fff;
}
#index.april #index_main #bg_set {
background-image: url("../img/index/bg_mv05.png"), url("../img/index_april/bg_mva02.png"), url("../img/index_april/bg_mva01.jpg");
background-repeat: no-repeat,
no-repeat,
no-repeat;
background-position: 0 100%,
50% 0,
50% 100%;
}
#index.april #index_main #mainvisual {
background: url("../img/index_april/mainvisual_kiku.png") no-repeat 50% 0;
}
#index.april #index_main #mainvisual #img_chara {
-webkit-transform: translate(-48%, 0);
-ms-transform: translate(-48%, 0);
transform: translate(-48%, 0);
}
#index.april #index_main #mainvisual #img_feather {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/index_april/bg_mva03.png") no-repeat 48% 100%;
}
#index.april #index_main #mainvisual #bnr_true {
position: absolute;
top: 50px;
right: 100px;
}
/* news
##################################### */
#news #list_news {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#news #list_news li {
width: 280px;
margin-top: 60px;
}
#news #list_news li:not(:nth-child(3n)) {
margin-right: 60px;
}
#news #list_news li:nth-child(1), #news #list_news li:nth-child(2), #news #list_news li:nth-child(3) {
margin-top: 0;
}
#news #list_news li.new .thum::before {
content: '';
position: absolute;
bottom: -40px;
right: 0;
width: 34px;
height: 17px;
background: url("../img/common/ico_new.png") no-repeat 0 0;
}
#news #list_news a {
display: block;
color: #91130f;
}
#news #list_news a .thum {
position: relative;
padding-top: 100%;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#news #list_news a .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #91130f;
opacity: 0;
transition: all 0.4s;
}
#news #list_news a .date {
display: block;
margin-bottom: 10px;
color: #c3ba78;
}
#news #list_news a .detail {
margin-top: 10px;
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
color: #fff;
}
#news #list_news a:hover .thum::after {
opacity: .2;
}
#news #pager {
overflow: hidden;
}
#news #pager .pager_side {
float: left;
width: 30%;
}
#news #pager .pager_side a {
margin-top: 10px;
}
#news #pager .pager_center {
float: left;
width: 40%;
text-align: center;
}
#news #pager .pager_center > a {
margin-top: 10px;
}
#news #pager .pager_center ol {
letter-spacing: -.4em;
}
#news #pager .pager_center ol li {
display: inline-block;
width: 45px;
height: 51px;
background-repeat: no-repeat;
background-image: url("../img/common/bg_pager.png");
letter-spacing: normal;
}
#news #pager .pager_center ol li:first-child {
background-image: url("../img/common/bg_pager_first.png");
}
#news #pager .pager_center ol li:last-child {
width: 51px;
background-image: url("../img/common/bg_pager_last.png");
}
#news #pager .pager_center ol li a {
display: inline-block;
width: 26px;
height: 26px;
margin: 12px 0 0 7px;
color: #fff;
font-size: 16px;
font-size: 1.6rem;
line-height: 26px;
font-weight: normal;
transition: all 0.4s;
}
#news #pager .pager_center ol li a:hover {
color: #c3ba78;
}
#news #pager .pager_center ol li:last-child a {
margin-left: 0;
}
#news #pager .pager_center ol li.is-active a {
color: #c3ba78;
font-weight: bold;
}
#news .btn_back {
margin-bottom: 10px;
}
#news .btn_back a::after {
background: url("../img/common/btn_list01_on.png") no-repeat 0 100%;
}
#news .box_news {
margin-bottom: 40px;
}
#news .box_news::before {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_t.png");
vertical-align: bottom;
}
#news .box_news::after {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_b.png");
vertical-align: top;
}
#news .box_news .inner {
padding: 70px 120px;
background: url("../img/common/frame_m.png") repeat-y #000;
}
#news .box_news .inner .date {
display: block;
margin-bottom: 20px;
color: #c3ba78;
}
#news .box_news .inner .ttl {
margin-bottom: 60px;
background: #91130f;
color: #000;
font-size: 32px;
font-size: 3.2rem;
line-height: 1.7;
font-weight: normal;
}
#news .box_news .inner .detail {
padding-bottom: 70px;
margin-bottom: 70px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
#news .box_news .inner #news_share {
letter-spacing: -.4em;
}
#news .box_news .inner #news_share img {
vertical-align: middle;
}
#news .box_news .inner #news_share ul {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
#news .box_news .inner #news_share li {
position: relative;
display: inline-block;
width: 45px;
height: 51px;
background-repeat: no-repeat;
background-image: url("../img/common/bg_pager.png");
letter-spacing: normal;
}
#news .box_news .inner #news_share li:first-child {
background-image: url("../img/common/bg_pager_first.png");
}
#news .box_news .inner #news_share li:last-child {
width: 51px;
background-image: url("../img/common/bg_pager_last.png");
}
#news .box_news .inner #news_share li span {
display: inline-block;
width: 100%;
height: 100%;
}
#news .box_news .inner #news_share li span::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
transition: all 0.4s;
}
#news .box_news .inner #news_share li span::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.4s;
}
#news .box_news .inner #news_share li.tw span::before {
background: url("../img/common/btn_share_tw.png") no-repeat 60% 50%;
}
#news .box_news .inner #news_share li.tw span::after {
background: url("../img/common/btn_share_tw_on.png") no-repeat 60% 50%;
}
#news .box_news .inner #news_share li.fb span::before {
background: url("../img/common/btn_share_fb.png") no-repeat 60% 50%;
}
#news .box_news .inner #news_share li.fb span::after {
background: url("../img/common/btn_share_fb_on.png") no-repeat 60% 50%;
}
#news .box_news .inner #news_share li.hatebu span::before {
background: url("../img/common/btn_share_hatebu.png") no-repeat 50% 50%;
}
#news .box_news .inner #news_share li.hatebu span::after {
background: url("../img/common/btn_share_hatebu_on.png") no-repeat 50% 50%;
}
#news .box_news .inner #news_share li a {
position: absolute;
top: 12px;
left: 12px;
display: block;
width: 26px;
height: 26px;
font-size: 0;
text-indent: -9999px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
#news .box_news .inner #news_share li a:hover + span::before {
opacity: 0;
}
#news .box_news .inner #news_share li a:hover + span::after {
opacity: 1;
}
/* intro
##################################### */
#intro #main_inner {
position: relative;
padding-top: 0;
background-image: none,
none;
}
#intro #bg_set {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#intro #bg_set .bg_cut {
height: 100%;
background: url("../img/intro/bg_intro_cut.jpg") no-repeat 50% 0;
}
#intro #bg_set .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/intro/bg_intro.png") no-repeat 50% 0;
}
#intro #bg_set .bg_flower {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/intro/bg_intro_flower.png") no-repeat 50% 0;
}
/* onair
##################################### */
#onair #main_inner {
background-image: none, url("../img/common/bg_cor01.png");
}
#onair .box .inner {
margin-left: 160px;
}
/* story
##################################### */
#story #main_inner {
font-family: 'Amiri', "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
#story #list_story {
margin-bottom: 80px;
text-align: center;
letter-spacing: -.4em;
}
#story #list_story li {
display: inline-block;
letter-spacing: normal;
}
#story #list_story li a {
display: block;
box-sizing: border-box;
width: 140px;
padding-top: .2em;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #fff;
color: #fff;
transition: all 0.4s;
}
#story #list_story li a:hover {
background: #91130f;
border: 1px solid #91130f;
}
#story #list_story li:not(:first-child):not(:nth-child(6n+1)) {
margin-left: 24px;
}
#story #list_story li:nth-child(n+7) {
margin-top: 24px;
}
#story #list_story li.is-active a {
background: #91130f;
border: 1px solid #91130f;
}
#story .box_story .hl {
color: #91130f;
}
#story .box_story .ttl {
position: relative;
margin-bottom: 10px;
font-size: 112px;
font-size: 11.2rem;
line-height: 112px;
font-weight: normal;
text-align: center;
color: #4c0604;
}
#story .box_story .ttl span {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
font-size: 36px;
font-size: 3.6rem;
line-height: 112px;
font-weight: normal;
}
#story .box_story .img {
position: relative;
margin-bottom: 40px;
background: #000;
}
#story .box_story .img .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
opacity: .2;
}
#story .box_story .img ul {
overflow: hidden;
}
#story .box_story .img li {
float: left;
width: 192px;
background: #000;
cursor: pointer;
}
#story .box_story .img li img {
width: 100%;
opacity: .4;
transition: all 0.4s;
}
#story .box_story .img li.is-active::after {
opacity: .2;
}
#story .box_story .img li.is-active img {
opacity: 1;
}
#story .box_story .img .txt {
position: absolute;
top: 30%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 260px;
padding: 40px;
background: rgba(145, 19, 15, 0.6);
}
#story .box_story .keyperson {
min-height: 144px;
margin-bottom: 60px;
background: url("../img/story/img01.png") no-repeat 50% 50%;
letter-spacing: -.4em;
text-align: center;
}
#story .box_story .keyperson p {
display: inline-block;
padding-top: 40px;
letter-spacing: normal;
vertical-align: top;
}
#story .box_story .keyperson p span:first-child {
display: block;
}
#story .box_story .keyperson p span:first-child::after {
content: '';
display: block;
width: 40px;
height: 1px;
margin: 10px auto 20px;
background: #fff;
}
#story .box_story .keyperson .client {
padding-right: 150px;
}
#story .box_story .keyperson .target {
padding-left: 150px;
}
#story .staff::before {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_t.png");
vertical-align: bottom;
}
#story .staff::after {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_b.png");
vertical-align: top;
}
#story .staff ul {
padding: 30px;
background: url("../img/common/frame_m.png") repeat-y #000;
letter-spacing: -.4em;
text-align: center;
}
#story .staff ul li {
display: inline-block;
letter-spacing: normal;
}
#story .staff ul li:not(:first-child) {
margin-left: 30px;
}
/* chara
##################################### */
#chara #main_inner {
padding-bottom: 80px;
background-image: none, url("../img/common/bg_cor02.png");
}
#chara .ttl_page {
position: relative;
z-index: 2;
}
#cnav {
position: absolute;
top: 0;
left: 0;
margin-bottom: 80px;
z-index: 1;
}
#cnav ul {
margin-bottom: 30px;
letter-spacing: -.4em;
}
#cnav li {
display: inline-block;
letter-spacing: normal;
}
#cnav li a {
position: relative;
display: block;
}
#cnav li a::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 52px;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.4s;
}
#cnav li a#chara1::after {
background-image: url("../img/chara/btn_cnav01_on.png");
}
#cnav li a#chara2::after {
background-image: url("../img/chara/btn_cnav02_on.png");
}
#cnav li a#chara3::after {
background-image: url("../img/chara/btn_cnav03_on.png");
}
#cnav li a#chara4::after {
background-image: url("../img/chara/btn_cnav04_on.png");
}
#cnav li a#chara5::after {
background-image: url("../img/chara/btn_cnav05_on.png");
}
#cnav li a#chara6::after {
background-image: url("../img/chara/btn_cnav06_on.png");
}
#cnav li a#chara7::after {
background-image: url("../img/chara/btn_cnav07_on.png");
}
#cnav li a:hover::after {
opacity: 1;
}
#cnav li a.is-active::after {
opacity: 1;
}
#cnav #btn_prev {
display: inline-block;
margin-right: 30px;
}
#cnav #btn_prev a {
display: inline-block;
transition: all 0.4s;
}
#cnav #btn_prev a:hover {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
#cnav #btn_next {
display: inline-block;
}
#cnav #btn_next a {
display: inline-block;
transition: all 0.4s;
}
#cnav #btn_next a:hover {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.box_chara {
position: relative;
display: none;
text-align: right;
}
.box_chara::before {
content: url("../img/chara/bg_chara.png");
position: absolute;
top: -15px;
left: -35px;
}
.box_chara .inner {
position: absolute;
top: 210px;
left: 0;
}
.box_chara .img_line {
position: absolute;
top: -500px;
left: 150px;
opacity: 0;
transition: all .6s ease-out;
}
.box_chara .img_stand {
margin-right: -80px;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
transition: all .6s ease-out;
}
.box_chara.chara3 .img_stand {
margin-right: -150px;
}
.box_chara.chara5 .img_stand {
margin-top: 110px;
margin-bottom: 110px;
}
.box_chara .img_name {
margin-left: 5px;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
transition: all .6s ease-out;
}
.box_chara .img_cv {
margin-left: 30px;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
transition: all .3s .8s ease-out;
}
.box_chara .img_face {
opacity: 0;
transition: all .3s 1.5s ease-out;
}
.box_chara .box_txt {
margin-bottom: 90px;
text-align: left;
}
.box_chara .box_txt dl {
text-align: left;
}
.box_chara .box_txt dl dt {
margin-bottom: 50px;
}
.box_chara .box_txt dl dd {
width: 380px;
opacity: 0;
transition: all .3s 1.5s ease-out;
}
.box_chara.is-active .img_line {
opacity: 1;
}
.box_chara.is-active .img_stand {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.box_chara.is-active .img_name {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.box_chara.is-active .img_cv {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.box_chara.is-active .img_face {
opacity: 1;
}
.box_chara.is-active .box_txt dd {
opacity: 1;
}
/* staffcast
##################################### */
#staffcast .box .inner {
margin-left: 160px;
}
.list_staffcast li:not(:last-child) {
margin-bottom: 40px;
}
.list_staffcast li > p {
display: table-cell;
vertical-align: middle;
}
.list_staffcast li .part {
width: 20em;
padding-right: 40px;
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
text-align: right;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.7;
font-weight: normal;
}
#list_staff {
margin-bottom: 80px;
}
#list_staff li > p {
color: #91130f;
}
#list_cast li > p {
color: #000;
}
/* movie
##################################### */
#movie #list_movie {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#movie #list_movie li {
width: 280px;
margin-top: 60px;
margin-right: 60px;
}
#movie #list_movie li:nth-child(1), #movie #list_movie li:nth-child(4n) {
margin-right: 0;
}
#movie #list_movie li a .thum::after {
width: 68px;
height: 68px;
}
#movie #list_movie li:first-child {
width: 680px;
margin: 0 auto;
}
#movie #list_movie li:first-child a .thum::after {
width: 100px;
height: 100px;
}
#movie #list_movie a {
display: block;
color: #91130f;
}
#movie #list_movie a .thum {
position: relative;
margin-bottom: 20px;
background: #000;
}
#movie #list_movie a .thum img {
width: 100%;
opacity: .6;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#movie #list_movie a .thum::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #91130f;
opacity: 0;
transition: all 0.4s;
}
#movie #list_movie a .thum::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: url("../img/movie/ico_play.png") no-repeat;
background-size: contain;
}
#movie #list_movie a:hover .thum::before {
opacity: .2;
}
#movie.modal #box_movie {
position: relative;
width: 900px;
height: 540px;
}
#movie.modal #box_movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* music
##################################### */
#music .box .inner {
margin-left: 140px;
}
#music .box_music {
margin-bottom: 40px;
overflow: hidden;
}
#music .box_music .thum {
float: left;
}
#music .box_music dt span {
display: inline-block;
padding: 0 .3em;
margin-bottom: 20px;
background: #91130f;
color: #000;
}
#music .box_music:first-child dt, #music .box_music:first-child dd:not(.thum) {
margin-left: 420px;
}
#music .box_music:first-child dt span {
font-size: 24px;
font-size: 2.4rem;
line-height: 1.7;
font-weight: normal;
}
#music .box_music:first-child .name {
margin-bottom: 10px;
}
#music .box_music:not(:first-child) dt, #music .box_music:not(:first-child) dd:not(.thum) {
margin-left: 320px;
}
#music .box_music:not(:first-child) .thum {
width: 280px;
}
#music .box_music:not(:first-child) .thum img {
width: 100%;
}
#music .profile, #music .comment {
line-height: 2;
}
#music .profile .ttl, #music .comment .ttl {
display: inline-block;
padding: 0 .3em;
margin-bottom: 20px;
background: #91130f;
color: #000;
}
#music .profile {
margin-bottom: 15px;
}
#music .comment {
width: 820px;
margin: 0 auto 25px;
}
#music .comment::before {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/music/frame_t.png");
vertical-align: bottom;
}
#music .comment::after {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/music/frame_b.png");
vertical-align: top;
}
#music .comment .inner {
margin: 0;
padding: 25px 30px;
background: url("../img/music/frame_m.png") repeat-y;
}
#music .box_on {
margin-top: 80px;
}
#music .box_on .box_music dt span {
background: #000;
color: #91130f;
}
#music .box_on .profile .ttl, #music .box_on .comment .ttl {
background: #000;
color: #91130f;
}
/* package
##################################### */
#package #list_package {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 50px;
}
#package #list_package li {
width: 400px;
margin-top: 80px;
}
#package #list_package li:nth-child(even) {
margin-left: 60px;
}
#package #list_package li:nth-child(1), #package #list_package li:nth-child(2) {
margin-top: 0;
}
#package #list_package a {
display: block;
color: #91130f;
}
#package #list_package a .thum {
position: relative;
padding-top: 134%;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#package #list_package a .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #91130f;
opacity: 0;
transition: all 0.4s;
}
#package #list_package a .date {
display: block;
margin-bottom: 10px;
color: #c3ba78;
}
#package #list_package a .detail {
margin-top: 10px;
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
color: #fff;
}
#package #list_package a:hover .thum::after {
opacity: .2;
}
#package .box_package {
margin-bottom: 40px;
overflow: hidden;
}
#package .box_package .thum {
float: left;
}
#package .box_package dt span {
display: inline-block;
padding: 0 .3em;
margin-bottom: 20px;
background: #91130f;
color: #000;
}
#package .box_package:first-child dt, #package .box_package:first-child dd:not(.thum) {
margin-left: 420px;
}
#package .box_package:first-child dt span {
font-size: 24px;
font-size: 2.4rem;
line-height: 1.7;
font-weight: normal;
}
#package .box_package:first-child .name {
margin-bottom: 10px;
}
#package .box_package:not(:first-child) dt, #package .box_package:not(:first-child) dd:not(.thum) {
margin-left: 320px;
}
#package .box_package:not(:first-child) .thum {
width: 280px;
}
#package .box_package:not(:first-child) .thum img {
width: 100%;
}
#package .box01, #package .box02 {
line-height: 2;
}
#package .box01 .ttl, #package .box02 .ttl {
display: inline-block;
padding: 0 .3em;
margin-bottom: 20px;
background: #91130f;
color: #000;
}
#package .box02 {
margin-left: auto;
margin-right: auto;
}
#package .box02::before {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_t.png");
vertical-align: bottom;
}
#package .box02::after {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_b.png");
vertical-align: top;
}
#package .box02 .inner {
margin: 0;
padding: 25px 30px;
background: url("../img/common/frame_m.png") repeat-y;
}
/* special
##################################### */
#special #list_special {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#special #list_special li {
width: 280px;
margin-top: 60px;
}
#special #list_special li:not(:nth-child(3n)) {
margin-right: 60px;
}
#special #list_special li:nth-child(1), #special #list_special li:nth-child(2), #special #list_special li:nth-child(3) {
margin-top: 0;
}
#special #list_special li.new .thum::before {
content: '';
position: absolute;
bottom: -40px;
right: 0;
width: 34px;
height: 17px;
background: url("../img/common/ico_new.png") no-repeat 0 0;
}
#special #list_special a {
display: block;
color: #91130f;
}
#special #list_special a .thum {
position: relative;
padding-top: 100%;
margin-bottom: 20px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#special #list_special a .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #91130f;
opacity: 0;
transition: all 0.4s;
}
#special #list_special a .date {
display: block;
margin-bottom: 10px;
color: #c3ba78;
}
#special #list_special a .detail {
margin-top: 10px;
font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Hiragino Sans', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
color: #fff;
}
#special #list_special a:hover .thum::after {
opacity: .2;
}
#special #pager {
overflow: hidden;
}
#special #pager .pager_side {
float: left;
width: 30%;
}
#special #pager .pager_side a {
margin-top: 10px;
}
#special #pager .pager_center {
float: left;
width: 40%;
text-align: center;
}
#special #pager .pager_center > a {
margin-top: 10px;
}
#special #pager .pager_center ol {
letter-spacing: -.4em;
}
#special #pager .pager_center ol li {
display: inline-block;
width: 45px;
height: 51px;
background-repeat: no-repeat;
background-image: url("../img/common/bg_pager.png");
letter-spacing: normal;
}
#special #pager .pager_center ol li:first-child {
background-image: url("../img/common/bg_pager_first.png");
}
#special #pager .pager_center ol li:last-child {
width: 51px;
background-image: url("../img/common/bg_pager_last.png");
}
#special #pager .pager_center ol li a {
display: inline-block;
width: 26px;
height: 26px;
margin: 12px 0 0 7px;
color: #fff;
font-size: 16px;
font-size: 1.6rem;
line-height: 26px;
font-weight: normal;
transition: all 0.4s;
}
#special #pager .pager_center ol li a:hover {
color: #c3ba78;
}
#special #pager .pager_center ol li:last-child a {
margin-left: 0;
}
#special #pager .pager_center ol li.is-active a {
color: #c3ba78;
font-weight: bold;
}
#special .btn_back {
margin-bottom: 10px;
}
#special .btn_back a::after {
background: url("../img/common/btn_list01_on.png") no-repeat 0 100%;
}
#special .box_special {
margin-bottom: 40px;
}
#special .box_special::before {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_t.png");
vertical-align: bottom;
}
#special .box_special::after {
content: '';
display: inline-block;
width: 100%;
height: 5px;
background: url("../img/common/frame_b.png");
vertical-align: top;
}
#special .box_special .inner {
padding: 70px 120px;
background: url("../img/common/frame_m.png") repeat-y #000;
}
#special .box_special .inner .date {
display: block;
margin-bottom: 20px;
color: #c3ba78;
}
#special .box_special .inner .ttl {
margin-bottom: 60px;
background: #91130f;
color: #000;
font-size: 32px;
font-size: 3.2rem;
line-height: 1.7;
font-weight: normal;
}
#special .box_special .inner .detail {
padding-bottom: 70px;
margin-bottom: 70px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#special .box_special .inner #special_share {
letter-spacing: -.4em;
}
#special .box_special .inner #special_share img {
vertical-align: middle;
}
#special .box_special .inner #special_share ul {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
#special .box_special .inner #special_share li {
position: relative;
display: inline-block;
width: 45px;
height: 51px;
background-repeat: no-repeat;
background-image: url("../img/common/bg_pager.png");
letter-spacing: normal;
}
#special .box_special .inner #special_share li:first-child {
background-image: url("../img/common/bg_pager_first.png");
}
#special .box_special .inner #special_share li:last-child {
width: 51px;
background-image: url("../img/common/bg_pager_last.png");
}
#special .box_special .inner #special_share li span {
display: inline-block;
width: 100%;
height: 100%;
}
#special .box_special .inner #special_share li span::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
transition: all 0.4s;
}
#special .box_special .inner #special_share li span::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.4s;
}
#special .box_special .inner #special_share li.tw span::before {
background: url("../img/common/btn_share_tw.png") no-repeat 60% 50%;
}
#special .box_special .inner #special_share li.tw span::after {
background: url("../img/common/btn_share_tw_on.png") no-repeat 60% 50%;
}
#special .box_special .inner #special_share li.fb span::before {
background: url("../img/common/btn_share_fb.png") no-repeat 60% 50%;
}
#special .box_special .inner #special_share li.fb span::after {
background: url("../img/common/btn_share_fb_on.png") no-repeat 60% 50%;
}
#special .box_special .inner #special_share li.hatebu span::before {
background: url("../img/common/btn_share_hatebu.png") no-repeat 50% 50%;
}
#special .box_special .inner #special_share li.hatebu span::after {
background: url("../img/common/btn_share_hatebu_on.png") no-repeat 50% 50%;
}
#special .box_special .inner #special_share li a {
position: absolute;
top: 12px;
left: 12px;
display: block;
width: 26px;
height: 26px;
font-size: 0;
text-indent: -9999px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
#special .box_special .inner #special_share li a:hover + span::before {
opacity: 0;
}
#special .box_special .inner #special_share li a:hover + span::after {
opacity: 1;
}
/***********************************/
@-webkit-keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.floatcontents {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 500;
opacity:0;
}
.floatcontents.open {
-webkit-animation: open 0.8s ease-in forwards;
-moz-animation: open 0.8s ease-in forwards;
-o-animation: open 0.8s ease-in forwards;
animation: open 0.8s ease-in forwards;
}
.floatcontents .wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.floatcontents .close {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
right: 10px;
}
.floatcontents .close:before, .floatcontents .close:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
background: #FFF;
width: 100%;
height: 1px;
}
.floatcontents .close:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.floatcontents .close:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.floatcontents .image {
position: absolute;
left: 50%;
height: 90vh;
width: 680px;
margin-left: -340px;
text-align: center;
top: 5vh;
}
.floatcontents .image img {
width: auto;
height: 100%;
max-width: 100%;
}