@charset "UTF-8";
header {
 background: none;
 height: auto;
}
header > .sns, header h1 {
 display: none;
}
header .utility {
 flex: none;
 max-width: auto;
 position: absolute;
 right: 2rem;
 top: 2rem;
}
header .utility #language {
 margin-right: 2em;
}
header .utility #hamburger:after, header .utility #language:after {
 content: "";
 display: block;
 padding-top: 180%;
 width: 180%;
 background: #fff;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: -50%;
 right: -50%;
 margin: 0 auto;
 z-index: -1;
 border-radius: 5px;
}
header .utility #hamburger:after {
 width: 140%;
 padding-top: 140%;
}
#kv {
 position: relative;
 padding: 0 0 3px;
 height: auto;
 overflow: hidden;
 z-index: 10;
}
#kv:after {
 content: "";
 display: block;
 background: url(../images/line.png) repeat-x;
 background-size: auto 100%;
 height: 4px;
 width: 100vw;
 position: absolute;
 bottom: 0px;
 left: 0;
 z-index: 3;
}
#kv .mv {
 position: relative;
 /*overflow: hidden;*/
}
#kv .mv:before {
 content: "";
 display: block;
 padding-top: 56.25%;
}
#kv .mv .slider {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}
#kv .sliderArea {
 width: 100%;
 margin: 0 auto;
}
#kv .slick-slide {
 margin: 0;
}
#kv .slick-prev, .slick-next {
 z-index: 1;
}
#kv .slick-prev:before, #kv .slick-next:before {
 color: #fff;
}
#kv .slick-slide {
 transition: all ease-in-out .3s;
 opacity: .2;
}
#kv .slick-active {
 opacity: 1;
}
#kv .slick-current {
 opacity: 1;
}
#kv .pickup_thumb .slick-slide {
 cursor: pointer;
}
#kv .pickup_thumb .slick-slide:hover {
 opacity: .7;
}
#kv .top-slider .slick-list {
 overflow: visible;
}
#kv .top-slider.slider {
 max-width: 100%;
 margin: 0 auto;
}
#kv .progress {
 position: absolute;
 right: 0;
 bottom: -2px;
 width: 100%;
 height: 5px;
 background: rgba(0, 0, 0, 0.7);
 background: #ccc;
}
#kv .bar {
 display: block;
 width: 0%;
 height: 4px;
 background: #e62310;
}
#pickup {
 padding: 2.5vw 5vw;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: url("../images/bg_pink.png") repeat-x center top;
 background-size: auto 100%;
 overflow: hidden;
}
#pickup:before {
 content: "";
 display: block;
 background: url("../images/texture.jpg") repeat;
 background-size: contain;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.5;
}
#pickup:after {
 content: "";
 display: block;
 background: url(../images/line.png) repeat-x;
 background-size: auto 100%;
 height: 4px;
 width: 100vw;
 position: absolute;
 bottom: -1px;
 left: 0;
 z-index: 3;
}
#pickup .cloud {
 position: absolute;
 display: block;
 background: url("../images/cloud.png") no-repeat;
 background-size: cover;
 width: 100%;
 padding-top: calc(63.405% * 1);
 bottom: -25%;
 left: -15%;
}
#pickup h2 {
 position: relative;
 z-index: 2;
 flex: 1 0 27%;
 max-width: 27%;
 line-height: 1;
 text-align: left;
 padding-right: 2.5vw;
}
#pickup h2 span {
 font-size: 2.0vw;
 font-weight: 600;
 display: inline-block;
 letter-spacing: 0;
 position: relative;
}
#pickup h2 span:after {
 content: "";
 display: block;
 background: url("../images/icon_pickup.svg") no-repeat;
 background-size: 100% auto;
 width: 18%;
 padding-top: calc(65.217% * 0.18);
 transform: rotate(-55deg);
 position: absolute;
 top: -0.8em;
 left: -0.5em;
}
#pickup .sliderArea {
 flex: 1 0 70%;
 max-width: 70%;
 margin: 0 auto;
 position: relative;
 z-index: 2;
}
.slide-box {
 position: relative;
 display: flex;
 margin: 0;
 padding: 0;
 flex-wrap: wrap;
 align-items: stretch;
}
.pickup-slide {
 position: relative;
 width: 76%;
 margin: 0;
 padding: 0;
}
.pickup-slide .item {
 position: relative;
 height: 100%;
}
.pickup-slide .item a {
 display: block;
 position: relative;
 border-radius: 1.0rem;
 border: solid 1px rgba(0, 0, 0, 0.1);
 overflow: hidden;
}
.pickup-slide .item a:before {
 display: block;
 padding-top: 75%;
 content: "";
}
.pickup-slide .item .image {
 position: relative;
 overflow: hidden;
}
.pickup-slide .item img {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 width: 100%;
}
.pickup-slide .item .txt {
 position: relative;
 padding: 0.5em 0 0;
 display: inline-block;
 font-weight: 600;
 font-size: 1.7rem;
}
.pickup-slide > .slick-list, .pickup-slide > .slick-list > .slick-track, .pickup-slide > .slick-list > .slick-track > .slick-slide > div {
 position: relative;
 height: 100%;
}
.slide-navigation {
 line-height: 0;
 position: relative;
 width: 24%;
 margin: 0;
 padding: 0;
}
.slide-navigation .item {
 position: relative;
 cursor: pointer;
 padding: 0 0 8px 8px;
 box-sizing: border-box;
}
.slide-navigation .item .image {
 position: relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
 border-radius: 1.0rem;
 border: solid 1px rgba(0, 0, 0, 0.1);
 display: block;
}
.slide-navigation .item .image:before {
 display: block;
 padding-top: 75%;
 content: "";
}
.slide-navigation .item .image:after {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 content: "";
 opacity: 0.5;
 background: #000;
}
.slide-navigation .slick-current .image:after {
 opacity: 0;
}
.slide-navigation .item .image img {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 width: 100%;
}
#about {
 padding: 7.5vw 5vw;
 background-image: linear-gradient(180deg, rgba(0, 173, 236, 1) 0%, rgba(255, 244, 85, 1) 95%);
 overflow: hidden;
}
#about:before {
 content: "";
 display: block;
 background: url("../images/texture.jpg") repeat;
 background-size: contain;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.5;
}
#about:after {
 content: "";
 display: block;
 background: url(../images/line.png) repeat-x;
 background-size: auto 100%;
 height: 4px;
 width: 100vw;
 position: absolute;
 bottom: -1px;
 left: 0;
 z-index: 3;
}
#about .castle2 {
 display: block;
 background: url("../images/castle2.png") no-repeat;
 background-size: cover;
 width: 55%;
 padding-top: calc(65% * 0.55);
 position: absolute;
 left: -18%;
 bottom: -4%;
 z-index: 2;
}
#about .castle2Shadow {
 display: block;
 background: url("../images/castle2_shadow.png") no-repeat;
 background-size: cover;
 width: 55%;
 padding-top: calc(65% * 0.55);
 position: absolute;
 left: -16%;
 bottom: -2%;
 background-blend-mode: hard-light;
 z-index: 1;
 opacity: 0.6;
 mix-blend-mode: overlay;
}
#about .hanabi {
 position: absolute;
 top: 0;
 right: 0;
 background: url("../images/hanabi.png") no-repeat;
 background-size: cover;
 width: 50%;
 padding-top: calc(70.6% * 0.5);
 mix-blend-mode: color-dodge;
 opacity: 0.34;
}
#about h2 {
 font-size: 300%;
 letter-spacing: 0.075em;
 font-family: "Shippori Mincho", serif;
 font-weight: 700;
 position: relative;
 white-space: nowrap;
 line-height: 1;
 color: #e62310;
 text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#about h2 em {
 font-size: 100%;
 display: inline-block;
 text-indent: -0.6em;
}
#about h2 .en {
 display: block;
 width: 40%;
 padding-bottom: 0.35em;
}
#about h2 span {
 display: inline-block;
}
#about .flex {
 display: flex;
 justify-content: center;
 /*flex-direction: row-reverse;*/
 margin: 3.5em auto 0;
}
#about .lead {
 padding: 0 4.5vw 5vw 0;
 font-size: 1.5rem;
 line-height: 2.2;
 width: 50%;
}
#about .lead.en {
 -ms-writing-mode: horizontal-tb;
 writing-mode: horizontal-tb;
 white-space: normal;
 font-size: 1.4rem;
 line-height: 2;
}
#about .eventInfo {
 position: relative;
 font-size: 2rem;
 width: 50%;
}
#about .eventInfo dl {
 position: relative;
 margin-bottom: 1em;
}
#about .eventInfo dl dt {
 position: relative;
 margin-bottom: 0.45em;
 font-size: 1.7rem;
 color: #fff;
}
#about .eventInfo dl dt span {
 display: inline-block;
 background-color: #e62310;
 line-height: 1.2;
 padding: 0.35em 1em;
 font-weight: 400;
 font-size: 1.5rem;
 border-radius: 2px;
}
#about .eventInfo dl dd {
 font-weight: 600;
}
#about .eventInfo dl.period dd span {
 display: inline-block;
 position: relative;
 letter-spacing: 0.05em;
 font-weight: inherit;
}
#about .eventInfo dl.period dd span:first-child:after {
 content: "〜";
 font-size: 80%;
 display: inline-block;
 padding: 0 0.25em;
}
#about .eventInfo dl.period dd span small {
 font-size: 84%;
 font-weight: 800;
}
#about .eventInfo dl.period dd span em {
 font-size: 70%;
 display: inline-block;
 padding: 0 0.1em;
}
#about .eventInfo dl.place dd em {
 display: block;
 font-size: 60%;
 font-family: "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
 letter-spacing: 0.175em;
}
#about .eventInfo dl.place dd em:first-of-type {
 margin: 0.5em 0;
 font-size: 70%;
}
#about .eventInfo dl.access dd ul {
 font-size: 75%;
 line-height: 1.4;
}
#about .eventInfo dl.access dd ul li {
 text-indent: -1em;
 padding-left: 1em;
 font-weight: 600;
}
.toBtn {
 position: relative;
}
.toBtn a {
 background: #363638;
 color: #fff;
 display: inline-block;
 font-size: 1.5rem;
 line-height: 1.2;
 padding: 0.75em 2.5em 0.75em 1.5em;
 position: relative;
 box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}
