@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2&family=Noto+Serif+JP:wght@200..900&display=swap');



.breadcrumb{
display: none;
}



/* ==============================================
setting
============================================== */

#nikusoba20th *{
font-family: 'Noto Serif JP',Meiryo,sans-serif;
font-weight:200;
font-size: 16px;
line-height: 32px;
letter-spacing: 1px;
color:#FFF;
margin:0;
padding:0;
box-sizing: border-box;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th *{
font-size: 14px;
line-height: 24px;
letter-spacing: 0.5px;
}
}
#nikusoba20th img{
width: 100%;
height: auto;
border:none;
vertical-align:top;
}
#nikusoba20th ul{
list-style:none;
}
#nikusoba20th ul:after{
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#nikusoba20th a{
text-decoration:none;
transition: 0.4s ease-out;
}
a:hover{
opacity: 0.5;
}



#nikusoba20th .sp{
display:none!important;
}
#nikusoba20th .pc{
display:block;
}
@media screen and (max-width:767px) {
#nikusoba20th .sp{
display:block!important;
}
#nikusoba20th .pc{
display:none;
}
}



/* ==============================================
#nikusoba20th
============================================== */

#nikusoba20th{
overflow: hidden;
position: relative;
background: #000;
z-index: 1;
min-width: 1400px;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th{
min-width: 100%;
}
}
#nikusoba20th::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_bg.png");
background-size: 80px 80px;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.04;
z-index: -1;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th::before{
background: url("../img/lp/nikusoba20th/nsb20_bg.png");
background-size: 40px 40px;
opacity: 0.08;
}
}
#nikusoba20th::after{
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 800px;
background: linear-gradient(180deg, rgba(210,160,60,0.5) 0%, rgba(210,160,60,0.0) 100%);
z-index: -1;
}
@media screen and (max-width:767px) {
#nikusoba20th::after{
height: 400px;
}
}



/* ==============================================
#nikusoba20th #frame
============================================== */

#nikusoba20th #frame{
}
#nikusoba20th #frame::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-l.png") no-repeat;
background-size: 50px 50px;
position: absolute;
width: 50px;
height: 50px;
top:20px;
left: 20px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame::before{
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-l.png") no-repeat;
background-size: 25px 25px;
width: 25px;
height: 25px;
top:10px;
left: 10px;
}
}
#nikusoba20th #frame::after{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-r.png") no-repeat;
background-size: 50px 50px;
position: absolute;
width: 50px;
height: 50px;
top:20px;
right: 20px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame::after{
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-r.png") no-repeat;
background-size: 25px 25px;
width: 25px;
height: 25px;
top:10px;
right: 10px;
}
}
#nikusoba20th #frame .frame-x{
}
#nikusoba20th #frame .frame-x::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_x.png") no-repeat;
background-size: 100% 8px;
position: absolute;
width: calc(100% - 140px);
height: 8px;
top:20px;
left: 70px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-x::before{
background: url("../img/lp/nikusoba20th/nsb20_frm_x.png") no-repeat;
background-size: 100% 4px;
width: calc(100% - 70px);
height: 4px;
top:10px;
left: 35px;
}
}
#nikusoba20th #frame .frame-x::after{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_x.png") no-repeat;
background-size: 100% 8px;
position: absolute;
width: calc(100% - 140px);
height: 8px;
bottom:20px;
left: 70px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-x::after{
background: url("../img/lp/nikusoba20th/nsb20_frm_x.png") no-repeat;
background-size: 100% 4px;
width: calc(100% - 70px);
height: 4px;
bottom:10px;
left: 35px;
}
}
#nikusoba20th #frame .frame-y{
}
#nikusoba20th #frame .frame-y::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_y-l.png") repeat-y;
background-size: 8px 8px;
position: absolute;
width: 8px;
height: calc(100% - 140px);
top:70px;
left: 20px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-y::before{
background: url("../img/lp/nikusoba20th/nsb20_frm_y-l.png") repeat-y;
background-size: 4px 4px;
width: 4px;
height: calc(100% - 70px);
top:35px;
left: 10px;
}
}
#nikusoba20th #frame .frame-y::after{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_y-r.png") repeat-y;
background-size: 8px 8px;
position: absolute;
width: 8px;
height: calc(100% - 140px);
top:70px;
right: 20px;
z-index: 4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-y::after{
background: url("../img/lp/nikusoba20th/nsb20_frm_y-r.png") repeat-y;
background-size: 4px 4px;
width: 4px;
height: calc(100% - 70px);
top:35px;
right: 10px;
}
}
#nikusoba20th #frame .frame-z{
}
#nikusoba20th #frame .frame-z::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-l.png") no-repeat;
background-size: 50px 50px;
position: absolute;
width: 50px;
height: 50px;
bottom:20px;
left: 20px;
z-index: 4;
transform: scale(1, -1);
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-z::before{
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-l.png") no-repeat;
background-size: 25px 25px;
width: 25px;
height: 25px;
bottom:10px;
left: 10px;
}
}
#nikusoba20th #frame .frame-z::after{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-r.png") no-repeat;
background-size: 50px 50px;
position: absolute;
width: 50px;
height: 50px;
bottom:20px;
right: 20px;
z-index: 4;
transform: scale(1, -1);
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #frame .frame-z::after{
background: url("../img/lp/nikusoba20th/nsb20_frm_icn-r.png") no-repeat;
background-size: 25px 25px;
width: 25px;
height: 25px;
bottom:10px;
right: 10px;
}
}



