@charset "UTF-8";
/* unusual */
#article h2.block-heading {
  position: relative;
  margin: 0 auto 32px;
  width: fit-content;
  font-size: clamp(1.125rem, 1.034rem + 0.39vw, 1.375rem);
  text-align: center;
  &::before,&::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 80px;
    background: url(images/brackets.png) no-repeat;
    background-size: contain;
  }
  &::before {
    top: 50%;
    left: -12px;
    translate: 0 -50%;
  }
  &::after {
    top: 50%;
    right: -12px;
    translate: 0 -50%;
    scale: -1 1;
  }
}
.spot-block + .spot-block {
  margin-top: 60px;
}
.spot-block > * + * {
  margin-top: 24px;
}
.spot-block .col-2 + .col-2 {
  margin-top: 16px;
}
.gallery-narrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
  margin-top: 24px;
  margin-bottom: 0;
}
.spot-block .post-container {
  margin-bottom: 24px;
}
 figure + figure {
  margin-top: 24px;
}
.spot-info {
  position: relative;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #333;
  font-size: 15px;
  &::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 24px;
    background: #efe754;
    right: 16px;
    top: -16px;
  }
}
.note {
  display: block;
  margin-top: 4px;
  margin-bottom: 8px;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 14px;
  line-height: 1.44;
}
.program > * + * {
  margin-top: 8px;
}
.program-title {
  font-weight: 700;
}
.program-text {
  font-size: 15px;
}
.event-title {
  width: fit-content;
  margin: 0 auto 8px;
  font-weight: 700;
  border-bottom: 1px solid #333;
}
.copy {
  text-align: right;
  font-size: 12px;
}
#article .text-left {
  width: fit-content;
  margin-inline: initial;
}
@media screen and (min-width:768px) {
  #article .text-left {
    width: fit-content;
    margin-inline: initial;
    margin-left: 40px;
  }
  #article h2.block-heading {
    &::before {
      top: 50%;
      left: -40px;
      translate: 0 -50%;
    }
    &::after {
      top: 50%;
      right: -40px;
      translate: 0 -50%;
    }
  }
}
@media screen and (min-width:1024px) {
  .spot-contents .wide p {
    flex-shrink: 0;
  }
  .spot-contents .wide p.block-info_text {
    width: max-content;
  }
  .spot-contents-wide {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
  }
  .spot-contents-wide .post-container {
    width: 100%;
  }
  .program {
    position: relative;
    flex-shrink: 0;
    max-width: 280px;
    margin-top: 0;
    margin-left: 24px;
    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 132px;
      height: 56px;
      background: url(images/balloon.png) no-repeat;
      background-size: contain;
      left: -37px;
      top: -30px;
    }
  }
  .event {
    flex-shrink: 0;
    max-width: 280px;
    margin-top: 0;
    margin-left: 24px;
  }
  .event p {
    margin-top: 0;
  }
}
@media screen and (min-width:1240px) {
  .spot-contents {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }
  .spot-contents > * {
    width: 48%;
  }
  #article h2.block-heading::before {
    left: -40px;
  }
  #article h2.block-heading::after {
    right: -40px;
  }
  .spot-ph01 figure:first-of-type {
    width: 44%;
  }
  .spot-ph01 figure:nth-of-type(2) {
    width: 48%;
  }
  .spot-ph01 figure:nth-of-type(3) {
    width: 45%;
  }
  .spot-ph01 figure:last-of-type {
    width: 44%;
  }
  .spot-ph02 figure:first-of-type {
    width: 48%;
  }
  .spot-ph02 figure:nth-of-type(2) {
    width: 44%;
  }
  .spot-ph02 figure:nth-of-type(3) {
    width: 50%;
  }
  .spot-ph02 figure:last-of-type {
    width: 40%;
  }
  .spot-ph02 .gallery-narrow figure:first-of-type {
    width: 100%;
   }
  .spot-ph02 .gallery-narrow figure:last-of-type {
    width: 70%;
   }
   .spot-ph03 figure:first-of-type {
    width: 58%;
  }
  .spot-ph03 figure:nth-of-type(2) {
    width: 38%;
  }
  .spot-contents .block-info_content,
  .spot-contents-wide .block-info_content {
    margin-top: 16px;
  }
  .spot-info::before {
    width: 16px;
    height: 32px;
  }
  .spot-contents-wide {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 24px;
  }
  .spot-contents-wide .post-container {
    width: 80%;
  }

}