.toBtn a:before {
 content: "";
 display: inline-block;
 width: 6px;
 height: 6px;
 border-top: 3px solid #fff;
 border-right: 3px solid #fff;
 transform: rotate(45deg)translateY(-50%);
 position: absolute;
 top: calc(50% - 1px);
 right: 1.25em;
 transition: .2s;
}
.toBtn a:hover {
 box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
 background-color: #FF811F;
}
.toBtn a:hover:before {
 right: 1em;
}
#features {
 padding: 0;
}
#features .points li {
 position: relative;
 clip-path: inset(0);
}
/*#features .points li:before {
 content: "";
 display: block;
 background: url("../images/texture.jpg") repeat;
 background-size: contain;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 mix-blend-mode: multiply;
 pointer-events: none;
}*/
#features .points li:before {
 content: "";
 display: block;
 object-fit: cover;
 position: fixed;
 left: 30rem;
 top: 0;
 width: calc(100% - 30rem);
 height: 100%;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
}
#features .points li:nth-child(1):before {
 background-image: url("../images/bg_points_experience.jpg?0502");
}
#features .points li:nth-child(2):before {
 background-image: url("../images/bg_points_stage.jpg?0502");
}
#features .points li:nth-child(3):before {
 background-image: url("../images/bg_points_drink.jpg?0502");
}
#features .points li:nth-child(4):before {
 background-image: url("../images/bg_points_photo.jpg?0502");
}
#features .points li:nth-child(5):before {
 background-image: url("../images/bg_points_mobileorder.jpg?0502");
}
#features .points li:after {
 content: "";
 display: block;
 height: 1px;
 width: 100%;
 background: rgba(255, 255, 255, 0.5);
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: 2;
}
#features .points li a {
 color: #fff;
 padding: 15vh 5vw;
 font-size: 180%;
 line-height: 1.5;
 font-weight: 600;
 position: relative;
 z-index: 5;
}
#features .points li a .arrow {
 display: block;
 background: url("../images/arrow_circle.svg") no-repeat;
 background-size: 100% auto;
 width: 1.7em;
 height: 1.7em;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 3.5vw;
 opacity: 1;
}
#features .points li a:after {
 content: "";
 display: block;
 background: rgba(0, 0, 0, 0.4);
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 transition: .2s;
 z-index: -1;
}
#features .points li a:hover:after {
 background: rgba(0, 0, 0, 0.25);
}
#features .points li a p {
 font-size: 1.4rem;
 width: 78%;
 padding-top: 1em;
}
#access {
 padding: 0;
 z-index: 6;
 background: #efefef;
 display: flex;
 align-items: stretch;
}
#access:before {
 content: "";
 display: block;
 background: url("../images/line.png") repeat-x;
 background-size: auto 100%;
 height: 4px;
 width: 100vw;
 position: absolute;
 top: -4px;
 left: 0;
 z-index: 3;
}
#access:after {
 content: "";
 display: block;
 background: url("../images/line.png") repeat-x;
 background-size: auto 100%;
 height: 4px;
 width: 100vw;
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 3;
}
#access .gMap {
 flex: 1 0 40%;
 max-width: 40%;
 height: 42rem;
}
#access .gMap iframe {
 width: 100%;
 height: 100%;
}
#access .accessInfo {
 flex: 1 0 60%;
 padding: 5vw;
}
#access .accessInfo .secTtl {
 text-align: left;
 margin-bottom: 0.5em;
 font-size: 4rem;
}
#access .accessInfo .secTtl span {
 color: #efefef;
 text-shadow: 2px 2px 0 #1B73AD, -2px -2px 0 #1B73AD, -2px 2px 0 #1B73AD, 2px -2px 0 #1B73AD, 0px 2px 0 #1B73AD, 0-2px 0 #1B73AD, -2px 0 0 #1B73AD, 2px 0 0 #1B73AD;
}
#access .accessInfo .secTtl em {
 color: #1B73AD;
 text-shadow: 2px 3px 0 rgba(205, 205, 225, 0.8);
}
#access .accessInfo .address {
 font-size: 1.7rem;
}
#access .accessInfo .address em {
 display: block;
 padding-top: 0.75em;
}
#access .accessInfo .toBtn {
 margin: 1.5em 0 0;
}
footer .contact ul.flex > li {
 flex: 1 0 50%;
 max-width: 50%;
}
footer .contact ul.flex > li:nth-child(1) {
 padding: 0 2.5em 1.5em calc(15% - 2.5em);
}
footer .contact ul.flex > li:nth-child(2) {
 padding: 0 calc(15% - 2.5em) 1.5em 2.5em;
}
footer .contact ul.flex > li:nth-child(3) {
 padding: 1.5em 2.5em 0 calc(15% - 2.5em);
}
footer .contact ul.flex > li:nth-child(4) {
 padding: 1.5em calc(15% - 2.5em) 0 2.5em;
}
@media screen and (max-width: 999px) {
 header .utility {
  flex: none;
  max-width: 100%;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 100;
 }
 header .utility #language {
  margin-right: 0;
 }
 header .utility #hamburger {
  display: none;
 }