/* ==============================================
#nikusoba20th #hero
============================================== */

#nikusoba20th #hero{
}
#nikusoba20th #hero .inner{
}
#nikusoba20th #hero .inner h1{
position: absolute;
top:88px;
left: 0;
right: 0;
max-width: 560px;
margin: auto;
z-index: 2;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner h1{
top:34px;
width: calc(100% - 68px);
}
}
#nikusoba20th #hero .inner h1 img{
position: absolute;
top:0;
left: 0;
filter: drop-shadow(0 4px 8px rgba(0,0,0,1.0));
}



#nikusoba20th #hero .inner #bowl{
position: absolute;
top:88px;
left: 0;
right: 0;
max-width: 560px;
margin: auto;
z-index: 2;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner #bowl{
top:34px;
width: calc(100% - 68px);
}
}
#nikusoba20th #hero .inner #bowl span{
display: block;
position: absolute;
top:0;
left: 0;
}
#nikusoba20th #hero .inner #bowl img{
filter: drop-shadow(0 4px 8px rgba(0,0,0,1.0));
transform: rotate(0deg);
animation: bowl 30.0s linear 0s infinite normal forwards;
}
@keyframes bowl {
0% {transform: rotate(0deg);}
25% {transform: rotate(90deg);}
50% {transform: rotate(180deg);}
75% {transform: rotate(270deg);}
100% {transform: rotate(360deg);}
}



