@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2023.2.15
Last Updated: 2023.3.23
*/


/* import
------------------------------------------------------------ */
@import "https://w-shiya.com/release/css/ampersand-2023.css";


/* set
------------------------------------------------------------ */
body {
background: #00441B;
}


/* Loading
------------------------------------------------------------ */
#splash {
background: #00441B;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999999;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
}
#container {
opacity: 0;
}
body.appear #container {
animation-name: PageAppear;
animation-duration: 1s;
animation-delay: .2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes PageAppear {
 0% {
 opacity: 0;
 }
 100% {
 opacity: 1;
 background: #FFF url("images/bg.png") repeat;
 background-size: 100px auto;
 }
}


/* common
------------------------------------------------------------ */
/* font */
.TA { /* TA Engeifude Regular */
font-family: "ta-engeifude", sans-serif;
font-weight: 400;
}
.CL { /* Corporate Logo ver2 Medium */
font-family: "corporate-logo-ver2", sans-serif;
}
.EN { /* Kegger Regular */
font-family: "kegger-us", serif;
font-weight: 400;
}
@font-face {
font-family: RDN;
src: url(font/Raiden-Regular.otf);
}
@font-face {
font-family: RDN-ilc;
src: url(font/Raiden-Italic.otf);
}
.RDN { /* Raiden Regular */
font-family: "RDN", "kegger-us", serif;
}
.RDN-ilc { /* Raiden Italic */
font-family: "RDN-ilc", "kegger-us", serif;
font-style: italic;
}

/* style */
.zidx1 {
position: relative;
z-index: 1;
}
.zidx2 {
position: relative;
z-index: 2;
}
.zidx3 {
position: relative;
z-index: 3;
}

/* color */
.grn {
color: #00441B;
}
.gld {
color: #BFA666;
}

/* background */
.bg_grn {
background: #00441B;
color: #BFA666;
}
.beige {
background: #BBA265;
color: #FFF;
}

/* illust */
.illust {
position: relative;
}
.illust:before,
.illust:after {
content: "";
background-size: contain !important;
max-width: 30%;
position: absolute;
z-index: 1;
}
.cloud:before {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
top: 0;
left: -5%;
}
.cloud:after {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
right: -7%;
bottom: 1%;
}
.cloud1:after {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
left: -20%;
bottom: 3%;
}
.cloud2:after {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
top: 3%;
right: -20%;
}
.cloud3:after {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
top: 5%;
left: -30%;
}
.cloud4:after {
background: url("images/cloud.png") no-repeat bottom;
width: 355px;
height: 125px;
top: -30%;
right: -30%;
}
.i1:before {
background: url("images/illust_01.png") no-repeat bottom;
width: 265px;
height: 220px;
right: 3%;
bottom: -5%;
}
.i2:before {
background: url("images/illust_02.png") no-repeat;
width: 110px;
height: 285px;
right: -25%;
bottom: -5%;
}
.i3:before {
background: url("images/illust_03.png") no-repeat;
width: 175px;
height: 245px;
top: 20%;
left: -25%;
}
.i4:after {
background: url("images/illust_04.png") no-repeat;
width: 120px;
height: 275px;
right: -20%;
bottom: 5%;
}
.i5:before {
background: url("images/illust_05.png") no-repeat;
width: 120px;
height: 225px;
left: -20%;
bottom: -8%;
}
.i6:before {
background: url("images/illust_06.png") no-repeat;
width: 205px;
height: 240px;
right: -25%;
bottom: -10%;
}
.i7:before {
background: url("images/illust_07.png") no-repeat;
width: 205px;
height: 240px;
top: -30%;
left: -30%;
}
.i8:before {
background: url("images/illust_08.png") no-repeat;
width: 135px;
height: 195px;
top: -30%;
left: -22%;
}
.i9:before {
background: url("images/illust_09.png") no-repeat;
width: 145px;
height: 175px;
top: 0;
left: -20%;
}
.i10:after {
background: url("images/illust_10.png") no-repeat;
width: 470px;
height: 330px;
right: 2%;
bottom: -10%;
}
.i13:before {
background: url("images/illust_11.png") no-repeat;
width: 410px;
height: 360px;
top: -3%;
right: 2%;
z-index: -1;
}

