@charset "UTF-8";
aside {
 left: -100%;
}
main {
 width: 100%;
 margin-left: 0;
}
#access {
 padding: 0;
 background: linear-gradient(0deg, rgb(0, 173, 236) 0%, rgb(255, 244, 85) 60%) rgb(255, 241, 0);
}
#access:before {
 content: "";
 display: block;
 background: url(../images/texture.jpg) repeat;
 background-size: 100% auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.3;
}
.pageHeader {
 background: url("../images/bg_access.jpg") no-repeat center center;
 background-size: cover;
}
#access .inner {
 padding: 0 5vw;
 text-align: center;
}
#access #place .wideTtl {
 margin: 0 calc(50% - 50vw) 2.5em;
}
#access #place .wideTtl span:before {
 content: "";
 display: block;
 background: url("../images/icon_place.svg") no-repeat center top;
 background-size: 100% auto;
 height: 1.2em;
 width: 1.2em;
 margin: 0 auto 0.5em;
 opacity: 0.85;
}
#access #root .wideTtl span:before {
 content: "";
 display: block;
 background: url("../images/icon_pin.svg") no-repeat center top;
 background-size: auto 100%;
 height: 1.2em;
 width: 1.2em;
 margin: 0 auto 0.5em;
 opacity: 0.85;
}
#access #parkMap .wideTtl span:before {
 content: "";
 display: block;
 background: url("../images/icon_map.svg") no-repeat center top;
 background-size: auto 100%;
 height: 1.2em;
 width: 1.2em;
 margin: 0 auto 0.5em;
 opacity: 0.85;
}
#access #locker .wideTtl span:before {
 content: "";
 display: block;
 background: url("../images/icon_baggage.svg") no-repeat center top;
 background-size: auto 100%;
 height: 1.2em;
 width: 1.2em;
 margin: 0 auto 0.5em;
 opacity: 0.85;
}
.address {
 font-size: 1.9rem;
 font-weight: 500;
}
.address em {
 display: block;
 font-weight: 400;
 padding-top: 0.5em;
}
.address em:first-of-type {
 padding: 0.75em 0 0.25em;
 font-size: 85%;
}
.gMap {
 margin: 2.5em auto 0 !important;
 overflow: hidden;
 height: 34rem;
 border-radius: 1rem;
}
.gMap iframe {
 width: 100%;
 height: 100%;
}
#root {
 text-align: left;
 padding-bottom: 5vw;
}
#root .central {
 display: block;
 text-align: center;
}
#root .central ul {
 display: inline-block;
 text-align: left;
 background: #fff;
 border-radius: 1.0rem;
 padding: 1.5em 5em;
}
#root .central ul li {
 background: url("../images/icon_train_blue.svg") no-repeat left center;
 background-size: auto 1.1em;
 padding: 0 0 0 1.4em;
 margin-bottom: 0.25em;
}
#root .central ul li:last-child {
 margin-bottom: 0;
}
#root .box {
 background: rgba(255, 255, 255, 0.97);
 padding: 2em;
 border-radius: 1rem;
 margin-bottom: 1.5em;
}
#root h4 {
 font-size: 2.2rem;
 font-weight: 600;
 margin: 0 0 2rem;
 line-height: 1;
 white-space: nowrap;
 padding-left: 1.5em;
 position: relative;
}
#root h4.train {
 background: url("../images/icon_train_blue.svg") no-repeat left center;
 background-size: auto 1em;
}
#root h4.car {
 background: url("../images/icon_car_blue.svg") no-repeat left center;
 background-size: auto 0.9em;
}
#root h4.bicycle {
 background: url("../images/icon_bicycle_blue.svg") no-repeat left center;
 background-size: auto 0.8em;
}
#root .illMap {
 height: 20rem;
 overflow: hidden;
 margin: 2em 0 0;
}
#rootDetail {
 position: relative;
 margin: 5vw auto 2.5em;
}
#rootDetail .subTtl {
 text-align: center;
 font-weight: bold;
 font-size: 2.8rem;
 margin-bottom: 1em;
}
.carousel {
 position: relative;
 z-index: 5;
}
.carousel > input {
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 width: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
}
.carousel > input:nth-of-type(6):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -500%;
}
.carousel > input:nth-of-type(6):checked ~ .carousel_slides .carousel_slide:nth-of-type(6) {
 height: 100%;
}
.carousel > input:nth-of-type(5):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -400%;
}
.carousel > input:nth-of-type(5):checked ~ .carousel_slides .carousel_slide:nth-of-type(5) {
 height: 100%;
}
.carousel > input:nth-of-type(4):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -300%;
}
.carousel > input:nth-of-type(4):checked ~ .carousel_slides .carousel_slide:nth-of-type(4) {
 height: 100%;
}
.carousel > input:nth-of-type(3):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -200%;
}
.carousel > input:nth-of-type(3):checked ~ .carousel_slides .carousel_slide:nth-of-type(3) {
 height: 100%;
}
.carousel > input:nth-of-type(2):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -100%;
}
.carousel > input:nth-of-type(2):checked ~ .carousel_slides .carousel_slide:nth-of-type(2) {
 height: 100%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: 0%;
 height: 100%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel_thumbnails li:nth-of-type(1) label, .carousel > input:nth-of-type(2):checked ~ .carousel_thumbnails li:nth-of-type(2) label, .carousel > input:nth-of-type(3):checked ~ .carousel_thumbnails li:nth-of-type(3) label, .carousel > input:nth-of-type(4):checked ~ .carousel_thumbnails li:nth-of-type(4) label, .carousel > input:nth-of-type(5):checked ~ .carousel_thumbnails li:nth-of-type(5) label, .carousel > input:nth-of-type(6):checked ~ .carousel_thumbnails li:nth-of-type(6) label, .carousel > input:nth-of-type(7):checked ~ .carousel_thumbnails li:nth-of-type(7) label, .carousel > input:nth-of-type(8):checked ~ .carousel_thumbnails li:nth-of-type(8) label, .carousel > input:nth-of-type(9):checked ~ .carousel_thumbnails li:nth-of-type(9) label, .carousel > input:nth-of-type(10):checked ~ .carousel_thumbnails li:nth-of-type(10) label {
 background: #e62310;
 color: #fff;
}
.carousel_thumbnails {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.carousel_thumbnails li {
 flex: 1 0 calc(25% - 5px);
 max-width: calc(25% - 5px);
 transition: all 300ms ease-in-out;
}
.carousel_thumbnails label {
 display: block;
 position: relative;
 text-align: center;
 font-size: 1.7rem;
 line-height: 1.3;
 padding: 1.5rem 0;
 font-weight: 700;
 background: #fff;
 border: solid 3px #e62310;
 color: #e62310;
 border-radius: 1rem;
}
.carousel_thumbnails label span {
 display: block;
 font-size: 85%;
 letter-spacing: 0.025em;
 white-space: nowrap;
}
.carousel_thumbnails label em {
 display: inline-block;
 font-size: 70%;
 font-weight: bold;
 padding-left: 0.25em;
 line-height: 1;
 letter-spacing: 0.05em;
}
.carousel_thumbnails label:hover, .carousel_thumbnails label:focus {
 cursor: pointer;
}
.carousel_slides {
 position: relative;
 z-index: 1;
 padding: 0;
 margin: 0;
 overflow: hidden;
 white-space: nowrap;
 box-sizing: border-box;
 display: flex;
}
.carousel_slide {
 position: relative;
 display: block;
 flex: 1 0 100%;
 width: 100%;
 height: 0;
 overflow: hidden;
 transition: .3s;
 vertical-align: top;
 box-sizing: border-box;
 white-space: normal;
 padding: 2em 0 0;
}
.carousel_slide h3 {
 font-weight: bold;
 font-size: 2.2rem;
 margin-bottom: 1em;
 color: #e62310;
}
.carousel_slide h3:before {
 content: "■";
 color: #e62310;
 padding-right: 0.25em;
 font-size: 85%;
}
.carousel_slide ul {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
}
.carousel_slide ul > li {
 flex: 1 0 calc(33.333% - 1.5rem);
 max-width: calc(33.333% - 1.5rem);
 margin: 0 calc(4.5rem / 2) calc(4.5rem / 2) 0;
 position: relative;
}
.carousel_slide ul > li:nth-child(3n) {
 margin: 0 0 calc(4.5rem / 2) 0;
}
.carousel_slide ul > li .thumb {
 border-radius: 1rem;
 overflow: hidden;
 position: relative;
 background: #fff;
}
.carousel_slide ul > li .thumb:before {
 content: "";
 display: block;
 padding-top: 75%;
}
.carousel_slide ul > li .thumb img {
 width: 101%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
}
.carousel_slide ul > li p {
 padding: 0.75em 0 0 3.5rem;
 font-weight: bold;
 line-height: 1.5;
 position: relative;
}
.carousel_slide ul > li p:before {
 content: "00";
 text-align: center;
 font-size: 1.7rem;
 background: #e62310;
 color: #fff;
 width: 2.7rem;
 height: 2.7rem;
 border-radius: 50%;
 position: absolute;
 line-height: 1.5;
 left: 0;
 top: 0.75em;
}
.carousel_slide ul > li:nth-child(1) p:before {
 content: "1";
}
.carousel_slide ul > li:nth-child(2) p:before {
 content: "2";
}
.carousel_slide ul > li:nth-child(3) p:before {
 content: "3";
}
.carousel_slide ul > li:nth-child(4) p:before {
 content: "4";
}
.carousel_slide ul > li:nth-child(5) p:before {
 content: "5";
}
.carousel_slide ul > li:nth-child(6) p:before {
 content: "6";
}
.carousel_slide ul > li:nth-child(7) p:before {
 content: "7";
}
.carousel_slide ul > li:nth-child(8) p:before {
 content: "8";
}
.carousel_slide ul > li:nth-child(9) p:before {
 content: "9";
}
.carousel_slide ul > li:nth-child(10) p:before {
 content: "10";
}
#parkMap {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 position: relative;
 background: url(../images/bg_pink.png) repeat-x center bottom;
 background-size: auto 100%;
 overflow: hidden;
 padding: 0 5vw calc(5vw + 1.5em);
}
#parkMap .wideTtl {
 margin: 0 calc(50% - 50vw) 2.5em;
}
#parkMap .cloud {
 position: absolute;
 display: block;
 background: url(../images/cloud.png) no-repeat;
 background-size: cover;
 width: 100%;
 padding-top: calc(63.405%* 1.0);
 bottom: -13%;
 left: 20%;
}
#parkMap .flex {
 display: flex;
 align-items: center;
 position: relative;
 z-index: 5;
}
#parkMap .flex .map {
 flex: 1 0 50%;
 max-width: 50%;
 padding: 5px;
 background: #fff;
}
#parkMap .flex .pins {
 flex: 1 0 50%;
 text-align: left;
 padding-left: 5em;
}
#parkMap .flex .pins li {
 margin-bottom: 0.75em;
 font-size: 1.7rem;
 font-weight: 600;
}
#parkMap .flex .pins li span {
 font-family: 'Fugaz One';
 letter-spacing: 0.025em;
 font-size: 130%;
 position: relative;
 width: 1.4em;
 height: 1.4em;
 border: solid 1px #111;
 border-radius: 50%;
 line-height: 1.4em;
 text-align: center;
 display: inline-block;
 margin-right: 0.35em;
 transform: translateY(0.1em);
 background: #fff;
}
#locker {
 position: relative;
 z-index: 2;
 color: #4c4c4c;
 display: block;
 text-align: center;
}
#locker h5 {
 font-size: 1.5rem;
 font-weight: bold;
 margin-bottom: 0.75em;
}
#locker ul {
 display: inline-block;
 text-align: left;
}
#locker ul li {
 text-indent: -1em;
 padding-left: 1em;
 line-height: 1.4;
 margin-bottom: 0.35em;
 color: #fff;
}
@media screen and (max-width: 999px) {
 #access {
  padding: 0 1.5rem;
 }
 #access .inner {
  padding: 0;
 }
 .address {
  font-size: 1.8rem;
 }
 .gMap {
  margin: 1.5em calc(50% - 50vw) 0 !important;
  height: 34rem;
  border-radius: 0;
  width: 100vw;
 }
 .gMap iframe {
  width: 100%;
  height: 100%;
 }
 #root {
  padding-bottom: 1.5em;
 }
 #root .wideTtl {
  margin: 0 calc(50% - 50vw) 2.5em;
 }
 #root .box {
  padding: 1.5em 1.5em;
 }
 #root h4 {
  font-size: 2.0rem;
 }
 #root .illMap {
  height: 30rem;
  margin: 1.5em 0 0;
 }
 #rootDetail {
  margin: 2em auto 0;
 }
 #rootDetail .subTtl {
  font-size: 2.2rem;
  margin-bottom: 0.75em;
  line-height: 1.5;
 }
 .carousel_thumbnails li {
  flex: 1 0 calc(50% - 2px);
  max-width: calc(50% - 2px);
  margin-bottom: 4px;
 }
 .carousel_thumbnails label {
  font-size: 1.4rem;
 }
 .carousel_thumbnails label span {
  font-size: 90%;
 }
 .carousel_slide {
  padding: 1em 0 0;
 }
 .carousel_slide h3 {
  font-size: 2.0rem;
  margin-bottom: 0.75em;
 }
 .carousel_slide ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
 }
 .carousel_slide ul > li {
  flex: 1 0 calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem);
  margin: 0 1rem 1.5rem 0;
 }
 .carousel_slide ul > li:nth-child(3n) {
  margin: 0 1rem 1.5rem 0;
 }
 .carousel_slide ul > li:nth-child(even) {
  margin: 0 0 1.5rem 0;
 }
 .carousel_slide ul > li .thumb {
  border-radius: 0.4rem;
 }
 .carousel_slide ul > li p {
  padding: 0.5em 0 0 3.0rem;
  font-size: 1.4rem;
 }
 .carousel_slide ul > li p:before {
  font-size: 1.6rem;
  width: 2.4rem;
  height: 2.4rem;
  top: 0.5em;
 }
 #parkMap {
  padding: 0 1.5rem 1.5em;
 }
 #parkMap .wideTtl {
  margin: 0 calc(50% - 50vw);
 }
 #parkMap .cloud {
  display: none;
 }
 #parkMap .flex {
  display: block;
 }
 #parkMap .flex .map {
  flex: none;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0;
 }
 #parkMap .flex .pins {
  flex: none;
  padding: 1.5em 0 0;
 }
 #parkMap .flex .pins li {
  margin-bottom: 0.75em;
  font-size: 1.5rem;
  font-weight: 600;
  padding-left: 1em;
 }
 #parkMap .flex .pins li span {
  font-size: 120%;
  background: rgba(255, 255, 255, 0.88);
 }
}