#nikusoba20th #hero .inner #cloud{
position: absolute;
top:88px;
left: 0;
right: 0;
max-width: 560px;
margin: auto;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner #cloud{
top:34px;
width: calc(100% - 68px);
padding-top: calc(100% - 68px);
}
}
#nikusoba20th #hero .inner #cloud img{
position: absolute;
top:0;
left: 0;
right: 0;
margin: auto;
width: auto;
transition: 0.4s ease-out;
}
#nikusoba20th #hero .inner #cloud .cloud-01{
height: 24px;
top: 110px;
left: -680px;
z-index: 3;
animation: cloud-01 8.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-01 {
0% {right: 0;}
50% {right: 80px;}
100% {right: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-02{
height: 60px;
top: 200px;
left: -1080px;
z-index: 1;
opacity: 0.2;
animation: cloud-02 12.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-02 {
0% {right: 0;}
50% {right: -80px;}
100% {right: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-03{
height: 24px;
top: 340px;
left: -620px;
z-index: 3;
animation: cloud-03 10.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-03 {
0% {right: 0;}
50% {right: 80px;}
100% {right: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-04{
height: 60px;
top: 400px;
left: -600px;
z-index: 3;
animation: cloud-04 8.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-04 {
0% {right: 0;}
50% {right: -80px;}
100% {right: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-05{
height: 24px;
top: 480px;
left: -1080px;
z-index: 1;
opacity: 0.4;
animation: cloud-05 12.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-05 {
0% {right: 0;}
50% {right: 80px;}
100% {right: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-06{
height: 60px;
top: 100px;
right: -520px;
z-index: 1;
opacity: 0.4;
animation: cloud-06 12.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-06 {
0% {left: 0;}
50% {left: 80px;}
100% {left: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-07{
height: 24px;
top: 290px;
right: -560px;
z-index: 3;
animation: cloud-07 10.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-07 {
0% {left: 0;}
50% {left: -80px;}
100% {left: 0;}
}
#nikusoba20th #hero .inner #cloud .cloud-08{
height: 24px;
top: 480px;
right: -880px;
z-index: 3;
animation: cloud-08 8.0s ease-in-out 0s infinite normal both;
}
@keyframes cloud-08 {
0% {left: 0;}
50% {left: -80px;}
100% {left: 0;}
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner #cloud .cloud-01{
height: 12px;
top: 0;
left: -64%;
}
#nikusoba20th #hero .inner #cloud .cloud-02{
height: 30px;
top: 12%;
left: -100%;
}
#nikusoba20th #hero .inner #cloud .cloud-03{
height: 12px;
top: 72%;
left: -96%;
}
#nikusoba20th #hero .inner #cloud .cloud-04{
height: 30px;
top: 84%;
left: -84%;
}
#nikusoba20th #hero .inner #cloud .cloud-05{
height: 12px;
top: 100%;
left: -92%;
}
#nikusoba20th #hero .inner #cloud .cloud-06{
height: 30px;
top: 8%;
right: -72%;
}
#nikusoba20th #hero .inner #cloud .cloud-07{
height: 12px;
top: 60%;
right: -76%
}
#nikusoba20th #hero .inner #cloud .cloud-08{
height: 12px;
top: 108%;
right: -92%
}
}



#nikusoba20th #hero .inner figure{
position: absolute;
top:0;
left: 0;
width: 100%;
z-index: -2;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner figure{
margin: 50% 0 0 0;
}
}
#nikusoba20th #hero .inner figure img{
}
#nikusoba20th #hero .inner p{
font-size: 16px;
line-height: 32px;
letter-spacing: 2px;
text-align: center;
margin: 100% 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #hero .inner p{
font-size: 14px;
line-height: 24px;
letter-spacing: 1px;
margin: 155% 0 0 0;
}
}
#nikusoba20th #hero .inner p + p{
margin: 20px 0 0 0;
}



/* ==============================================
#nikusoba20th #menu
============================================== */

#nikusoba20th #menu{
position: absolute;
top:88px;
right: 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu{
position: relative;
top:inherit;
right: inherit;
margin: 50px 0 0 0;
}
}
#nikusoba20th #menu::after{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_mn_bg_02.png");
background-size: 38px 60px;
width: 38px;
height: 60px;
position: absolute;
top:40px;
right: 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu::before{
content: "";
background: url("../img/lp/nikusoba20th/nsb20_mn_bg_01.png");
background-size: 248px 40px;
width: 248px;
height: 40px;
position: absolute;
top:0;
left: 0;
z-index: 5;
transform: scale(-1, 1);
}
#nikusoba20th #menu::after{
right: inherit;
left: 0;
transform: scale(-1, 1);
}
}
#nikusoba20th #menu .inner{
}
#nikusoba20th #menu .inner h2{
font-size: 20px;
line-height: 30px;
letter-spacing: 2px;
font-weight: 700;
background: url("../img/lp/nikusoba20th/nsb20_mn_bg_01.png");
background-size: 248px 40px;
width: 248px;
height: 40px;
position: absolute;
top:0;
right: 0;
z-index: 5;
text-align: center;
padding: 4px 0 0 0;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu .inner h2{
background: none;
right: inherit;
left: 0;
text-align: left;
padding: 4px 0 0 40px;
}
}
#nikusoba20th #menu .inner ul{
padding: 40px 48px 0 0;
position: relative;
z-index: 5;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu .inner ul{
padding: 40px 0 0 48px;
}
}
#nikusoba20th #menu .inner ul li{
margin: 20px 0 0 0;
}
#nikusoba20th #menu .inner ul li a{
font-size: 16px;
line-height: 18px;
letter-spacing: 0;
font-weight: 700;
color: #d2a03c;
text-align: right;
display: block;
padding: 6px 60px 0 0;
height: 48px;
position: relative;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu .inner ul li a{
text-align: left;
padding: 6px 0 0 60px;
}
}
#nikusoba20th #menu .inner ul li a:not(.comingsoon)::after{
content: "開催中!";
width: 60px;
height: 18px;
font-weight: 300;
border-radius: 9px;
background: #e40012;
font-size: 12px;
line-height: 12px;
color: #fff;
text-align: center;
padding: 2px 0 0 0;
position: absolute;
bottom: 0px;
right: 60px;
display: none;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu .inner ul li a::after{
right: inherit;
left: 60px;
}
}
#nikusoba20th #menu .inner ul li a.end::after{
    content: "終了";
    background: #9c9c9c;
}
#nikusoba20th #menu .inner ul li a img{
max-width: 48px;
position: absolute;
top:3px;
right: 0;
opacity: 0.4;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #menu .inner ul li a img{
right: inherit;
left: 0;
}
}
#nikusoba20th #menu .inner ul li a span{
font-size: 14px;
line-height: 28px;
color: #f0ebb4;
display: block;
}