.player3:before {
background: url("images/player_03.png") no-repeat center;
width: 450px;
height: 480px;
top: 0;
left: -28%;
}
.player4:before {
background: url("images/player_04.png") no-repeat center;
width: 350px;
max-width: 23%;
height: 500px;
top: 0;
right: -20%;
}
.player6:after {
background: url("images/player_06.png") no-repeat top right;
width: 540px;
height: 430px;
top: -10%;
right: 0;
}
.player7:before {
background: url("images/player_07.png") no-repeat top right;
width: 540px;
height: 410px;
top: -7%;
right: 0;
}
.player9:after {
background: url("images/player_09.png") no-repeat top left;
width: 540px;
height: 410px;
top: -7%;
left: 0;
}

/* Swiper */
.swiper-prev,
.swiper-next {
top: 40%;
}


/* header
------------------------------------------------------------ */
header {
width: 100%;
height: 70px;
position: fixed;
top: 0;
left: 0;
z-index: 3;
}
header h1 {
max-width: calc(100% - 140px);
height: 100%;
display: flex;
align-items: center;
}
#menu {
background: url("images/menu.png") no-repeat;
right: 70px;
}
#menu.open {
background: url("images/menu_close.png") no-repeat;
}
#share .btn {
background: url("images/share.png") no-repeat;
right: 0;
}
#share .btn.open {
background: url("images/share_close.png") no-repeat;
}
.btn {
background-size: contain !important;
position: absolute;
top: 0;
width: 70px;
height: 70px;
text-indent: -9999px;
cursor: pointer;
}
nav {
display: none;
background: rgba(0,68,27,.95);
width: 100%;
height: calc(100vh - 70px);
padding: 3rem 0 5rem;
position: absolute;
top: 100%;
right: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
nav ul li a {
padding: 1.5rem 0;
display: block;
}
#share ul {
display: none;
background: rgba(191,166,102,.9);
width: 70px;
position: absolute;
top: 100%;
right: 0;
}


/* main
------------------------------------------------------------ */
/* #main */
#main {
margin-top: 70px;
}
#main video {
width: 100vw;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .3;
}

/* #day */
#day {
background: url("images/day_bg.png") no-repeat center;
background-size: cover;
}
#day .time {
margin-right: 2rem;
}
#day .time:before,
#day .place:before {
content: "";
background: url("images/time.png") no-repeat;
background-size: contain !important;
width: 2.875rem;
height: 2.875rem;
margin-right: .5rem;
display: inline-block;
vertical-align: middle;
}
#day .place:before {
background: url("images/place.png") no-repeat;
}

/* #highlight */
#highlight a:hover {
text-decoration: underline;
}
#highlight {
background: url("images/highlight_bg.png") no-repeat bottom;
background-size: cover;
}
#highlight .sub {
background: url("images/ttl_highlight.png") no-repeat top;
background-size: 100% auto !important;
margin-bottom: 3%;
padding-top: 22%;
}
#highlight .sub p {
text-shadow: 3px 3px 3px #00441B, -3px -3px 3px #00441B, -3px 3px 3px #00441B, 3px -3px 3px #00441B;
}
.highlight {
background: url("images/highlight_box.png") no-repeat;
background-size: contain;
max-width: 840px;
margin: 0 auto 3rem;
padding: 2%;
position: relative;
}
#highlight h2.zidx1 {
margin-bottom: -3%;
}

