は、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);
}
}
/* structure
##################################### */
img {
width: 100%;
}
#stage {
width: 100%;
}
#bg_set {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/common/bg01.jpg") no-repeat;
background-size: 100% auto;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 100;
}
#line_header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 3.125%;
margin: 0;
background: url("../img/common/line_header.png") no-repeat 50% 0;
background-size: 100% auto;
border: none;
z-index: 100;
}
#logo {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 31.5625%;
padding: 3% 0 0;
z-index: 100;
}
#logo a {
display: block;
padding-top: 50.49505%;
background: url("../img/common/logo02.png") no-repeat;
background-size: contain;
text-indent: -9999px;
font-size: 0;
}
#releaseday {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 47.1875%;
padding: 21% 0 0;
z-index: 100;
}
#header .inner {
display: none;
position: relative;
padding-bottom: 7%;
opacity: 0;
}
#header .btn_tw, #header .share {
width: 62.5%;
margin: 0 auto 7%;
}
#header .btn_tw .inner, #header .share .inner {
position: relative;
padding: 5% 0;
}
#header .btn_tw .inner {
padding: 5% 25%;
}
#header .share ul {
letter-spacing: -.4em;
}
#header .share li {
display: inline-block;
width: 12%;
}
#header .share li:not(:last-child) {
margin-right: 10%;
}
#gnav_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(255, 255, 255, 0.9);
z-index: -1;
}
#gnav {
padding-top: 36%;
margin-bottom: 12%;
}
#gnav li {
position: relative;
margin-bottom: 5%;
background: url("../img/common/line_gnav.png") no-repeat 50% 50%;
background-size: 7px 28px;
line-height: 28px;
}
#gnav li a {
position: relative;
display: block;
color: #fff;
font-weight: bold;
text-shadow: #11b2ed 0px 3px, #11b2ed 0px 2px, #11b2ed 0px 1px, #11b2ed 0px 0px, #11b2ed 1px 3px, #11b2ed 1px 2px, #11b2ed 1px 1px, #11b2ed 1px 0px, #11b2ed 2px 3px, #11b2ed 2px 2px, #11b2ed 2px 1px, #11b2ed 2px 0px, #11b2ed -1px 3px, #11b2ed -1px 2px, #11b2ed -1px 1px, #11b2ed -1px 0px, #11b2ed -2px 3px, #11b2ed -2px 2px, #11b2ed -2px 1px, #11b2ed -2px 0px, #11b2ed 1px -2px, #11b2ed 1px -1px, #11b2ed 2px -2px, #11b2ed 2px -1px, #11b2ed -1px -2px, #11b2ed -1px -1px, #11b2ed -2px -2px, #11b2ed -2px -1px;
opacity: 0;
}
#gnav li a span {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
#gnav li a span:nth-child(odd) {
padding-right: 20px;
text-align: right;
-webkit-transform: translate(-30px, 0);
-ms-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
#gnav li a span:nth-child(even) {
padding-left: 18px;
text-align: left;
color: #000;
line-height: 28px;
text-shadow: #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px,
#fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px,
#fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px,
#fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px;
-webkit-transform: translate(30px, 0);
-ms-transform: translate(30px, 0);
transform: translate(30px, 0);
}
#gnav li.cs a {
opacity: .3;
cursor: default;
}
.btn_gnav {
position: fixed;
top: 0;
right: 2%;
color: #11b2ed;
z-index: 100;
}
.btn_gnav .inner {
position: relative;
width: 16vw;
padding-top: 115.68627%;
background: url("../img/common/btn_gnav.png");
background-size: contain !important;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn_gnav .inner::after {
content: 'MENU';
position: absolute;
bottom: 28%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
font-size: 3vw;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn_gnav .lines {
position: absolute;
right: 50%;
bottom: 62%;
width: 40%;
height: 21%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
}
.btn_gnav i {
display: block;
position: absolute;
width: 100%;
height: 2px;
background: #11b2ed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn_gnav i.first {
top: 0;
}
.btn_gnav i.second {
top: 50%;
}
.btn_gnav i.third {
top: 100%;
}
body.on .btn_gnav .inner {
background: url("../img/common/btn_gnav_on.png");
}
body.on .btn_gnav .inner::after {
content: 'CLOSE';
color: #fff;
}
body.on .btn_gnav i {
background: #fff;
}
body.on .btn_gnav .first {
top: 50% !important;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
body.on .btn_gnav .second {
opacity: 0 !important;
}
body.on .btn_gnav .third {
top: 50% !important;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#main {
position: relative;
padding: 36% 0 15%;
}
#main_inner {
position: relative;
padding: 7% 0;
}
#main_inner::before, #main_inner::after {
content: '';
position: absolute;
left: 0;
width: 100%;
padding-top: 13.4375%;
background-size: 100% auto !important;
z-index: 2;
}
#main_inner::before {
top: 0;
background: url("../img/common/frame02_t.png") no-repeat 50% 0;
}
#main_inner::after {
bottom: 0;
background: url("../img/common/frame02_b.png") no-repeat 50% 0;
}
#main_inner > .inner01 {
padding: 16% 5%;
background: url("../img/common/bg_main_t.png") no-repeat 50% 0, url("../img/common/bg_main_b.png") no-repeat 50% 100%, url("../img/common/bg_main_m.jpg") repeat-y 50% 0;
background-size: 100% auto;
z-index: 1;
}
.ttl_page {
margin-bottom: 6%;
color: #fff;
text-align: center;
font-size: 24px;
font-size: 2.4rem;
line-height: 1;
font-weight: bold;
text-shadow: #11b2ed 0px 4px, #11b2ed 0px 3px, #11b2ed 0px 2px, #11b2ed 0px 1px, #11b2ed 0px 0px, #11b2ed 1px 4px, #11b2ed 1px 3px, #11b2ed 1px 2px, #11b2ed 1px 1px, #11b2ed 1px 0px, #11b2ed 2px 4px, #11b2ed 2px 3px, #11b2ed 2px 2px, #11b2ed 2px 1px, #11b2ed 2px 0px, #11b2ed -1px 4px, #11b2ed -1px 3px, #11b2ed -1px 2px, #11b2ed -1px 1px, #11b2ed -1px 0px, #11b2ed -2px 4px, #11b2ed -2px 3px, #11b2ed -2px 2px, #11b2ed -2px 1px, #11b2ed -2px 0px, #11b2ed 1px -2px, #11b2ed 1px -1px, #11b2ed 2px -2px, #11b2ed 2px -1px, #11b2ed -1px -2px, #11b2ed -1px -1px, #11b2ed -2px -2px, #11b2ed -2px -1px;
}
.ttl_page div {
position: relative;
height: 51px;
background: url("../img/common/bg_ttl01.png") no-repeat 50% 2px;
background-size: auto 49px;
}
.ttl_page div span {
position: absolute;
bottom: 4px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
background: #11b2ed;
line-height: 1;
text-shadow: none;
}
.ttl_sub {
margin-bottom: 8%;
text-align: center;
color: #11b2ed;
font-size: 20px;
font-size: 2rem;
line-height: 1;
font-weight: bold;
}
.ttl_sub::before, .ttl_sub::after {
content: '';
display: inline-block;
width: 59px;
height: 40px;
vertical-align: top;
background-size: 59px 19px !important;
}
.ttl_sub::before {
background: url("../img/common/bg_ttl02_l.png") no-repeat 0 22px;
}
.ttl_sub::after {
background: url("../img/common/bg_ttl02_r.png") no-repeat 100% 22px;
}
.ttl_sub div {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
max-width: 320px;
padding: 0 8px;
background: url("../img/common/bg_ttl02_m.png") repeat-x 50% 22px;
background-size: 320px 19px;
}
.ttl_sub div span {
display: inline-block;
margin-top: 25px;
font-size: 8px;
font-size: 0.8rem;
line-height: 1;
font-weight: normal;
}
#footer {
position: relative;
padding: 0 5% 10%;
background: #fff;
text-align: center;
}
#footer .bnr {
margin-bottom: 10%;
}
#footer .bnr ul {
letter-spacing: -.4em;
}
#footer .bnr ul:not(:last-child) {
margin-bottom: 5%;
}
#footer .bnr li {
display: inline-block;
width: 48%;
letter-spacing: normal;
}
#footer .bnr li:nth-child(even) {
margin-left: 4%;
}
#footer .bnr li a {
display: block;
border: 1px solid #ccc;
}
#footer .attention {
margin-bottom: 10%;
color: #888;
}
#fnav {
position: relative;
margin-bottom: 10%;
z-index: 1;
}
#fnav ul {
letter-spacing: -.4em;
}
#fnav li {
display: inline-block;
letter-spacing: normal;
line-height: 40px;
}
#fnav li:not(:last-child)::after {
content: '/';
margin: 0 5px;
}
#fnav li a {
color: #000;
}
#copyright {
color: #888;
}
#btn_ptop {
position: relative;
display: inline-block;
width: 35.4%;
margin-top: -13vw;
margin-bottom: 1%;
}
/* parts
##################################### */
.box_movie, .list_movie li > div {
position: relative;
display: block;
width: 100%;
padding-top: 56.25%;
}
.box_movie iframe, .list_movie li > div iframe, .box_movie video, .list_movie li > div video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.frame01 {
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 2px 28px 4px;
background: url("../img/common/frame01_l.png") no-repeat 0 0, url("../img/common/frame01_l.png") no-repeat 0 100%, url("../img/common/frame01_r.png") no-repeat 100% 0, url("../img/common/frame01_r.png") no-repeat 100% 100%;
background-size: 28px 5px;
z-index: -1;
}
.frame01::before {
content: '';
display: block;
height: 100%;
border: 1px solid #493110;
border-style: solid none solid;
}
.list01 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list01 li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 48%;
}
.list01 li:nth-child(odd) {
margin-right: 4%;
}
.list01 li:nth-child(n+3) {
margin-top: 6%;
}
.list01 a, .list01 div, .list01 dl {
position: relative;
display: block;
width: 100%;
padding-bottom: 12px;
}
.list01 a::after, .list01 div::after, .list01 dl::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
border: 1px solid #8f0000;
border-width: 1px 0 2px;
}
.list01 .thum {
position: relative;
margin-bottom: 12px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px 1px;
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px 1px;
background: #fff;
overflow: hidden;
}
.list01 .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../../img/common/thum_frame.png") no-repeat 50% 50%;
background-size: contain;
}
.list01 .thum span {
display: block;
width: 100%;
padding-top: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.list01 .date {
display: inline-block;
height: 20px;
margin-bottom: 10px;
padding: 0 7px;
background: url("../../img/common/bg_label01_l.png") no-repeat 0 0, url("../../img/common/bg_label01_r.png") no-repeat 100% 0;
background-size: 7px 20px;
}
.list01 .date span {
display: block;
height: 20px;
padding: 0 2px;
background: url("../../img/common/bg_label01_m.png") repeat-x;
background-size: 3px 20px;
line-height: 20px;
font-weight: bold;
color: #fff;
text-align: center;
}
.list01 .ttl {
display: block;
color: #000;
}
#pager {
margin-top: 10%;
letter-spacing: -.4em;
text-align: center;
}
#pager > * {
display: inline-block;
letter-spacing: normal;
vertical-align: middle;
}
#pager ol {
margin: 0 20px;
letter-spacing: -.4em;
}
#pager li {
display: inline-block;
letter-spacing: normal;
margin-top: 2%;
margin-bottom: 2%;
}
#pager li:not(:last-child) {
margin-right: 15px;
}
#pager li a {
position: relative;
display: block;
padding: .6em .7em .4em;
border: 1px solid #11b2ed;
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
font-weight: bold;
color: #11b2ed;
z-index: 1;
}
#pager li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 0;
background: rgba(17, 178, 237, 0.3);
z-index: -1;
}
#pager li.is-active a::before {
height: 100%;
}
#pager .btn_arrow {
display: inline-block;
width: 34px;
margin: 2% 0;
}
#pager .btn_back {
position: relative;
margin: 0 20px;
padding: .6em .7em .4em;
border: 1px solid #11b2ed;
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
font-weight: bold;
color: #11b2ed;
z-index: 1;
}
.box_topic .heading {
padding-bottom: 4px;
margin-bottom: 20px;
background: url("../../img/common/line01.png") repeat-x 0 100%;
font-weight: bold;
}
.box_topic .date {
display: inline-block;
margin-bottom: 4px;
padding: 0 6px;
background: url("../../img/common/bg_label02_l.png") no-repeat 0 0, url("../../img/common/bg_label02_r.png") no-repeat 100% 0;
background-size: 6px 20px;
}
.box_topic .date span {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 20px;
padding: 0 .5em;
background: url("../../img/common/bg_label02_m.png") repeat-x;
background-size: 45px 20px;
font-size: 12px;
font-size: 1.2rem;
line-height: 20px;
font-weight: bold;
color: #fff;
text-align: center;
}
.box_topic h3 {
padding: 10px 0;
}
.box_topic .detail a {
color: #11b2ed;
text-decoration: underline;
}
.box_topic .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin: 20px 2px 0;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
overflow: hidden;
}
.box_topic .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
.list_tab {
padding: 0 5%;
margin-bottom: 8%;
letter-spacing: -.4em;
text-align: center;
}
.list_tab li {
display: inline-block;
width: 30%;
padding-bottom: 15px;
background-repeat: no-repeat;
background-position: 50% 100%;
letter-spacing: normal;
}
.list_tab li:not(:last-child) {
margin-right: 5%;
}
.list_tab li.is-active {
background-image: url("../img/common/ico_arrow01.png");
background-size: 24px auto;
}
.list_tab li.is-active a {
color: #fff;
background: url("../img/common/btn01_l_on.gif") no-repeat 0 0, url("../img/common/btn01_r_on.gif") no-repeat 100% 0, url("../img/common/btn01_m_on.gif") repeat-x 0 0;
}
.list_tab a {
display: block;
background: url("../img/common/btn01_l.gif") no-repeat 0 0, url("../img/common/btn01_r.gif") no-repeat 100% 0, url("../img/common/btn01_m.gif") repeat-x 0 0;
background-size: auto 100% !important;
color: #11b2ed;
font-size: 12px;
font-size: 1.2rem;
line-height: 40px;
font-weight: bold;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* index
===================================== */
#index #bg_set {
background-position: 50% 100%;
}
#index #logo, #index #releaseday {
display: none;
}
#index.on #logo, #index.on #releaseday {
display: block;
}
#index #main {
padding: 0 0 15%;
}
#index .btn_set a {
display: block;
}
#index .btn_set a:not(:last-child) {
margin-bottom: 5%;
}
#index .bnr_fix {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
}
#index #footer {
padding: 0 5% 22%;
}
#index #modal_bnr {
display: none;
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
/*padding: 20px 10%;*/
padding: 30px 2%;
text-align: center;
z-index: 500;
opacity: 0;
}
#index #modal_bnr .bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
z-index: -1;
cursor: pointer;
}
#index #modal_bnr .btn_close {
position: absolute;
top: 10px;
right: 5%;
width: 15%;
cursor: pointer;
}
#index_main {
position: relative;
margin-bottom: 10%;
}
#index_main #mv_status {
margin-top: -2%;
}
#index_main #mv_status div {
height: 4px;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#index_main #mv_status div:not(:last-child) {
margin-right: 40px;
}
#index_main #mv_status div span {
display: block;
width: 0;
height: 100%;
background: #eee;
}
#index .bnr {
margin-top: 4%;
padding: 0 5%;
letter-spacing: -.4em;
}
#index .bnr a {
display: inline-block;
width: 48%;
letter-spacing: normal;
}
#index .bnr a:nth-child(even) {
margin-left: 4%;
}
#index .bnr a:nth-child(n+3) {
margin-top: 4%;
}
#index_main .inner {
margin-top: 4%;
}
#index_main .btn_tv {
position: fixed;
top: 180px;
left: -24px;
z-index: 2;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#index_main .btn_tv:hover {
left: 0 !important;
}
#index .links {
margin-bottom: 10%;
}
#index .links ul {
padding: 0 5%;
letter-spacing: -.4em;
}
#index .links ul:not(:last-child) {
margin-bottom: 5%;
}
#index .links li {
display: inline-block;
width: 48%;
letter-spacing: normal;
}
#index .links li:nth-child(even) {
margin-left: 4%;
}
#index .links li:nth-child(n+3) {
margin-top: 4%;
}
.mainvisual {
position: relative;
padding-bottom: 2.5%;
}
.mainvisual > img:last-child {
position: absolute;
bottom: 0;
left: 0;
}
.mv01 .logo {
position: absolute;
bottom: 3%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 53.75%;
}
.mv01 .copy01 {
position: absolute;
top: 15%;
right: 0;
width: 20.78%;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
.mv01 .copy02 {
position: absolute;
top: 15%;
left: 0;
width: 12.5%;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
.mv01 .bright {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mv01 .bright .b01 {
position: absolute;
left: 50.2%;
top: 18.7%;
width: 6%;
mix-blend-mode: screen;
}
.mv01 .bright .b01::before {
content: '';
display: block;
padding-top: 100%;
border-radius: 50%;
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.6) inset, 0 0 20px 10px rgba(166, 95, 151, 0.3);
filter:blur(12px);
-webkit-animation: hikariFrame01 8s infinite ease-out;
animation: hikariFrame01 8s infinite ease-out;
}
@-webkit-keyframes hikariFrame01 {
0% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
25% {
background-color: rgba(243, 191, 228, 0.6);
box-shadow: 0 0 10px 2px rgba(185, 53, 157, 0.8) inset, 0 0 40px 10px rgba(236, 140, 216, 0.8);
}
35% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
100% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
}
@keyframes hikariFrame01 {
0% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
25% {
background-color: rgba(243, 191, 228, 0.6);
box-shadow: 0 0 10px 2px rgba(185, 53, 157, 0.8) inset, 0 0 40px 10px rgba(236, 140, 216, 0.8);
}
35% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
100% {
background-color: rgba(243, 153, 228, 0.6);
box-shadow: 0 0 10px 0 rgba(185, 53, 157, 0.8) inset, 0 0 20px 5px rgba(166, 95, 151, 0.3);
}
}
.mv01 .bright .b02 {
position: absolute;
left: 38.4%;
top: 11%;
width: 30%;
mix-blend-mode: screen;
}
.mv01 .bright .b02::before {
content: '';
display: block;
padding-top: 100%;
border-radius: 50%;
background-color: rgba(243, 153, 228, 0.8);
-webkit-animation: hikariFrame02 8s infinite ease-out;
animation: hikariFrame02 8s infinite ease-out;
}
@-webkit-keyframes hikariFrame02 {
0%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
27%{
background-color: rgba(243, 153, 228, 0.2);
filter: brightness(1.5) blur(80px);
}
37%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
100%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
}
@keyframes hikariFrame02 {
0%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
27%{
background-color: rgba(243, 153, 228, 0.2);
filter: brightness(1.5) blur(80px);
}
37%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
100%{
background-color: rgba(243, 153, 228, 0);
filter: brightness(1) blur(20px);
}
}
.mv02 .logo {
position: absolute;
bottom: 5.6%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 46.75%;
}
.mv02 .copy01 {
position: absolute;
top: 4%;
right: 46%;
width: 7.48%;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
.mv03 .logo {
position: absolute;
bottom: 5.6%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 46.75%;
}
#index_movie {
padding: 0 5%;
margin-bottom: 10%;
}
#index_news {
position: relative;
padding: 1% 0 2.5%;
margin-bottom: 10%;
}
#index_news::before, #index_news::after {
content: '';
position: absolute;
left: 0;
width: 100%;
padding-top: 3.125%;
background: url("../img/common/line_header.png") no-repeat 50% 0;
background-size: 100% auto;
z-index: 1;
}
#index_news::before {
top: 0;
}
#index_news::after {
bottom: 0;
}
#index_news > .inner {
background: rgba(255, 255, 255, 0.9);
padding: 3% 5% 8%;
overflow: hidden;
}
#index_news li:not(:last-child) {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#index_news li .date {
color: #000;
font-weight: bold;
}
/*news*/
#news #main_inner .share {
margin-top: 10%;
font-weight: bold;
text-align: center;
}
#news #main_inner .share h4 {
margin-bottom: 10px;
color: #7d4209;
font-weight: bold;
}
#news #main_inner .share ul {
letter-spacing: -.4em;
}
#news #main_inner .share li {
display: inline-block;
width: 10%;
letter-spacing: normal;
}
#news #main_inner .share li:not(:first-child) {
margin-left: 4%;
}
/* story
===================================== */
#story #main_inner > .inner01 {
padding: 16% 0;
}
#story .boxSuper {
display: none;
}
#story .txt {
padding: 0 5%;
font-family: 'Amiri', "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
-webkit-font-feature-settings: 'palt';
font-feature-settings: 'palt';
}
.box_intro {
margin: 8% 0;
}
.box_intro .img {
padding: 0 10%;
}
.box_intro .txt {
margin-bottom: 8%;
}
/* character
===================================== */
#character #main_inner > .inner01 {
padding: 16% 0;
}
#character .list_chara {
padding: 0 5%;
}
#character .list_chara:not(:last-child) {
margin-bottom: 4%;
}
#character .list_chara::after {
content: '';
clear: both;
display: block;
}
#character .list_chara li {
width: 48%;
text-align: center;
}
#character .list_chara li:nth-child(odd) {
float: left;
}
#character .list_chara li:nth-child(even) {
float: right;
}
#character .list_chara li:nth-child(n+3) {
margin-top: 4%;
}
#character .list_chara .thum {
position: relative;
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px 1px;
background: #fff;
overflow: hidden;
}
#character .list_chara .thum::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../../img/common/thum_frame.png") no-repeat 50% 50%;
background-size: contain;
}
#character .list_chara .name {
position: relative;
margin-top: -10%;
}
#character .box_chara .box_txt {
color: #480e00;
}
#character .box_chara .box_txt dl dt {
margin-bottom: 5px;
padding: 0 5%;
color: #bf0000;
font-weight: bold;
}
#character .box_chara .box_txt dl dt .en {
display: block;
margin-top: 8px;
font-size: 28px;
font-size: 2.8rem;
line-height: 1;
font-weight: bold;
}
#character .box_chara .box_txt dl dd:not(:last-child) {
margin-bottom: 20px;
}
#character .box_chara .box_txt dl dd.cv {
display: inline-block;
margin-left: 5%;
color: #fff;
}
#character .box_chara .box_txt dl dd.cv::before, #character .box_chara .box_txt dl dd.cv::after {
content: '';
display: inline-block;
width: 7px;
height: 24px;
vertical-align: top;
background-size: 100% 100%!important;
}
#character .box_chara .box_txt dl dd.cv::before {
background: url("../../img/common/bg_label03_l.png") no-repeat 0 0;
}
#character .box_chara .box_txt dl dd.cv::after {
background: url("../../img/common/bg_label03_r.png") no-repeat 0 0;
}
#character .box_chara .box_txt dl dd.cv p {
display: inline-block;
height: 21px;
padding: 3px 5px 0;
background: url("../../img/common/bg_label03_m.png") repeat-x;
background-size: auto 100%;
text-align: center;
vertical-align: top;
}
#character .box_chara .box_txt dl dd.cv span {
font-size: 10px;
font-size: 1.0rem;
line-height: 1.7;
font-weight: normal;
}
#character .box_chara .box_txt dl dd.img img {
opacity: 0;
-webkit-transform: translate(0, 20px);
-ms-transform: translate(0, 20px);
transform: translate(0, 20px);
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#character .box_chara.on .box_txt dl dd.img img {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#character .box_chara .box_txt dl dd.txt {
padding: 0 5%;
}
#character .box_chara .box_txt dl dd.img_stand {
overflow: hidden;
}
#character .btn_close {
margin: 0 20%;
}
#character #pager {
margin-top: 10%;
letter-spacing: -.4em;
text-align: center;
}
#character #pager a {
display: inline-block;
width: 19%;
color: #480e00;
letter-spacing: normal;
vertical-align: top;
word-wrap: break-word;
}
#character #pager a img {
width: 79%;
}
#character #pager a .name {
margin-top: 5px;
}
/* staffcast
===================================== */
#staffcast .list_wrapper:not(:last-child) {
margin-bottom: 8%;
}
#staffcast .list_wrapper#cast {
overflow: hidden;
}
#staffcast .list_wrapper#cast .list_staffcast:not(:last-child) {
margin-bottom: 40px;
}
#staffcast .list_wrapper#yell {
margin-top: 50px;
}
#staffcast #main_inner .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin-left: 2px;
margin-right: 2px;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
overflow: hidden;
}
#staffcast #main_inner .box:not(:first-child) {
margin-top: 30px;
}
#staffcast #main_inner .box .img {
margin-bottom: 10px;
}
#staffcast #main_inner .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
.list_staffcast li:not(:last-child) {
margin-bottom: 20px;
}
.list_staffcast .part {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
font-weight: bold;
color: #11b2ed;
}
.list_staffcast .name {
font-size: 24px;
font-size: 2.4rem;
line-height: 1;
font-weight: bold;
}
.list_staffcast .etc {
display: block;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.7;
font-weight: bold;
}
.list_staffcast .mb_s {
margin-bottom: 15px !important;
}
.list_staffcast .lp_s {
letter-spacing: -2px;
}
/* ticket
===================================== */
#ticket #main_inner > .inner01 {
padding: 16% 0;
}
/* movie
===================================== */
.list_movie li {
text-align: center;
}
.list_movie li:not(:last-child) {
margin-bottom: 8%;
}
.list_movie .ttl {
margin-top: 8px;
}
/* special
===================================== */
#special.keyvisual .ttl_sub {
margin-bottom: 20px;
}
/*music, bddvd*/
#music #main_inner .box, #bddvd #main_inner .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin-left: 2px;
margin-right: 2px;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
overflow: hidden;
}
#music #main_inner .box:not(:last-child), #bddvd #main_inner .box:not(:last-child) {
margin-bottom: 30px;
}
#music #main_inner .box .img, #bddvd #main_inner .box .img {
margin-bottom: 10px;
}
#music #main_inner .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
#music .box_music + .ttl_sub, #music .box + .ttl_sub, #bddvd .box_bddvd + .ttl_sub, #bddvd .box + .ttl_sub {
margin-top: 16%;
}
#music .list_tab li {
width: 45%;
}
.box_music:not(:last-child), .box_bddvd:not(:last-child) {
margin-bottom: 30px;
}
.box_music .img, .box_bddvd .img {
margin-bottom: 20px;
}
.box_bddvd .img > *:not(:last-child) {
margin-bottom: 20px;
}
.box_music .heading, .box_bddvd .heading {
padding-bottom: 4px;
margin-bottom: 20px;
background: url("../../img/common/line01.png") repeat-x 0 100%;
font-weight: bold;
}
.box_music .heading .name, .box_bddvd .name {
display: inline-block;
margin-bottom: 4px;
padding: 0 6px;
background: url("../../img/common/bg_label02_l.png") no-repeat 0 0, url("../../img/common/bg_label02_r.png") no-repeat 100% 0;
background-size: 6px 20px;
}
.box_music .heading .name span, .box_bddvd .name span {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 20px;
padding: 0 .5em;
background: url("../../img/common/bg_label02_m.png") repeat-x;
background-size: 45px 20px;
font-size: 12px;
font-size: 1.2rem;
line-height: 20px;
font-weight: bold;
color: #fff;
text-align: center;
}
.box_music .heading .name + h4, .box_bddvd .name + h4 {
padding-top: 10px;
}
.box_music .heading h4, .box_bddvd .heading h4 {
padding-bottom: 10px;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
font-weight: bold;
}
#bddvd .list01 li {
width: 100%;
margin-right: 0!important;
}
#bddvd .list01 li:nth-child(n+2) {
margin-top: 14%;
}
#bddvd .list01 dt {
margin-bottom: 12px;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1.3;
}
#bddvd .list01 dd:not(:last-child) {
margin-bottom: 20px;
}
#bddvd .list01 .thum::after {
background: url("../img/common/thum_frame.png") no-repeat 50% 50%;
background-size: contain;
}
#bddvd .list01 .ttl {
color: #00adec;
font-size: large;
}
#bddvd .list01 .ttl span {
font-size: 10px;
font-size: 1.0rem;
}
/* special
===================================== */
/*furikaeri*/
#special.furikaeri #bg_set {
background: url("../img/special/furikaeri/bg01.jpg") no-repeat 50% 100%;
background-size: 100% auto;
}
#special.furikaeri #main {
padding-top: 0;
}
#special.furikaeri #main h2 {
padding: 0 10%;
}
#special.furikaeri #main .attention {
padding: 40px 5%;
}
#special.furikaeri #main .attention .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1 !important;
}
#special.furikaeri .ttl_sub {
margin-bottom: 20px;
}
#special.furikaeri .notes {
color: #bf0000;
}
#special.furikaeri .btn {
display: inline-block;
padding: 0 15px;
background: url("../img/special/furikaeri/btn_l.gif") no-repeat 0 0, url("../img/special/furikaeri/btn_r.gif") no-repeat 100% 0, url("../img/special/furikaeri/btn_m.gif") repeat-x 0 0;
background-size: auto 100%;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
line-height: 32px;
font-weight: bold;
}
#special.furikaeri .mainvisual .txt {
padding: 14% 0;
background: url("../../img/special/furikaeri/frame_t.jpg") no-repeat 0 0, url("../../img/special/furikaeri/frame_b.jpg") no-repeat 0 100%, url("../../img/special/furikaeri/frame_m.jpg") repeat-y 0 0;
background-size: 100% auto;
}
#special.furikaeri .mainvisual .txt p span {
font-size: 20px;
font-size: 2rem;
line-height: 1.3;
font-weight: bold;
color: #bf0000;
}
#special.furikaeri .sec {
padding-top: 40px;
}
#special.furikaeri .ttl_elem {
margin-bottom: 10px;
color: #ffff00;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
font-weight: bold;
text-shadow: #11b2ed 0px 2px, #11b2ed 0px 1px, #11b2ed 0px 0px, #11b2ed 1px 2px, #11b2ed 1px 1px, #11b2ed 1px 0px, #11b2ed 2px 2px, #11b2ed 2px 1px, #11b2ed 2px 0px, #11b2ed -1px 2px, #11b2ed -1px 1px, #11b2ed -1px 0px, #11b2ed -2px 2px, #11b2ed -2px 1px, #11b2ed -2px 0px, #11b2ed 0px -2px, #11b2ed 0px -1px, #11b2ed 1px -2px, #11b2ed 1px -1px, #11b2ed 2px -2px, #11b2ed 2px -1px, #11b2ed -1px -2px, #11b2ed -1px -1px, #11b2ed -2px -2px, #11b2ed -2px -1px;
}
#special.furikaeri .list_theater {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-weight: normal;
}
#special.furikaeri .list_theater th, #special.furikaeri .list_theater td {
padding: 5px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#special.furikaeri .list_theater th {
background: #11b2ed;
color: #fff;
}
#special.furikaeri .list_theater th:nth-child(1) {
width: 50px;
}
#special.furikaeri .list_theater th:nth-child(3) {
width: 80px;
}
#special.furikaeri .list_theater td:nth-child(2) {
position: relative;
padding-right: 22px;
text-align: left;
}
#special.furikaeri .list_theater td:nth-child(2)::after {
content: '';
position: absolute;
top: 0;
right: 6px;
width: 6px;
height: 100%;
background: url("../../img/special/furikaeri/ico01.png") no-repeat 0 9px;
background-size: 100% auto;
}
#special.furikaeri .list_theater a {
color: #11b2ed;
text-decoration: underline;
}
#special.furikaeri .application {
position: relative;
margin-top: 40px;
background-size: 2px, 100% auto !important;
color: #fff;
}
#special.furikaeri .application .inner {
position: relative;
padding-bottom: 30px;
}
#special.furikaeri .application .inner::before {
content: '';
display: block;
width: 1px;
height: 32px;
margin: 0 auto 20px;
background: #fff;
}
#special.furikaeri .application .term {
margin-bottom: 20px;
}
#special.furikaeri .application .term::after {
content: '';
display: block;
width: 71%;
height: 1px;
margin: 15px auto 0;
background: rgba(255, 255, 255, 0.6);
}
#special.furikaeri .application .term span {
color: #ffd400;
}
#special.furikaeri .result {
padding: 40px 0;
font-size: 10px;
font-size: 1rem;
line-height: 1.7;
font-weight: bold;
}
#special.furikaeri.form #main {
padding-top: 22%;
}
#special.furikaeri.form .sec {
padding-top: 14%;
}
#special.furikaeri .form {
position: relative;
padding: 40px 5%;
background: url("../../img/common/bg01.png");
background-size: 2px;
color: #fff;
}
#special.furikaeri .form .ttl {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
font-weight: bold;
color: #ffd400;
}
#special.furikaeri form {
text-align: left;
}
#special.furikaeri form > div:not(:last-child) {
margin-bottom: 10px;
}
#special.furikaeri form > div:last-child {
margin-top: 20px;
letter-spacing: -.4em;
}
#special.furikaeri form input[type="text"], #special.furikaeri form select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 24px;
padding: 0 0 0 5px;
border: 1px solid #ccc;
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
font-weight: bold;
}
#special.furikaeri form input[type="text"] {
width: 100px;
padding-right: 10px;
}
#special.furikaeri form select {
width: 100%;
}
#special.furikaeri form input[type="checkbox"] {
display: none;
}
#special.furikaeri form input[type="checkbox"]:checked + i {
background: #11b2ed;
}
#special.furikaeri form input[type="reset"], #special.furikaeri form input[type="submit"] {
display: inline-block;
width: 46%;
background-size: auto 100% !important;
border: none;
border-radius: 0;
outline: none;
font-size: 12px;
font-size: 1.2rem;
line-height: 32px;
font-weight: bold;
letter-spacing: normal;
}
#special.furikaeri form input[type="reset"] {
margin-right: 8%;
background: url("../img/special/furikaeri/btn_l_on.gif") no-repeat 0 0, url("../img/special/furikaeri/btn_r_on.gif") no-repeat 100% 0, url("../img/special/furikaeri/btn_m_on.gif") repeat-x 0 0;
color: #11b2ed;
}
#special.furikaeri form input[type="submit"] {
background: url("../img/special/furikaeri/btn_l.gif") no-repeat 0 0, url("../img/special/furikaeri/btn_r.gif") no-repeat 100% 0, url("../img/special/furikaeri/btn_m.gif") repeat-x 0 0;
color: #fff;
}
#special.furikaeri form label.checkbox {
position: relative;
padding-left: 15px;
}
#special.furikaeri form label.checkbox:not(:last-child) {
margin-right: 10px;
}
#special.furikaeri form label.checkbox i {
content: '';
position: absolute;
top: 2px;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
border-radius: 20px;
-webkit-box-shadow: #fff 0 0 0 2px inset;
box-shadow: #fff 0 0 0 2px inset;
}
#special.furikaeri .label {
color: #11b2ed;
}
#special.furikaeri #part1 .application {
background: url("../../img/common/bg01.png"), url("../img/special/furikaeri/bg02.jpg") no-repeat 50% 0;
}
#special.furikaeri #part2 .application {
background: url("../../img/common/bg01.png"), url("../img/special/furikaeri/bg03.jpg") no-repeat 50% 0;
}
/*kansei newyear*/
#special.kansei #main .box, #special.newyear #main .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin-left: 2px;
margin-right: 2px;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
overflow: hidden;
}
#special.kansei #main .box:not(:last-child), #special.newyear #main .box:not(:last-child) {
margin-bottom: 30px;
}
#special.kansei #main .ttl, #special.newyear #main .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
#special.kansei .box_kansei:not(:last-child) {
margin-bottom: 30px;
}
#special.kansei .box_kansei .img {
margin-bottom: 10px;
}
#special.newyear #main_inner > .inner01 {
padding-left: 0;
padding-right: 0;
}
#special.newyear .thum {
width: 90%;
}
#special.newyear .btn {
display: inline-block;
padding: 0 15px;
background: url("../img/special/furikaeri/btn_l.gif") no-repeat 0 0, url("../img/special/furikaeri/btn_r.gif") no-repeat 100% 0, url("../img/special/furikaeri/btn_m.gif") repeat-x 0 0;
background-size: auto 100%;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
line-height: 32px;
font-weight: bold;
}
#special.newyear #main .box {
margin-left: 5%;
margin-right: 5%;
}
/* novelty
===================================== */
#novelty #main_inner > .inner01 {
padding: 16% 0;
}
#novelty .list_tab li {
width: 47.5%;
}
#novelty .lead {
margin-bottom: 8%;
font-family: 'Amiri', "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-weight: bold;
color: #bf0000;
}
#novelty .inner01 > div p {
padding: 0 5%;
}
#novelty .inner01 > div:not(:last-child) {
margin-bottom: 6%;
}
#novelty #main_inner .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin-left: 5%;
margin-right: 5%;
margin-top: 30px;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
word-break: break-all;
overflow: hidden;
}
#novelty #main_inner .box p {
padding: 0;
}
#novelty #main_inner .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
/* tie up
===================================== */
.list_tieup li {
text-align: center;
}
.list_tieup li:nth-child(n+2) {
margin-top: 8%;
}
.list_tieup a {
color: #000;
}
.list_tieup a img {
margin-bottom: 8px;
}
/* goods
===================================== */
#goods .list01 li {
width: 100%;
margin-right: 0!important;
}
#goods .list01 li:nth-child(n+2) {
margin-top: 14%;
}
#goods .list01 .thum::after {
background: url("../img/common/thum_frame.png") no-repeat 50% 50%;
background-size: contain;
}
#goods .list01 .ttl {
color: #00adec;
}
/* greeting
===================================== */
#greeting .list_tab {
padding: 0;
}
#greeting .list_tab li {
width: 47.5%;
}
#greeting .lead {
font-family: 'Amiri', "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
color: #bf0000;
}
#greeting .box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4%;
margin-left: 2px;
margin-right: 2px;
background: url("../../img/common/bg04.jpg");
background-size: 100px;
border: 1px solid #b3a18d;
-webkit-box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
box-shadow: #8f0000 0 0 0 2px, #8f0000 0 0 0 1px inset, #580000 0 0 14px 0 inset;
overflow: hidden;
}
#greeting .ttl {
display: inline-block;
padding: 5px 5px 4px;
background: #11b2ed;
color: #fff;
line-height: 1;
}
#greeting .box dt {
color: #00adec;
}
#greeting .box dd:not(:last-child) {
margin-bottom: 10px;
}
span.sold{
color: red;
}
span.plus {
font-size: 12px;
color: #000;
/* line-height: 49%; */
}
p.priceb {
font-weight: 700;
text-align: left;
color: #00adec;
}
p.price {
text-align: left;
}
p.ss {
font-size: 40%;
}
.ss14 {
font-size: 60%;
}
.boxevent {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 2%;
margin-right: 2px;
background: url(../../img/common/bg04.jpg);
background-size: 100px;
border: 1px solid #b3a18d;
overflow: hidden;
line-height: 140%;
width: 90%;
}