#nikusoba20th.open-01 #menu .inner ul li:nth-child(1) a::after{
display: block;
}
#nikusoba20th.open-01 #menu .inner ul li:nth-child(1) a img{
opacity: 1;
}
#nikusoba20th.open-01 #menu .inner ul li:nth-child(1) a span{
display: none;
}
#nikusoba20th.open-02 #menu .inner ul li:nth-child(1) a::after,
#nikusoba20th.open-02 #menu .inner ul li:nth-child(2) a::after{
display: block;
}
#nikusoba20th.open-02 #menu .inner ul li:nth-child(1) a img,
#nikusoba20th.open-02 #menu .inner ul li:nth-child(2) a img{
opacity: 1;
}
#nikusoba20th.open-02 #menu .inner ul li:nth-child(1) a span,
#nikusoba20th.open-02 #menu .inner ul li:nth-child(2) a span{
display: none;
}
#nikusoba20th.open-03 #menu .inner ul li:nth-child(1) a::after,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(2) a::after,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(3) a::after{
display: block;
}
#nikusoba20th.open-03 #menu .inner ul li:nth-child(1) a img,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(2) a img,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(3) a img{
opacity: 1;
}
#nikusoba20th.open-03 #menu .inner ul li:nth-child(1) a span,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(2) a span,
#nikusoba20th.open-03 #menu .inner ul li:nth-child(3) a span{
display: none;
}
#nikusoba20th.open-04 #menu .inner ul li a::after{
display: block;
}
#nikusoba20th.open-04 #menu .inner ul li a img{
opacity: 1;
}
#nikusoba20th.open-04 #menu .inner ul li a:not(.comingsoon) span{
display: none;
}


/* ==============================================
#nikusoba20th #event
============================================== */

