@charset "UTF-8";
aside {
 left: -100%;
}
main {
 width: 100%;
 margin-left: 0;
}
#about {
 background-image: linear-gradient(180deg, rgba(0, 173, 236, 1) 0%, rgba(255, 244, 85, 1) 60%);
 text-align: center;
 padding: calc(15rem + 5vw) 5vw 5vw;
}
#about:before {
 content: "";
 display: block;
 background: url(../images/bg_castle.png) no-repeat center top rgba(0, 0, 0, 0.1);
 background-size: cover;
 height: 100vh;
 width: 100vw;
 margin: 0 auto;
 mix-blend-mode: multiply;
 position: fixed;
 top: 0;
 left: 0;
 pointer-events: none;
}
#about:after {
 content: "";
 display: block;
 background: url("../images/texture.jpg") repeat;
 background-size: 100% auto;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 mix-blend-mode: multiply;
 pointer-events: none;
 z-index: 2;
}
#about h2.copy {
 font-size: 4.2vw;
 font-weight: bold;
 font-family: "Shippori", serif;
 white-space: nowrap;
 text-shadow: 0 0 16px rgba(0, 0, 10, 0.3);
 color: #fff;
 line-height: 1.5;
}
#about .lead {
 font-size: 1.6rem;
 margin: 2em 0 0;
 text-shadow: 0 0 16px rgba(0, 0, 10, 0.5);
 font-weight: bold;
 color: #fff;
}
#about #points {
 display: flex;
 justify-content: space-between;
 margin: 5em auto;
}
#about #points .flexBox {
 flex: 1 0 calc(33.333% - 1.5em);
 max-width: calc(33.333% - 1.5rem);
 text-align: center;
 position: relative;
 background: rgba(255, 255, 255, 0.97);
 border-radius: 1rem;
 padding: 2em;
}
#about #points .flexBox h3 {
 font-weight: 700;
 line-height: 1.4;
 font-size: 2.0rem;
 position: relative;
 color: #203a72;
}
#about #points .flexBox h3:after {
 content: "";
 display: block;
 margin: 1em auto;
 height: 7rem;
}
#about #points .flexBox.rain h3:after {
 background: url("../images/icon_rain.svg") no-repeat center center;
 background-size: auto 100%;
}
#about #points .flexBox.train h3:after {
 background: url("../images/icon_train.svg") no-repeat center center;
 background-size: auto 100%;
}
#about #points .flexBox.repeat h3:after {
 background: url("../images/icon_repeat.svg") no-repeat center center;
 background-size: auto 100%;
}
#about #points .flexBox p {
 font-size: 1.5rem;
 word-break: break-all;
 line-height: 1.4;
 text-align: left;
}
#about #cm {
 margin: 0 auto 5em;
}
#about #cm h3 {
 font-weight: 700;
 line-height: 1.4;
 font-size: 2.4rem;
 color: #fff;
}
#about #cm .yt {
 position: relative;
 width: 74%;
 overflow: hidden;
 margin: 1em auto 0;
}
#about #cm .yt:before {
 content: "";
 display: block;
 padding-top: 56.25%;
}
#about #cm .yt iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%)translateY(-50%);
}
#about #howto {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 padding: 5vw;
 position: relative;
 background-image: linear-gradient(0deg, rgba(0, 173, 236, 1) 0%, rgba(255, 244, 85, 1) 60%);
}
#about #howto: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 #howto h3 {
 font-size: 3.0rem;
 font-weight: 600;
 margin-bottom: 1.25em;
}
#about #howto .step {
 position: relative;
 z-index: 5;
}
#about #howto .step li {
 display: flex;
 align-items: stretch;
 text-align: left;
 position: relative;
 margin-bottom: 2.5em;
 border-radius: 1rem;
}
#about #howto .step li:after {
 content: "";
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-right: 30px solid transparent;
 border-left: 30px solid transparent;
 border-top: 20px solid #fff;
 border-bottom: 0;
 position: absolute;
 bottom: -20px;
 left: 0;
 right: 0;
 margin: 0 auto;
}
#about #howto .step li:last-child:after {
 display: none;
}
#about #howto .step li .num {
 flex: 1 0 10rem;
 max-width: 10rem;
 position: relative;
 background: #241C1C;
 border-radius: 1rem 0 0 1rem;
}
#about #howto .step li .num span {
 position: absolute;
 z-index: 2;
 text-align: center;
 color: #fff;
 font-weight: bold;
 display: block;
 font-size: 3.4rem;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
}
#about #howto .step li:last-child .num span:after {
 display: none;
}
#about #howto .step li .box {
 position: relative;
 background: #fff;
 padding: 1.5em;
 flex: 1 0 calc(100% - 10rem);
 border-radius: 0 1rem 1rem 0;
}
#about #howto .step li .box a[target="_blank"]:after {
 content: "";
 display: inline-block;
 background: url("../images/icon_blank_bk.svg") no-repeat;
 background-size: auto 100%;
 height: 1.3em;
 width: 1.3em;
 transform: translateY(2px);
 margin-left: 0.25em;
 opacity: 0.65;
 transition: .2s;
}
#about #howto .step li .box a[target="_blank"]:hover:after {
 opacity: 1;
}
#about #howto .step li h4 {
 font-weight: 600;
 font-size: 1.8rem;
 line-height: 1.2;
 margin-bottom: 0.75em;
}
#about #howto .step li p {
 font-size: 1.5rem;
}
#gallery {
 position: relative;
 z-index: 5;
 padding: 5vw;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 background: url(../images/bg_pink.png) repeat-x center top;
 background-size: auto 100%;
 overflow: hidden;
}
#gallery h2 {
 position: relative;
 z-index: 5;
 margin-bottom: 1em;
}
#gallery h2 span {
 font-size: 3rem;
 white-space: nowrap;
 font-weight: 700;
 display: inline-block;
 letter-spacing: 0;
 position: relative;
}
#gallery .sliderArea {
 position: relative;
 z-index: 10;
}
#gallery .gallery-slide {
 display: flex;
 flex-wrap: wrap;
 position: relative;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 z-index: 5;
}
#gallery .gallery-slide .item {
 margin: 0 1.25vw;
 border-radius: 1.0rem;
 overflow: hidden;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.slick-dots {
 position: relative;
 z-index: 3;
 margin: 1rem auto 0;
 text-align: center;
}
.slick-dots li {
 display: inline-block;
 margin: 0 4px;
}
.slick-dots button {
 padding: 0;
 color: transparent;
 outline: none;
 width: 10px;
 border-radius: 50%;
 border: none;
 height: 10px;
 display: block;
 background: #fff;
 cursor: pointer;
}
.slick-dots .slick-active button {
 background: #b72a2a;
}
#gallery .cloud {
 position: absolute;
 display: block;
 background: url("../images/cloud.png") no-repeat;
 background-size: cover;
 width: 125%;
 padding-top: calc(63.405% * 1.25);
 bottom: -11%;
 left: 14%;
 pointer-events: none;
}
#about #eventInfo {
 background: rgba(255, 255, 255, 0.97);
 padding: 4vw;
 margin: 5vw auto 0;
 border-radius: 1.0rem;
 position: relative;
 z-index: 5;
}
#about #eventInfo dl {
 position: relative;
 margin-bottom: 1em;
 display: flex;
 text-align: left;
 line-height: 1.4;
}
#about #eventInfo dl dt {
 position: relative;
 flex: 1 0 12em;
 max-width: 12em;
}
#about #eventInfo dl dt span {
 color: #fff;
 display: block;
 text-align: center;
 padding: 0.5em;
 line-height: 1.2;
 font-size: 1.4rem;
 background: #241C1C;
}
#about #eventInfo dl dd {
 font-size: 1.9rem;
 font-weight: 500;
 padding: 0.2em 0 0 2.5rem;
 word-break: break-all;
}
#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%;
}
#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: 70%;
}
#about #eventInfo dl.place dd em:first-of-type {
 padding: 0.75em 0;
}
#about #eventInfo dl.place dd ul {
 display: block;
 font-size: 80%;
 margin-top: 1em;
}
#about #eventInfo dl.place dd ul li {
 text-indent: -1em;
 padding-left: 1em;
}
#about #eventInfo dl.spp dd {
 font-size: 1.5rem;
}
#about #eventInfo dl.spp dd span {
 white-space: nowrap;
}
@media screen and (max-width: 999px) {
 #about {
  padding: calc(4rem + 5rem) 1.5rem 4rem;
 }
 #about .inner {
  padding: 0;
 }
 #about h2.copy {
  font-size: 2.2rem;
 }
 #about .lead {
  font-size: 1.4rem;
  margin: 2em 0 0;
 }
 #about #points {
  display: block;
  margin: 2em auto;
 }
 #about #points .flexBox {
  flex: none;
  max-width: 100%;
  padding: 1.5em;
  margin-bottom: 1em;
 }
 #about #points .flexBox h3 {
  font-size: 1.8rem;
 }
 #about #points .flexBox h3:after {
  height: 5.5rem;
 }
 #about #points .flexBox p {
  font-size: 1.4rem;
 }
 #about #cm {
  margin: 0 auto 2em;
 }
 #about #cm h3 {
  font-size: 2.0rem;
 }
 #about #cm .yt {
  width: 100%;
  margin: 0.75em auto 0;
 }
 #about #howto {
  padding: 2.5em 1.5rem;
 }
 #about #howto h3 {
  font-size: 2.0rem;
  margin-bottom: 1em;
 }
 #about #howto .step li {
  margin-bottom: 1.5em;
 }
 #about #howto .step li:last-child {
  margin-bottom: 0;
 }
 #about #howto .step li:after {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 10px solid #fff;
  bottom: -10px;
 }
 #about #howto .step li .num {
  flex: 1 0 5rem;
  max-width: 5rem;
 }
 #about #howto .step li .num span {
  font-size: 2.0rem;
 }
 #about #howto .step li .box {
  flex: 1 0 calc(100% - 5rem);
 }
 #about #howto .step li h4 {
  font-size: 1.6rem;
 }
 #about #howto .step li p {
  font-size: 1.4rem;
 }
 #gallery {
  padding: 2.5em 1.5rem 1.5em;
 }
 #gallery h2 span {
  font-size: 2.0rem;
 }
 #gallery .gallery-slide .item {
  border-radius: 0.8rem;
  box-shadow: none;
  margin: 0 0.5rem;
 }
 #gallery .cloud {
  display: none;
 }
 #about #eventInfo {
  padding: 1.5em;
  margin: 2.5em auto 0;
 }
 #about #eventInfo dl {
  display: block;
  text-align: center;
 }
 #about #eventInfo dl dt {
  flex: none;
  max-width: 100%;
 }
 #about #eventInfo dl dd {
  font-size: 1.7rem;
  padding: 1em 0 0;
 }
 #about #eventInfo dl.place dd {
  display: block;
  text-align: center;
 }
 #about #eventInfo dl.place dd ul {
  display: inline-block;
  text-align: left;
  font-size: 74%;
 }
 #about #eventInfo dl.spp dd {
  font-size: 1.4rem;
 }
 #about #eventInfo dl.spp dd span {
  white-space: nowrap;
  display: inline-block;
 }
}