@charset "UTF-8";

/*
posts */

.posts .imgBox {
  padding-top: 80%;
}
.posts * {
  line-height: 1.5;
}
.posts p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.posts p.copy {
  color: var(--color2);
  font-weight: 600;
}
.posts .ttl {
  color: var(--black);
}
.posts .fees {
  color: var(--red);
  margin-bottom: 1.25em;
}
.posts .fees span {
  display: block;
}
.posts .discount {
  color: var(--red);
  font-weight: 500;
  margin-top: .5em;
}
.posts p.read {
  line-height: 2;
}
.posts p.note {
  font-size: .857rem;
  font-family: var(--gothic);
}

@media (min-width: 768px) {
  .posts .row .imgBox {
    height: 100%;
    margin-bottom: 0;
  }
}


/*
carousel posts */
.carousel.posts .imgBox {
  padding-top: 87.5%;
}
.carousel.posts p {
  margin-top: .75rem;
  margin-bottom: .75rem;
}
.carousel.posts .fee {
  font-weight: 500;
}


/*
box posts */
.carousel-box.posts .box {
  background: rgba(255,255,255,.5);
}
.carousel-box.posts p {
  margin-top: .75rem;
  margin-bottom: .75rem;
}
.carousel-box.posts p.fee {
  margin-bottom: 0;
}



/*
common */
main {
  overflow: hidden;
}
@media (min-width: 992px) {
  .single main .section {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
  }
  .single main .content {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}


/*
header */
.single main header .copy {
  margin: 0 0 .5em;
  color: var(--color2);
  font-weight: 600;
}


/*
image size */
article picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout-alternate picture {
  aspect-ratio: 120 / 77;
}
.layout-column_1 picture {
  aspect-ratio: 330 / 413;
}
.layout-column_2 picture {
  aspect-ratio: 33 / 25;
}
.layout-column_3 picture {
  aspect-ratio: 33 / 20;
}
.layout-slider picture {
  aspect-ratio: 32 / 45;
}
.layout-gallery picture {
  aspect-ratio: 7/5;
}
@media (min-width: 576px) {
  .layout-alternate picture {
    aspect-ratio: 607 / 390;
  }
  .layout-column_1 picture {
    aspect-ratio: 23 / 11;
  }
  .layout-column_2 picture {
    aspect-ratio: 25 / 16;
  }
}


/*
table */
table.table {
  width: 100%;
  font-family: var(--gothic);
  font-size: .929em;
  border-top: 1px solid var(--border2);
}
table.table tr {
  border-bottom: 1px solid var(--border2);
}
table.table th {
  text-align: left;
  white-space: nowrap;
  padding: 1.5em 1.5em 0 0;
}
table.table td {
  padding: 0 0 1.5em 1.5em;
}
@media (max-width: 767px) {
  table.table th {
    display: block;
    padding-right: 0;
  }
  table.table td {
    display: block;
    padding-left: 0;
  }
}