#nikusoba20th #event{
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #event{
margin: 30px 0 0 0;
}
}
#nikusoba20th #event .inner{
display:flex;
flex-wrap:wrap;
padding: 0 68px;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #event .inner{
padding: 0 26px;
}
}
#nikusoba20th #event .inner:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#nikusoba20th #event .inner .event{
float: left;
width: calc(25% - 10.5px);
margin: 180px 14px 0 0;
position: relative;
z-index: 1;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #event .inner .event{
float: inherit;
width: 100%;
margin: 110px 0 0 0!important;
}
}
#nikusoba20th #event .inner .event::before{
content: "";
width: calc(100% + 4px);
height: calc(100% + 4px);
position: absolute;
top:-2px;
left: -2px;
background: linear-gradient(90deg, #cf983c 0%, #895624 60%, #f0d264 80%, #a46e2a 100%);
z-index: -2;
}
#nikusoba20th #event .inner .event::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background: url("../img/lp/nikusoba20th/nsb20_evt_bg.png") top left;
background-size: 40px 40px;
z-index: -1;
}
#nikusoba20th #event .inner .event:last-child{
margin: 180px 0 0 0;
}
#nikusoba20th #event .inner .event #event-01,
#nikusoba20th #event .inner .event #event-02,
#nikusoba20th #event .inner .event #event-03,
#nikusoba20th #event .inner .event #event-04{
position: absolute;
top:-160px;
left: 0;
}
@media screen and (max-width:767px) {
#nikusoba20th #event .inner .event #event-01,
#nikusoba20th #event .inner .event #event-02,
#nikusoba20th #event .inner .event #event-03,
#nikusoba20th #event .inner .event #event-04{
top:-90px;
left: 0;
}
}
#nikusoba20th #event .inner .event div{
overflow: hidden;
}
#nikusoba20th #event .inner .event h2{
font-size: 34px;
line-height: 44px;
letter-spacing: 0;
font-weight: 900;
color: #222;
text-align: center;
padding: 88px 0 22px 0;
transition: 0.4s ease-out;
}
#nikusoba20th #event .inner .event:last-child h2{
padding: 65px 0 0 0;
}
@media screen and (max-width:767px) {
#nikusoba20th #event .inner .event h2{
font-size: 36px;
line-height: 48px;
padding: 65px 0 0 0;
}
}
#nikusoba20th #event .inner .event h2 strong{
font-size: 34px;
line-height: 44px;
letter-spacing: 0;
font-weight: 900;
color: #e40012;
}
#nikusoba20th #event .inner .event h2 img{
max-width: 143px;
margin: 0 auto 20px auto;
display: block;
position: absolute;
top:-70px;
left: 0;
right: 0;
filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.8));
}
#nikusoba20th #event .inner .event figure{
margin: 20px 40px 0 0;
background: url("../img/lp/nikusoba20th/nsb20_evt_img.png") top left no-repeat;
background-size: 100% auto;
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.4));
}

#nikusoba20th #event .inner .event figure img{
opacity: 0;  
transition: 0.4s ease-out;
}

