@charset "UTF-8";
aside {
 left: -100%;
}
main {
 width: 100%;
 margin-left: 0;
}
#summer {
 text-align: center;
 padding: calc(7.5rem + 5vw) 5vw 5vw;
}
#summer:before {
 content: "";
 display: block;
 width: 200vw;
 height: 96%;
 background: #fffeee;
 position: absolute;
 left: -50%;
 right: -50%;
 margin: 0 auto;
 top: 30vh;
 z-index: 5;
 border-radius: 100vw 100vw 100vw 100vw;
}
#summer:after {
 content: "";
 display: block;
 background: url("../images/summer/back_blue.jpg") no-repeat center top;
 background-size: 100% auto;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 2;
}
#summer .ttl {
 width: 70%;
 margin: 0 auto 2.5em;
}
#summer .eventPeriod, #summer #program .period {
 display: inline-block;
 position: relative;
 margin-bottom: 1.5em;
}
#summer #program .period:after {
 content: "";
 display: block;
 width: calc(100% + 6em);
 height: calc(100%);
 border: solid 4px #e7da2d;
 position: absolute;
 left: -50%;
 right: -50%;
 margin: 0 auto;
 top: 1em;
 background: rgba(255, 255, 255, 0.85);
 border-radius: 1.8rem;
}
#summer #program #program02 .period:after, #summer #program #program03 .period:after {
 border: solid 4px #AA8EE8;
}
#summer .eventPeriod dt, #summer #program .period dt {
 position: relative;
 z-index: 5;
}
#summer .eventPeriod dt span, #summer #program .period dt span {
 display: inline-block;
 background: #e7da2d;
 line-height: 1.2;
 padding: 0.5em 2em;
 border-radius: 20rem;
 font-weight: bold;
}
#summer .eventPeriod dd, #summer #program .period dd {
 font-size: 130%;
 font-weight: bold;
 padding-top: 1em;
 line-height: 1;
 position: relative;
 z-index: 5;
}
#summer .eventPeriod dd.day {
 font-size: 160%;
 padding-top: 0.75em;
}
#summer .lead {
 font-size: 115%;
 padding-top: 1.5em;
}
#summer .lead p {
 font-weight: bold;
}
#summer #program {
 padding-top: 3em;
}
#summer #program > h2 {
 background: #00a9e4;
 color: #fff;
 font-weight: bold;
 line-height: 1;
 font-size: 150%;
 padding: 0.5em 3.0em;
 display: inline-block;
 border-radius: 20rem;
 margin-bottom: 1.5em;
}
#summer .pNav {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 2em;
}
#summer .pNav li {
 margin: 0 0.5em;
 position: relative;
}
#summer .pNav li a {
 color: #fff;
 background: #e60012;
 display: inline-block;
 padding: 0.5rem 1.2em;
 border-radius: 0.8rem;
 font-size: 120%;
 font-weight: bold;
 white-space: nowrap;
}
#summer .pNav li a:hover {
 background: #000;
}
#summer .pNav li:after {
 content: "";
 display: block;
 margin: 0 auto;
 width: 0;
 height: 0;
 border-left: 0.5em solid transparent;
 border-right: 0.5em solid transparent;
 border-top: 0.5em solid #e60012;
 position: absolute;
 bottom: 1px;
 left: 0;
 right: 0;
 transition: .2s;
}
#summer .pNav li:hover:after {
 border-top: 0.5em solid #000;
}
#summer .pNav li a span {
 display: inline-block;
 font-size: 115%;
 transform: translateY(0.05em);
 margin-right: 0.5em;
 color: #e60012;
 text-align: center;
 position: relative;
 transition: .2s;
}
#summer .pNav li a:hover span {
 color: #000;
}
#summer .pNav li a span:before {
 content: "";
 display: block;
 background: #fff;
 width: 1em;
 height: 1em;
 border-radius: 50%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: -50%;
 right: -50%;
 margin: 0 auto;
 z-index: -1;
}
#summer #program #program01 {
 padding: 0 0 5%;
 position: relative;
}
#summer #program .programTtl {
 font-size: 200%;
 font-weight: bold;
 line-height: 1;
 white-space: nowrap;
 background: #e60012;
 color: #fff;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 padding: 0.5em 0;
}
#summer #program .programTtl span {
 display: inline-block;
 font-size: 100%;
 transform: translateY(0.05em);
 margin-right: 0.5em;
 color: #e60012;
 text-align: center;
 position: relative;
}
#summer #program .programTtl span:before {
 content: "";
 display: block;
 background: #fff;
 width: 1.2em;
 height: 1.2em;
 border-radius: 50%;
 position: absolute;
 top: calc(50% + 1px);
 transform: translateY(-50%)translateX(-1px);
 left: -50%;
 right: -50%;
 margin: 0 auto;
 z-index: -1;
}
#summer #program #program01 .programTtl span:before {
 transform: translateY(-50%)translateX(-1px);
}
#summer #program .period {
 margin: 2em auto 1.5em;
}
#summer #program .period .caution {
 display: inline-block;
 background: #ea5514;
 color: #fff;
 font-size: 70%;
 padding: 0.5em 1em;
 border-radius: 20rem;
 line-height: 1;
 font-weight: bold;
 margin-top: 1em;
}
#summer #program .logo {
 width: 24rem;
}
#summer #program .logo img {
 display: inline-block;
 background: rgba(4, 39, 113, 1.00);
}
#summer #program .disc {
 font-size: 115%;
 padding-top: 1.5em;
 font-weight: bold;
}
#summer #program h4 {
 background: #e60012;
 color: #fff;
 display: inline-block;
 font-weight: bold;
 margin: 2em auto 0;
 padding: 0.5rem 1em;
 border-radius: 20rem;
 font-size: 150%;
}
#summer #program h4 strong {
 font-size: 115%;
 font-weight: bold;
}
#summer #program .howto {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 2em auto 0;
}
#summer #program .howto dt {
 position: relative;
}
#summer #program .howto dt:before {
 content: "";
 display: block;
 background: #7f4f21;
 position: absolute;
 left: -50%;
 right: -50%;
 top: 50%;
 transform: translateY(-50%);
 width: 4em;
 height: 4em;
 border-radius: 50%;
 margin: 0 auto;
}
#summer #program .howto dt span {
 color: #fff;
 font-size: 120%;
 font-weight: bold;
 position: relative;
 width: 2.1em;
 white-space: normal;
 display: block;
 line-height: 1;
 text-align: center;
}
#summer #program .howto dd {
 padding-left: 1.5em;
 font-weight: bold;
}
#summer #program .howto dd strong {
 color: #e60012;
 display: inline-block;
 font-weight: bold;
 font-size: 115%;
}
#summer .map {
 position: relative;
 background: url("../images/summer/map_summer.png") no-repeat;
 background-size: cover;
 padding-top: calc(71.6875% * 0.7);
 margin: 2em auto 0;
 width: 70%;
}
#summer #program .programList {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
 justify-content: space-between;
 margin: 3em auto 0;
}
#summer #program .programList > li {
 flex: 1 0 calc(33.333% - 1em);
 max-width: calc(33.333% - 1em);
 margin-bottom: 1.5em;
 text-align: left;
 position: relative;
 background: #fff;
 padding-bottom: 1rem;
 border-bottom: solid 6px #b28247;
 border-left: solid 1px rgba(178, 130, 71, 0.5);
 border-right: 5px solid rgba(178, 130, 71, 1.00);
}
#summer #program .programList > li.middle {
 flex: 1 0 calc(50% - 1em);
 max-width: calc(50% - 1em);
 margin-bottom: 1.5em;
}
#summer #program .programList > li.large {
 flex: 1 0 64%;
 max-width: 64%;
 margin: 0 auto;
}
#summer #program .programList > li.large .thumb {
 border: 1px solid rgba(35, 24, 21, 0.5);
}
#summer #program .programList > li h4 {
 color: #241c1c;
 background: none;
 margin: 0.5em 0 0;
 font-size: 115%;
 line-height: 1.2;
 padding: 0 0 0 1rem;
}
#summer #program .programList > li h4 span {
 color: #fff;
 background: #e60012;
 display: inline-block;
 padding: 0.1em 0.5em;
 font-weight: bold;
 border: solid 1px #fff;
 margin-right: 0.5em;
 font-size: 120%;
}
#summer #program .programList > li .price {
 position: absolute;
 color: #fff;
 text-align: center;
 display: inline-block;
 line-height: 1.2;
 white-space: nowrap;
 right: 0;
 top: 7em;
}
#summer #program .programList > li.middle .price {
 top: 10em;
}
#summer #program .programList > li.large .price {
 top: 13.5em;
}
#summer #program .programList > li .price:before {
 content: "";
 display: block;
 background: url("../images/summer/tag.svg") no-repeat;
 background-size: cover;
 width: 4.5em;
 height: 4.5em;
 position: absolute;
 top: 50%;
 transform: translateY(-53%);
 left: -50%;
 right: -50%;
 margin: 0 auto;
}
#summer #program .programList > li.large .price:before {
 width: 7em;
 height: 7em;
}
#summer #program .programList > li .price dt {
 font-size: 80%;
 font-weight: bold;
 position: relative;
 z-index: 4;
}
#summer #program .programList > li.large .price dt {
 font-size: 85%;
}
#summer #program .programList > li .price dd {
 font-weight: bold;
 position: relative;
 z-index: 4;
}
#summer #program .programList > li.large .price dd {
 font-size: 175%;
}
#summer #program .programList > li p {
 line-height: 1.5;
 font-size: 90%;
 padding: 1em 1rem 0 1rem;
}
#summer #program .programList > li.somen p, #summer #program .programList > li.mizuteppo p {
 display: flex;
}
#summer #program .programList > li.somen p:after, #summer #program .programList > li.mizuteppo p:after {
 content: "";
 display: block;
 flex: 1 0 14rem;
 max-width: 14rem;
 height: 14rem;
}
#summer #program .programList > li.somen p:after {
 background: url("../images/summer/ex_somen.png") no-repeat;
 background-size: 100% auto;
}
#summer #program .programList > li.mizuteppo p:after {
 background: url("../images/summer/ex_mizuteppo.png") no-repeat;
 background-size: 100% auto;
}
#summer #program .programList > li .ph {
 display: flex;
 align-items: stretch;
 margin-bottom: -0.8rem;
 border-left: solid 2px #fff;
}
#summer #program .programList > li .ph img {
 flex: 1 0 33.333%;
 width: 33.333%;
 border-right: solid 2px #fff;
}
#summer #program .programList > li.large .ph {
 margin: 1em 0;
}
#summer #program .programList > li.large .ph img {
 flex: 1 0 50%;
 width: 50%;
}
#summer #program .programList > li .note {
 background: rgba(229, 228, 224, 1.00);
 padding: 1.2em 1.5em;
 font-size: 80%;
 border-radius: 0.6rem;
 margin: 1.5em auto 0;
 width: calc(100% - 2rem);
}
#summer #program .programList > li .note h5 {
 font-weight: bold;
 font-size: 120%;
 margin-bottom: 0.5em;
}
#summer #program .programList > li .note ul li {
 text-indent: -1em;
 padding-left: 1em;
}
.toBtn {
 position: relative;
 margin: 2em auto 0;
}
.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;
}
#summer #program #program02 .flex, #summer #program #program03 .flex {
 display: flex;
 align-items: center;
 text-align: left;
 padding: 5% 0;
}
#summer #program #program02 .flex .img {
 flex: 1 0 35%;
 max-width: 35%;
 background: url("../images/summer/ph_program02.jpg") no-repeat center center;
 background-size: 100% auto;
 position: relative;
}
#summer #program #program03 .flex .img {
 flex: 1 0 35%;
 max-width: 35%;
 background: url("../images/summer/ph_program03.jpg") no-repeat center center;
 background-size: 100% auto;
 position: relative;
}
#summer #program #program02 .flex .img:before, #summer #program #program03 .flex .img:before {
 content: "";
 display: block;
 padding-top: 75%;
}
#summer #program #program02 .flex .cont, #summer #program #program03 .flex .cont {
 flex: 1 0 65%;
 padding-left: 2.5em;
}
#summer #program #program02 .flex .cont .period, #summer #program #program03 .flex .cont .period {
 margin: 0;
 display: flex;
 align-items: center;
}
#summer #program #program02 .flex .cont .period:after, #summer #program #program03 .flex .cont .period:after {
 display: none;
}
#summer #program #program02 .flex .cont .period dt, #summer #program #program03 .flex .cont .period dt {
 position: relative;
}
#summer #program #program02 .flex .cont .period dt:before, #summer #program #program03 .flex .cont .period dt:before {
 content: "";
 display: block;
 background: #AA8EE8;
 position: absolute;
 left: -50%;
 right: -50%;
 top: 50%;
 transform: translateY(-50%);
 width: 4em;
 height: 4em;
 border-radius: 50%;
 margin: 0 auto;
}
#summer #program #program02 .flex .cont .period dt span, #summer #program #program03 .flex .cont .period dt span {
 color: #fff;
 background: none;
 font-size: 120%;
 font-weight: bold;
 position: relative;
 width: 2.2em;
 white-space: normal;
 display: block;
 line-height: 1;
 text-align: center;
 padding: 0;
}
#summer #program #program02 .flex .cont .period dd, #summer #program #program03 .flex .cont .period dd {
 padding: 0 0 0 1em;
}
#gallery {
 position: relative;
 z-index: 9;
 padding: 5vw;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 /*background: url("../images/summer/back_blue.jpg") no-repeat center top;
 background-size: cover;*/
 overflow: hidden;
 text-align: center;
}
#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;
 margin-bottom: 2.5em;
}
#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 p {
 font-size: 210%;
 font-weight: bold;
 margin: 2em 0;
 line-height: 1.5;
 display: inline;
 border-radius: 0.8rem;
 background: linear-gradient(transparent 70%, #e7da2d 70%);
}
#olcp {
 background: rgba(235, 235, 238, 0.8);
 padding: 5%;
 border-top: solid 2px #000;
 text-align: center;
}
#olcp h2 {
 width: 40%;
 margin: 0 auto 1.5em;
}
#olcp h3 {
 font-weight: bold;
 font-size: 120%;
 margin: 1em 0;
 display: inline-block;
 background: #fff;
 border: solid 1px #000;
 padding: 0.35em 0.5em;
 line-height: 1;
}
#olcp p {
 text-align: left;
}
#olcp .tCenter {
 text-align: center;
}
#olcp ul {
 display: inline-block;
 text-align: left;
 padding: 2em 0 0;
 opacity: 0.75;
}
#olcp ul li dl {
 display: flex;
}
#olcp dl dt:after {
 content: "：";
}
@media screen and (max-width: 999px) {
 #summer {
  padding: calc(2rem + 5rem) 1.5rem 4rem;
 }
 #summer:before {
  top: 8em;
  height: 97%;
 }
 #summer:after {
  background: url("../images/summer/back_blue.jpg") no-repeat center top;
  background-size: auto 100%;
 }
 #summer .inner {
  padding: 0;
 }
 #summer .ttl {
  width: 100%;
  margin: 0 auto 1.5em;
 }
 #summer .pNav {
  margin-bottom: 1em;
 }
 #summer .pNav li {
  margin: 0 0.075em 1em;
  width: 80%;
 }
 #summer .pNav li a {
  display: block;
  font-size: 80%;
  letter-spacing: 0;
  padding: 0.6rem 0.8em;
  border-radius: 0.4rem;
 }
 #summer .pNav li:after {
  bottom: -0.5em;
 }
 #summer .eventPeriod, #summer #program .period {
  display: block;
 }
 #summer .eventPeriod:after, #summer #program .period:after {
  width: 100%;
  border: solid 3px #e7da2d;
  border-radius: 1.2rem;
 }
 #summer .eventPeriod dt span, #summer #program .period dt span {
  font-size: 80%;
 }
 #summer .eventPeriod dd, #summer #program .period dd {
  font-size: 95%;
 }
 #summer .eventPeriod dd.day {
  font-size: 130%;
 }
 #summer .lead {
  font-size: 100%;
  padding-top: 1em;
 }
 #summer #program {
  padding-top: 1.5em;
 }
 #summer #program > h2 {
  font-size: 120%;
  display: block;
  margin-bottom: 1.25em;
 }
 #summer #program #program01 {
  padding: 0 0 2.5rem;
 }
 #summer #program .programTtl {
  font-size: 130%;
  padding: 0.75em 0;
 }
 #summer #program .period {
  margin: 1.5em auto 1em;
 }
 #summer #program .logo {
  width: 18rem;
  margin: 0 auto 0.5em;
 }
 #summer #program .disc {
  font-size: 85%;
  padding-top: 1.25em;
  text-align: left;
 }
 #summer #program h4 {
  display: block;
  margin: 1.5em auto 0;
  font-size: 100%;
 }
 #summer #program .howto {
  margin: 1.5em auto 0;
 }
 #summer #program .howto dd {
  text-align: left;
  line-height: 1.5;
 }
 #summer .map {
  padding-top: 71.6875%;
  margin: 1.5em auto 0;
  width: 100%;
 }
 #summer #program .programList {
  margin: 1.5em auto 0;
 }
 #summer #program .programList > li {
  flex: none;
  max-width: 100%;
  margin-bottom: 1.25em;
  border-bottom: solid 4px #b28247;
  border-right: 3px solid rgba(178, 130, 71, 1.00);
 }
 #summer #program .programList > li.middle {
  flex: none;
  max-width: 100%;
  margin-bottom: 1.25em;
 }
 #summer #program .programList > li.large {
  flex: none;
  max-width: 100%;
 }
 #summer #program .programList > li h4 {
  font-size: 100%;
  letter-spacing: 0;
  white-space: nowrap;
 }
 #summer #program .programList > li h4 strong {
  font-size: 100%;
 }
 #summer #program .programList > li h4 span {
  margin-right: 0.35em;
  font-size: 115%;
 }
 #summer #program .programList > li .price {
  top: 5.7em;
 }
 #summer #program .programList > li.middle .price {
  top: 15em;
 }
 #summer #program .programList > li.large .price {
  top: 21.5em;
 }
 #summer #program .programList > li.large .price:before {
  width: 6em;
  height: 6em;
 }
 #summer #program .programList > li.large .price dt {
  font-size: 80%;
 }
 #summer #program .programList > li.large .price dd {
  font-size: 100%;
 }
 #summer #program .programList > li p {
  font-size: 85%;
 }
 #summer #program .programList > li.somen p, #summer #program .programList > li.mizuteppo p {
  padding: 1em 1rem 0 1rem;
 }
 #summer #program .programList > li .note {
  padding: 1.2em 1em;
  margin: 1.25em auto 0;
 }
 .toBtn {
  text-align: center;
 }
 .toBtn a {
  font-size: 1.5rem;
  padding: 0.75em 2.5em 0.75em 1.5em;
 }
 #summer #program #program02 .flex, #summer #program #program03 .flex {
  display: block;
  padding: 2.5rem 0;
 }
 #summer #program #program02 .flex .img {
  flex: none;
  max-width: 100%;
 }
 #summer #program #program03 .flex .img {
  flex: none;
  max-width: 100%;
 }
 #summer #program #program02 .flex .cont, #summer #program #program03 .flex .cont {
  flex: none;
  padding: 1em 0 0;
 }
 #summer #program #program02 .flex .cont .period dt span, #summer #program #program03 .flex .cont .period dt span {
  font-size: 120%;
  width: 2.2em;
 }
 #summer #program #program02 .flex .cont .period dd, #summer #program #program03 .flex .cont .period dd {
  padding: 0 0 0 1.25em;
  font-size: 120%;
 }
 #gallery {
  padding: 0 1.5rem 2.5em;
 }
 #gallery h2 span {
  font-size: 2.0rem;
 }
 #gallery .sliderArea {
  margin-bottom: 1.5em;
 }
 #gallery .gallery-slide .item {
  border-radius: 0.8rem;
  box-shadow: none;
  margin: 0 0.5rem;
 }
 #gallery p {
  font-size: 110%;
  margin: 1.15em 0 1.5em;
 }
 #olcp {
  padding: 2.5rem 1.5rem;
 }
 #olcp h2 {
  width: 100%;
  margin: 0 auto 1em;
 }
 #olcp h3 {
  font-size: 110%;
 }
 #olcp p {
  font-size: 90%;
  text-align: left;
 }
 #olcp ul {
  padding: 1em 0 0;
 }
 #olcp ul li dl {
  display: block;
  text-align: center;
  margin: 0.5em 0 0;
  font-size: 85%;
 }
 #olcp dl dt {
  font-weight: bold;
 }
 #olcp dl dt:after {
  display: none;
 }
}