/* #event */
#event a:hover {
text-decoration: underline;
}
#event figure:first-of-type:before {
background: url("images/player_02.png") no-repeat bottom;
width: 540px;
max-width: 60%;
height: 360px;
top: -363px;
left: -12%;
}
#event figure {
margin: 4rem auto;
align-items: flex-start;
position: relative;
}
#event figure > div {
flex-basis: 55%;
background: #DCDDDD;
border: solid 3px #00441B;
outline: solid 3px #DCDDDD;
padding: 2px;
}
#event figure > div img {
border: solid 2px #00441B;
object-fit: contain;
width: 100%;
height: 100%;
}
#event figcaption {
flex-basis: 45%;
padding: 0 0 1rem 2rem;
position: relative;
z-index: 1;
}
#event figcaption h3 {
background: url("images/event_ttl_bg.png") repeat-x;
background-size: auto 4rem;
line-height: 4rem;
height: 4rem;
margin: 1rem 0 2rem -4rem; 
padding: 0 4rem 0 5rem;
display: inline-block;
position: relative;
}
#event figcaption h3:before,
#event figcaption h3:after {
content: "";
background: url("images/event_ttl_top.png") no-repeat top left;
background-size: auto 4rem !important;
position: absolute;
top: 0;
left: -1rem;
width: 100%;
height: 100%;
}
#event figcaption h3:after {
background: url("images/event_ttl_btm.png") no-repeat top right;
left: auto;
right: -1rem;
}
#event figcaption h4,
#event figcaption p {
text-align: left;
margin: 0 0 1rem;
}
#event figcaption p {
text-shadow: 2px 2px 2px #FFF, -2px -2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF;
}
#event figure:nth-child(even) figcaption {
order: -1;
padding: 0 2rem 1rem 0;
text-align: right;
}
#event figure:nth-child(even) figcaption h3 {
margin: 1rem -4rem 2rem auto; 
}

/* #gourmet */
#gourmet {
background: url("images/gourmet_bg.png") no-repeat top;
background-size: cover;
}
.gourmet {
width: 1140px;
}
.gourmet:before {
background: url("images/player_05.png") no-repeat bottom;
width: 450px;
max-width: 40%;
height: 300px;
top: -300px;
left: 10px;
}
.gourmet .swiper-slide > div {
background: url("images/gourmet_box_btm.png") no-repeat left bottom;
background-size: 100% auto;
width: 310px;
max-width: 100%;
height: auto;
margin: 0 auto;
padding: 11px 11px 120px;
position: relative;
}
.gourmet .swiper-slide > div:before,
.gourmet .swiper-slide > div:after {
content: "";
background: url("images/gourmet_box_bg.png") repeat-y;
background-size: 100% auto !important;
width: 100%;
height: calc(100% - 56px);
position: absolute;
top: 22px;
left: 0;
z-index: -1;
}
.gourmet .swiper-slide > div:after {
background: url("images/gourmet_box_top.png") no-repeat;
height: 35px;
top: 0;
z-index: 0;
}
.gourmet .swiper-slide > div div img {
border-radius: 20px 20px 0 0;
}
.gourmet .swiper-slide dl {
width: 100%;
position: absolute;
left: calc(1rem + 11px);
bottom: 20px;
}
.gourmet .swiper-slide dl dt {
line-height: 25px;
text-align: center;
width: 50px;
height: 25px;
margin: 0 10px 10px 0;
float: left;
clear: both;
}
.gourmet .swiper-slide dl dt.long {
width: 65px;
}
.gourmet .swiper-slide dl dd {
margin-bottom: 10px;
}

/* #goods */
#goods {
background: url("images/goods_bg.png") no-repeat top;
background-size: cover;
}

/* #check */
#check {
background: url("images/check_bg.png") no-repeat center;
background-size: cover;
}

/* #access */
#access figure:before {
background: url("images/player_08.png") no-repeat bottom;
width: 540px;
max-width: 50%;
height: 360px;
top: -360px;
left: -12%;
}
#access .vwmax {
position: relative;
z-index: 1;
}
#access .vwmax:before {
content: "";
background: #00441B;
width: 100%;
height: 4%;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}


/* footer
------------------------------------------------------------ */
footer {
padding: 40px 0 100px;
}
footer h1 {
max-width: 50%;
margin: 0 auto;
}

/* #ticket */
#ticket {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 3;
}
#ticket a {
font-size: 3rem;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
#ticket a:hover {
background: #BFA666;
color: #00441B;
}





@media screen and (max-width: 1180px) {
/* iPad横以下 */

/* main
------------------------------------------------------------ */
/* #event */
#event figure {
max-width: 860px;
}
#event figure > div,
#event figcaption {
flex-basis: 50%;
}
}