#nikusoba20th.open-00 #event .inner .event:nth-child(1) figure img,
#nikusoba20th.open-01 #event .inner .event:nth-child(1) figure img{
opacity: 1;
}
#nikusoba20th.open-02 #event .inner .event:nth-child(1) figure img,
#nikusoba20th.open-02 #event .inner .event:nth-child(2) figure img{
opacity: 1;
}
#nikusoba20th.open-03 #event .inner .event:nth-child(1) figure img,
#nikusoba20th.open-03 #event .inner .event:nth-child(2) figure img,
#nikusoba20th.open-03 #event .inner .event:nth-child(3) figure img{
opacity: 1;
}
#nikusoba20th.open-04 #event .inner .event figure img{
opacity: 1;
}
#nikusoba20th #event .inner .event .date{
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #000000;
background: url("../img/lp/nikusoba20th/nsb20_evt_icn_02.png");
background-size: 240px 80px;
width: 240px;
height: 80px;
text-align: right;
float: right;
margin: -60px 0 0 0;
padding: 5px 10px 0 0;
transition: 0.4s ease-out;
position: relative;
z-index: 1;
}
#nikusoba20th #event .inner .event .date span{
font-size: 14px;
line-height: 20px;
display: block;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
margin: 22px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #event .inner .event .date span{
margin: 26px 0 0 0;
}
}
#nikusoba20th #event .inner .event .date strong{
font-size: 20px;
font-weight: 700;
}
#nikusoba20th #event .inner .event .date + p{
clear: both;
font-size: 14px;
line-height: 24px;
font-weight: 500;
text-align: justify;
margin: 0 20px;
padding: 20px 0 0 0;
color: #222;
}
#nikusoba20th #event .inner .event .date + p strong{
font-size: 14px;
line-height: 24px;
font-weight: 700;
color: #e40012;
}
#nikusoba20th #event .inner .event .note{
font-size: 11px;
line-height: 16px;
font-weight: 500;
color: #222;
margin: 15px 20px 105px 20px;
}
#nikusoba20th #event .inner .event .button{
position: absolute;
bottom: 24px;
left: 0;
width: 100%;
}
#nikusoba20th #event .inner .event .button a{
position: relative;
font-size: 20px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 700;
display: block;
height: 60px;
border-radius: 30px;
background: #5b0007;
text-align: center;
padding: 16px 0 0 0;
margin: 0 22px;
color: #5b0007;
pointer-events: none;
}
#nikusoba20th #event .inner .event .button a::before{
content: "COMING SOON";
position: absolute;
top:0;
left: 0;
right: 0;
margin: auto;
font-size: 14px;
line-height: 20px;
letter-spacing: 2px;
font-weight: 700;
color: #fff;
padding: 18px 0 0 0;
}
#nikusoba20th.open-01 #event .inner .event:nth-child(1) .button a{
color: #fff;
background: #e40012;
pointer-events: inherit;
}
#nikusoba20th.open-01 #event .inner .event:nth-child(1) .button a::before{
display: none;
}
#nikusoba20th.open-02 #event .inner .event:nth-child(1) .button a,
#nikusoba20th.open-02 #event .inner .event:nth-child(2) .button a{
color: #fff;
background: #e40012;
pointer-events: inherit;
}
#nikusoba20th.open-02 #event .inner .event:nth-child(1) .button a::before,
#nikusoba20th.open-02 #event .inner .event:nth-child(2) .button a::before{
display: none;
}
#nikusoba20th.open-03 #event .inner .event:nth-child(1) .button a,
#nikusoba20th.open-03 #event .inner .event:nth-child(2) .button a,
#nikusoba20th.open-03 #event .inner .event:nth-child(3) .button a{
color: #fff;
background: #e40012;
pointer-events: inherit;
}
#nikusoba20th.open-03 #event .inner .event:nth-child(1) .button a::before,
#nikusoba20th.open-03 #event .inner .event:nth-child(2) .button a::before,
#nikusoba20th.open-03 #event .inner .event:nth-child(3) .button a::before{
display: none;
}
#nikusoba20th.open-04 #event .inner .event .button a{
color: #fff;
background: #e40012;
pointer-events: inherit;
}
#nikusoba20th.open-04 #event .inner .event .button a::before{
display: none;
}


/* ==============================================
#nikusoba20th #apps
============================================== */

#nikusoba20th #apps{
}
#nikusoba20th #apps .inner{
}
#nikusoba20th #apps .inner h2{
text-align: center;
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
font-weight: 700;
padding: 75px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #apps .inner h2{
font-size: 20px;
line-height: 30px;
padding: 50px 0 0 0;
}
}
#nikusoba20th #apps .inner figure{
}
#nikusoba20th #apps .inner figure a{
display: block;
width: 120px;
height: 120px;
background: #fff;
border-radius: 24px;
margin: 25px auto 0 auto;
padding: 34px 8px 0 8px;
}
#nikusoba20th #apps .inner figure a img{
}




/* ==============================================
#nikusoba20th #howto
============================================== */

#nikusoba20th .howto{
position: fixed;
bottom: 68px;
right: 68px;
z-index: 10;
filter: drop-shadow(0 4px 8px rgba(0,0,0,1.0));
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th .howto{
bottom: 5px;
right: inherit;
left: 5px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,1.0));
}
}
#nikusoba20th .howto a{
}
#nikusoba20th .howto a img{
max-width: 160px;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th .howto a img{
max-width: 80px;
}
}



