は、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);
}
}
.img_fade, #header #logo a, #footer .bnr a {
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.img_fade:hover, #header #logo a:hover, #footer .bnr a:hover {
opacity: .6;
}
/* structure
##################################### */
body.page {
overflow-y: scroll;
}
#stage {
position: relative;
width: 100%;
min-width: 1240px;
}
#bg_set {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
min-width: 1240px;
min-height: 680px;
}
#bg_set .bg_visual {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/common/bg03.jpg") no-repeat 50% 0;
background-size: cover;
}
#bg_set .bg_pat {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/common/bg01.png") repeat rgba(0, 0, 0, 0.4);
}
#header {
position: fixed;
top: 20px;
left: 20px;
width: 100%;
min-width: 1240px;
z-index: 100;
}
body#index #header {
top: auto;
bottom: 0;
left: 0;
padding-bottom: 40px;
background: url("../img/common/bg_header.png") repeat-x 0 100%;
}
body#index #header::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
display: block;
width: 1px;
height: 85px;
background: #fff;
overflow: hidden;
z-index: 1;
}
body#index #header .anchor {
margin-bottom: 10px;
text-align: center;
}
body#index #header .anchor a {
color: #fff;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
body#index #header .anchor a:hover {
color: #9d76ee;
}
body#index #header i {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 1px;
height: 85px;
overflow: hidden;
z-index: 1;
}
body#index #header i::after {
content: '';
position: absolute;
top: -40px;
left: 0;
width: 1px;
height: 40px;
background: white;
}
body#index #header.scroll .btn_scroll {
display: inherit;
}
body#index #header.scroll .btn_ptop {
display: none;
}
body#index #header.scroll i::after {
-webkit-animation: anchorDown 2s ease-out infinite;
animation: anchorDown 2s ease-out infinite;
}
body#index #header.ptop .btn_scroll {
display: none;
}
body#index #header.ptop .btn_ptop {
display: inherit;
}
body#index #header.ptop i::after {
-webkit-animation: anchorUp 2s ease-out infinite;
animation: anchorUp 2s ease-out infinite;
}
@-webkit-keyframes anchorDown {
0% {
top: -40px;
}
30% {
top: 85px;
}
100% {
top: 85px;
}
}
@keyframes anchorDown {
0% {
top: -40px;
}
30% {
top: 85px;
}
100% {
top: 85px;
}
}
@-webkit-keyframes anchorUp {
0% {
top: 85px;
}
30% {
top: -40px;
}
100% {
top: -40px;
}
}
@keyframes anchorUp {
0% {
top: 85px;
}
30% {
top: -40px;
}
100% {
top: -40px;
}
}
#gnav {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1160px;
margin: 0 auto;
padding: 0 7px;
background: url("../img/common/bg_gnav_l.png") no-repeat 0 0, url("../img/common/bg_gnav_r.png") no-repeat 100% 0;
background-color: rgba(0, 0, 0, 0.4);
letter-spacing: -.4em;
}
#gnav .inner {
background: url("../img/common/bg_gnav_m.png") repeat-x 0 0;
}
#gnav ul {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
text-align: center;
}
#gnav ul li {
position: relative;
display: inline-block;
height: 45px;
line-height: 45px;
letter-spacing: normal;
}
#gnav ul li:not(:last-child) {
margin-right: 65px;
}
#gnav ul li a {
position: relative;
display: block;
color: #fff;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#gnav ul li a::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 0;
height: 4px;
background: #9d76ee;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#gnav ul li.cs {
opacity: .2;
}
#gnav ul li.cs a {
cursor: default;
}
#gnav ul li.blank::before {
content: url("../img/common/ico_win.png");
position: absolute;
top: -28px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#gnav ul li:not(.cs) a:hover, #gnav ul li.is-active a {
color: #9d76ee;
}
#gnav ul li:not(.cs) a:hover::after, #gnav ul li.is-active a::after {
width: 100%;
}
#main {
position: relative;
}
.sec {
padding: 140px 0 70px;
}
.sec .sec_inner {
width: 840px;
margin: 0 auto;
}
.sec.active .ttl_page::before, .sec.active .ttl_page::after {
width: 50%;
}
.sec.active .ttl_page span {
opacity: 1;
}
body#index .sec {
padding: 80px 0;
background: rgba(0, 0, 0, 0.4);
}
body#index .sec:last-child {
padding-bottom: 160px;
}
body#index .sec .sec_inner {
width: 1000px;
margin: 0 auto;
}
.ttl_page {
position: relative;
height: 85px;
margin-bottom: 70px;
text-align: center;
font-size: 88px;
font-size: 8.8rem;
line-height: 1;
font-weight: normal;
}
.ttl_page::before, .ttl_page::after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
background: url("../img/common/bg_ttl.png") repeat-x;
background-size: auto 100%;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.ttl_page::before {
left: 0;
}
.ttl_page::after {
right: 0;
}
.ttl_page span {
position: relative;
top: -11px;
display: inline-block;
height: 96px;
z-index: 1;
opacity: 0;
-webkit-transition: all .5s .4s ease-out;
-o-transition: all .5s .4s ease-out;
transition: all .5s .4s ease-out;
}
.ttl_page span::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100%;
height: 4px;
background: #fff;
}
.ttl_sub {
padding: 12px 8px 6px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.4);
line-height: 1;
}
.ttl_sub span {
position: relative;
}
.ttl_sub span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
}
.ttl_sub_sub h3 {
font-size: 3.2rem;
font-weight: normal;
line-height: 1.2;
}
.ttl_sub_sub h3 span {
text-decoration: underline;
}
.ttl_sub_sub p {
font-size: 2rem;
}
.col2 {
overflow: hidden;
}
.col2 > div {
float: left;
width: 480px;
}
.col2 > div:not(:last-child) {
margin-right: 40px;
}
#footer {
position: relative;
padding: 80px 0;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
#footer .bnr {
width: 550px;
margin: 0 auto 70px;
letter-spacing: -.4em;
}
#footer .bnr li {
display: inline-block;
letter-spacing: normal;
}
#footer .bnr li:not(:last-child) {
margin-right: 40px;
}
#copyright {
margin-top: 50px;
line-height: 4;
opacity: .4;
}
.share {
position: fixed;
bottom: 125px;
right: 40px;
width: 32px;
z-index: 99;
}
.share h2 {
display: inline-block;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
line-height: 32px;
}
.share h2 span {
padding: 5px 3px 5px 1px;
background: rgba(0, 0, 0, 0.8);
}
.share hr {
width: 1px;
height: 40px;
margin: 10px auto 15px;
background: #fff;
}
.share li:not(:last-child) {
margin-bottom: 15px;
}
.share li a {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 6px 0;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #fff;
border-radius: 50%;
line-height: 1;
text-align: center;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.share li a:hover {
border-color: #9d76ee;
background: #9d76ee;
}
.ytp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ytp video {
position: absolute;
right: 50%;
bottom: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.ytp::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/common/bg01.png");
}
/* parts
##################################### */
.btn01 {
display: inline-block;
padding: .7em 2em;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #fff;
border-radius: 30px;
line-height: 1 !important;
color: #fff;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn01 img {
margin: 0 0 1px 12px;
vertical-align: baseline;
}
.btn01:hover {
background: #9d76ee;
border-color: #9d76ee;
}
.box {
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.box .ttl {
display: inline-block;
padding: .4em .2em .2em;
background: #fff;
color: #000;
line-height: 1 !important;
}
.boxSuper {
-webkit-transform: translate(0, 50px);
-ms-transform: translate(0, 50px);
transform: translate(0, 50px);
opacity: 0;
}
.box_topic {
padding: 70px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.box_topic .heading {
margin-bottom: 40px;
}
.box_topic .heading::after {
content: '';
display: block;
height: 2px;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.box_topic .heading .date {
display: inline-block;
padding: .2em .2em .1em;
margin-bottom: 10px;
background: #9d76ee;
line-height: 1;
}
.box_topic .detail a:not([class*="btn"]) {
color: #9d76ee;
word-wrap: break-word;
}
.box_topic .detail a:not([class*="btn"]):hover {
text-decoration: underline;
}
.box_topic .detail .box_movie {
position: relative;
width: 600px;
height: 337px;
}
.box_topic .detail .box_movie iframe, .box_topic .detail .box_movie video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#index #widget {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
#index #widget .inner {
height: 380px;
}
#index #widget p {
margin-top: 15px;
}
#index_main {
position: relative;
height: 100vh;
min-height: 680px;
background: url("../img/index/mainvisual.png") no-repeat 50% 0;
background-size: auto 100%;
}
#index_main #logo {
position: absolute;
bottom: 15%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
height: 20%;
}
#index_main #logo img {
height: 100%;
}
#index_main .copy01, #index_main .copy02 {
position: absolute;
top: 0;
height: 100%;
/*mix-blend-mode: difference;*/
}
#index_main .copy01 img {
height: 80%; /* def 100*/
}
#index_main .copy02 img {
height: 100%;
}
#index_main .copy01 {
right: 5em; /*def 0*/
top: 2em !important; /*add191213*/
}
#index_main .copy02 {
left: 3em; /*def 0*/
}
#index_news ol {
margin-bottom: 40px;
}
#index_news li:not(:last-child) {
margin-bottom: 20px;
}
#index_news li a {
position: relative;
display: block;
padding: 10px 72px 10px 10px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#index_news li a::before {
content: url("../img/common/ico_arrow01.png");
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#index_news li a:hover {
background: rgba(63, 40, 82, 0.6);
color: #9d76ee;
}
#index_news li .date {
display: table-cell;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 60px;
height: 60px;
padding: 10px;
background: #fff;
color: #000;
word-break: break-all;
vertical-align: middle;
text-align: center;
line-height: 1.2;
}
#index_news li .ttl {
display: table-cell;
height: 60px;
padding-left: 10px;
vertical-align: middle;
line-height: 1.5;
}
#index_news li .ttl span {
display: block;
max-height: 46px;
overflow: hidden;
}
#news .ttl_page {
margin-bottom: 0;
}
#comment p {
position: relative;
line-height: 2;
}
#introduction p {
position: relative;
line-height: 2;
white-space: pre;
}
#introduction p:not(:last-child) {
margin-bottom: 30px;
}
#introduction p::before, #introduction p::after {
content: attr(data-text1) "\a" attr(data-text2) "\a" attr(data-text3) "\a" attr(data-text4);
width: 100%;
height: 100%;
position: absolute;
top: 0;
color: rgba(255, 255, 255, 0.6);
}
#introduction p::before {
left: -5px;
clip: rect(0, 9999px, 0, 0);
-webkit-animation: yuragiMsizeFrame 7s linear infinite;
animation: yuragiMsizeFrame 7s linear infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#introduction p::after {
left: 5px;
clip: rect(0, 9999px, 0, 0);
-webkit-animation: yuragiMsizeFrame2 7s linear infinite;
animation: yuragiMsizeFrame2 7s linear infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#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%;
}
#movie li a {
position: relative;
display: block;
height: 340px;
text-align: center;
color: #fff;
overflow: hidden;
}
#movie li a::before, #movie li a::after {
content: '';
position: absolute;
top: 130px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 80px;
height: 80px;
z-index: 2;
}
#movie li a::before {
background: url("../img/common/ico_play01_bg.png") no-repeat;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#movie li a::after {
background: url("../img/common/ico_play01.png") no-repeat;
}
#movie li a:hover::before {
-webkit-transform: translate(-50%, 0) rotateZ(179deg);
-ms-transform: translate(-50%, 0) rotate(179deg);
transform: translate(-50%, 0) rotateZ(179deg);
}
#movie li a:hover p::before {
opacity: .4;
}
#movie li img {
width: 100%;
}
#movie li p {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 260px;
z-index: 1;
}
#movie li p::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/common/bg02.png");
z-index: -1;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#music p, #music dd {
line-height: 2.2;
}
#aboutghost {
padding-top: 150px;
}
#aboutghost .subttl span {
text-decoration: underline;
}
#goods .goods-list-item {
display: inline-block;
vertical-align: top;
width: 268px;
/*height: 520px;*/ /*560*/
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 20px;
margin: 0 30px 30px 0;
}
#goods .goods-list-item:nth-child(3),
#goods .goods-list-item:nth-child(6),
#goods .goods-list-item:nth-child(9),
#goods .goods-list-item:nth-child(12) {
margin-right: 0;
}
#goods .goods-list-item.goods-cd-height {
height: 580px;
}
#goods .goods-list-item img {
width: 100%;
}
#goods .goods-list-item h3,
#goods .goods-list-item p {
text-align: center;
}
#goods .goods-list-item p.att {
font-size: 14px;
}
#goods .goods-list-link p {
font-size: 16px;
}
/* add 20190426 - EVENT PAGE - */
body#event .sec {
padding: 80px 0;
}
body#event .sec.sec-event {
padding: 140px 0 80px;
}
.event-kv {
background: #00092a;
}
.event-kv img {
display: block;
margin: 0 auto;
width: 100%; /* 縦65% */
}
.event-detail dl dt,
.event-detail dl dd,
.event-detail p {
line-height: 2.2;
font-size: 16px;
font-size: 1.6rem;
}
.event-detail dl dd span,
.event-detail .event-check-ttl {
font-size: 20px;
font-size: 2rem;
font-weight: bold;
}
.event-about {
width: 500px;
margin: 0 auto;
}
.event-about dl {
display: table;
}
.event-about dl dt,
.event-about dl dd {
display: table-cell;
}
.event-about dl dt {
width: 130px;
}
.event-send {
border: 1px solid;
padding: 2em;
text-align: center;
}
.event-detail .event-cs {
border: 1px solid;
padding: 2em;
text-align: center;
font-size: 30px;
font-size: 3rem;
}
/* add 20190517 - EVENT PAGE continued - */
body#event #goods .event-about {
width: 100%;
}
.event-goods-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.event-goods-list li {
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(0, 0, 0, 0.6);
padding: 1.5em;
margin-bottom: 25px;
}
.event-goods-list li img {
vertical-align: bottom;
border: none;
max-width: 100%;
height: auto;
}