@media screen and (max-width: 1024px) {
/* iPad横以下 */

/* main
------------------------------------------------------------ */
/* #highlight */
.highlight.i2:before,
.highlight.i3:before,
.highlight.i4:after,
.highlight.i5:before {
display: none;
}

/* #event */
#event figure {
max-width: 100%;
}
#event .i6:before,
#event .i7:before,
#event .i8:before,
#event .i9:before,
#event .player3:before,
#event .player4:before {
display: none;
}
}


@media screen and (max-width: 1180px) and (orientation: portrait) {
/* iPad縦以下 */

/* common
------------------------------------------------------------ */
h2.center img {
width: auto;
height: 150px;
}

/* main
------------------------------------------------------------ */
/* #event */
#event figure {
max-width: 600px;
display: block;
}
#event figcaption {
text-align: center !important;
padding: 0 !important;
}
#event figcaption h3 {
margin: -1rem auto 1rem !important; 
}
#event.i13:before {
top: 0;
}

/* #gourmet */
.gourmet:before {
left: -5%;
}

/* #check */
#check.player6:after {

}
}


@media screen and (max-width: 740px) {
/* iPhone以下 */

/* common
------------------------------------------------------------ */
h2.center img {
width: auto;
height: 100px;
}

/* header
------------------------------------------------------------ */
header {
height: 50px;
}
header h1 {
max-width: calc(100% - 100px);
}
#menu {
right: 50px;
}
.btn {
width: 50px;
height: 50px;
}
nav {
font-size: 80%;
height: calc(100vh - 50px);
padding: 1rem 0;
}
nav ul li a {
padding: .5rem 0;
}
#share ul {
width: 50px;
}

/* main
------------------------------------------------------------ */
/* #main */
#main {
margin-top: 50px;
}
#main video {
width: 740px;
max-width: 740px;
height: 740px;
left: 50%;
transform: translateX(-50%);
}

/* #day */
#day.i1:before {
display: none;
}
#day .f37 {
font-size: 140%;
}
#day .time {
_margin: 0 0 5px;
}
#day .time:before,
#day .place:before {
width: 2rem;
height: 2rem;
}
#day ul.center {
_text-align: left;
_padding-left: 4rem;
display: flex;
}
#day ul.center li {
white-space: nowrap;
}
#day div.center {
max-width: 70%;
margin: 0 auto;
}

/* #highlight */
#highlight .sub {
background: url("images/smp_ttl_highlight.png") no-repeat top;
padding-top: 45%;
}
#highlight .sub p {
font-size: 100%;
}

/* #event */
#event {
padding-top: 0;
}
#event.i13:before {
top: -2%;
}
#event figcaption h3 {
background-size: auto 3rem;
font-size: 130%;
line-height: 3rem;
height: 3rem;
margin: 1rem 0; 
padding: 0;
display: block;
}
#event figcaption h3:before,
#event figcaption h3:after {
display: none;
}
#event figcaption h4 {
font-size: 110%;
}
#event.i10:after  {
max-width: 50%;
bottom: -10%;
}
#event h2 + div.CL {
margin-bottom: -1rem;
}

/* #gourmet */
#gourmet {
padding-top: 3rem;
}
.gourmet:before {
background: url(images/player_03.png) no-repeat center bottom;
width: 450px;
height: 480px;
top: auto;
right: 0;
bottom: -3%;
}

/* #check */
#check {
padding: 3rem 0;
}
#check.player6:after {
max-width: 45%;
}
#check h2 {
max-width: 92%;
margin: 0 auto;
}
#check h2 img {
height: auto;
}
#check section {
padding-top: 1rem;
}

/* #access */
#access.player7:before {
max-width: 45%;
top: -3%;
right: -5%;
}
#access.player9:after {
max-width: 45%;
top: -3%;
left: -10%;
}
#access figure:before {
display: none;
}
#access section {
padding-top: 1rem;
}
#access address {
font-size: 120%;
}
#access address div {
max-width: 70%;
margin: 0 auto 1rem;
}

/* footer
------------------------------------------------------------ */
footer {
padding: 20px 0 80px;
}

/* #ticket */
#ticket a {
font-size: 2rem;
height: 60px;
}
#ticket a img {
width: auto;
height: 30px;
}
#ticket .lr {
padding: 0 .5rem;
}

}