#nikusoba20th #howto{
display: table;
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: 0.4s ease-out;
}
#nikusoba20th #howto.on{
opacity: 1;
z-index: 11;
pointer-events: inherit;
}
#nikusoba20th #howto .inner{
display: table-cell;
vertical-align: middle;
}
#nikusoba20th #howto .inner figure{
}
#nikusoba20th #howto .inner figure img{
}
#nikusoba20th #howto .inner .button{
}
#nikusoba20th #howto .inner .button a{
font-size: 16px;
line-height: 20px;
letter-spacing: 2px;
font-weight: 700;
display: block;
max-width: 200px;
height: 44px;
text-align: center;
padding: 11px 0 0 0;
border-radius: 4px;
background: #fff;
color: #222;
margin: auto;
filter: drop-shadow(0 4px 8px rgba(0,0,0,1.0));
}



/* ==============================================
#nikusoba20th #etc
============================================== */

#nikusoba20th #etc{
position: relative;
z-index: 2;
}
#nikusoba20th #etc .inner{
max-width: 960px;
margin: auto;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #etc .inner{
padding: 0 34px;
}
}
#nikusoba20th #etc .inner h2{
font-size: 30px;
line-height: 40px;
letter-spacing: 4px;
font-weight: 700;
text-align: center;
margin: 70px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #etc .inner h2{
font-size: 20px;
line-height: 30px;
margin: 50px 0 0 0;
}
}
#nikusoba20th #etc .inner hr{
display: block;
border: none;
width: 100%;
height: 1px;
background: #666;
margin: 50px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #etc .inner hr{
margin: 30px 0 0 0;
}
}
#nikusoba20th #etc .inner p{
font-size: 16px;
line-height: 32px;
margin: 50px 0 0 0;
text-align: justify;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #etc .inner p{
font-size: 14px;
line-height: 28px;
margin: 30px 0 0 0;
}
}
#nikusoba20th #etc .inner p + p{
margin: 20px 0 0 0;
}
#nikusoba20th #etc .inner ul{
margin: 45px 0 0 0;
}
#nikusoba20th #etc .inner ul li{
font-size: 16px;
line-height: 28px;
text-indent: -16px;
margin: 5px 0 0 16px;
text-align: justify;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #etc .inner ul li{
font-size: 14px;
line-height: 24px;
margin: 5px 0 0 14px;
}
}



/* ==============================================
#nikusoba20th #thanks
============================================== */

#nikusoba20th #thanks{
margin: 0 28px 28px 28px;
transition: 0.4s ease-out;
overflow: hidden;
}
@media screen and (max-width:767px) {
#nikusoba20th #thanks{
margin: 0 14px 14px 14px;
}
}
#nikusoba20th #thanks .inner{
position: relative;
z-index: 1;
background: #0164a5;
}
#nikusoba20th #thanks .inner::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
padding-top: calc(40% + 200px);
background: linear-gradient(180deg, rgba(0,0,0,1.0) 0%, rgba(0,0,0,0.0) 100%);
z-index: 1;
}
#nikusoba20th #thanks .inner h2{
font-size: 40px;
line-height: 70px;
letter-spacing: 8px;
letter-spacing: -8px;
font-weight: 700;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
top: 190px;
left: 0;
right: 0;
margin: auto;
width: 350px;
transition: 0.4s ease-out;
z-index: 1;
}
@media screen and (max-width:767px) {
#nikusoba20th #thanks .inner h2{
font-size: 24px;
line-height: 36px;
letter-spacing: -4px;
letter-spacing: 4px;
top: 110px;
width: 180px;
}
}
#nikusoba20th #thanks .inner figure{
padding: 200px 0 0 0;
transition: 0.4s ease-out;
}
@media screen and (max-width:767px) {
#nikusoba20th #thanks .inner figure{
padding: 270px 0 0 0;
}
}
#nikusoba20th #thanks .inner figure img{
}



/* ==============================================
anime
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(40px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(40px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
animation-timing-function: ease-out;
}
@keyframes zoomIn {
0% {
opacity: 0.0;
transform: scale(0.5,0.5);
}
20% {
transform: scale(1.20,1.20);
}
40% {
transform: scale(0.85,0.85);
}
60% {
opacity: 1.0;
transform: scale(1.10,1.10);
}
80% {
transform: scale(0.95,0.95);
}
100% {
transform: scale(1.0,1.0);
}
}