header .utility #language:after {
 content: "";
 display: block;
 padding-top: 180%;
 width: 180%;
 background: url("../images/icon_language_bk.svg?0502") no-repeat center center #fff;
 background-size: auto 70%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: -50%;
 right: -50%;
 margin: 0 auto;
 z-index: -1;
 border-radius: 5px;
}
 #kv .mv:before {
  padding-top: 164.417%;
 }
 #pickup {
  padding: 4rem 1.5rem;
  display: block;
 }
 #pickup .cloud {
  width: 100%;
  padding-top: calc(63.405% * 1);
  bottom: -5%;
  left: -5%;
 }
 #pickup h2 {
  flex: none;
  text-align: center;
  margin-bottom: 1em;
  max-width: 100%;
 }
 #pickup h2 span {
  font-size: 2.7rem;
 }
 #pickup .sliderArea {
  max-width: 100%;
 }
 .pickup-slide {
  width: 100%;
 }
 .pickup-slide .item a {
  border-radius: 0.4rem;
 }
 .pickup-slide .item .txt {
  font-size: 1.5rem;
 }
 .slide-navigation {
  width: 100vw;
  margin: 1em calc(50% - 50vw) 0;
 }
 .slide-navigation .item {
  padding: 0 2px;
 }
 #about {
  padding: 4rem 1.5rem 40%;
 }
 #about .castle2 {
  width: 75%;
  padding-top: calc(65% * 0.75);
  left: auto;
  right: -5%;
 }
 #about .castle2Shadow {
  width: 75%;
  padding-top: calc(65% * 0.75);
  left: auto;
  right: -7%;
  bottom: -3%;
 }
 #about .hanabi {
  width: 80%;
  padding-top: calc(70.6% * 0.8);
 }
 #about h2 {
  font-size: 200%;
  white-space: normal;
 }
 #about h2 em {
  text-indent: 0;
  display: block;
  padding-top: 0.35em;
 }
 #about h2 .en {
  width: 70%;
 }
 #about .flex {
  display: block;
  margin: 1.5em auto 0;
 }
 #about .lead {
  padding: 0 0 2em 0;
  font-size: 1.3rem;
  width: 100%;
  font-weight: bold;
 }
 #about .eventInfo {
  font-size: 1.8rem;
  width: 100%;
 }
 #about .eventInfo dl {
  margin-bottom: 0.75em;
 }
 #about .eventInfo dl.period dd span small {
  font-size: 90%;
 }
 #about .eventInfo dl.period dd span em {
  font-size: 80%;
 }
 #about .eventInfo dl.place dd em {
  font-size: 75%;
 }
 .toBtn {
  text-align: center;
 }
 .toBtn a {
  font-size: 1.5rem;
  padding: 0.75em 2.5em 0.75em 1.5em;
 }
 #features .points li:before {
  left: 0;
  width: 100%;
 }
 #features .points li a {
  padding: 10vh 1.5em;
  font-size: 2.0rem;
  background-attachment: inherit !important;
 }
 #features .points li a:after {
  background: rgba(0, 0, 0, 0.55);
 }
 #features .points li a .arrow {
  width: 1.2em;
  height: 1.2em;
  top: auto;
  transform: translateY(0);
  bottom: 1.5em;
  right: 1.5em;
 }
 #features .points li a p {
  font-size: 1.3rem;
  width: 100%;
  padding-top: 1.75em;
  line-height: 2;
  text-align: justify;
 }
 #access {
  display: block;
 }
 #access .gMap {
  flex: none;
  max-width: 100%;
  height: 20rem;
 }
 #access .accessInfo {
  flex: none;
  padding: 2.5em 1.5rem;
 }
 #access .accessInfo .secTtl {
  text-align: center;
  font-size: 2.7rem;
 }
 #access .accessInfo .address {
  text-align: center;
 }
}