@charset "UTF-8";
/* unusual */
.spot > .post-container {
  display: contents;
}
.spot .post-container h3 {
  order: -1;
  margin-bottom: 16px;
}
.post-container * + * {
  margin-top: 16px;
}
.spot-info img {
  margin-bottom: 24px;
}
.spot figure::before{
  content: attr(data-text);
  position: absolute;
  display: block;
  font-size: 14px;
  padding: 0 2px;
  left: -10px;
  top: 8px;
  background: #efe754;
  border: 1px solid #696404;
}
.event-title {
  padding: 4px 8px;
  width: fit-content;
  border: 1px solid #333;
  border-radius: 8px;
  font-weight: 700;
}
.column-wrap {
  position: relative;
  margin-top: 60px;
  padding: 48px 24px 24px;
  background: #fcfae5;
}
#article h2.column-title {
  position: absolute;
  width: max-content;
  top: -40px;
  left: 50%;
  translate: -50%;
  text-align: center;
  color: #333;
  &::before,&::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 35px;
    height: 65px;
    bottom: 0;
    background: url(images/brackets.png) no-repeat;
    background-size: contain;
  }
  &::before {
    left: -40px;
  }
  &::after {
    right: -40px;
    scale: -1 1;
  }
}
#article h2.column-title span {
  font-size: inherit;
}
.em-color {
  color: #4a9ed7;
}
.column-contents {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.column-text {
  display: contents;
}
.hd-column {
  order: -1;
}
.column-ph {
  order: -1;
}
@media screen and (min-width:768px) {
  .pray::before {
    width: 120px;
  }
  .learn::before {
    width: 110px;
    height: 86px;
    right: 0;
  }
  .eat::before {
    width: 100px;
    height: 100%;
    right: 0px;
    top: -50px;
  }
}
@media screen and (min-width:1024px) {
    .spot > .post-container {
      display: inline-block;
    }
    .post-container * + * {
      margin-top: 24px;
    }
    .column-wrap {
      padding: 60px 40px 40px;
    }
    #article h2.column-title {
      display: inline-flex;
      top: -30px;
    }
    .hd-column {
      text-align: center;
    }
}
@media screen and (min-width:1280px) {
  #article h2.column-title {
    top: -24px;
  }
  .column-contents {
    flex-direction: row;
  }
  .column-text {
    display: block;
    width: 48%;
  }
  .column-ph {
    flex-shrink: 0;
    order: 1;
    width: 260px;
  }
  .hd-column {
    margin-bottom: 24px;
    text-align: left;
  }
}