@charset "utf-8";
/* CSS Document */

#contents_title {
  background: url(../imgs/chouki/header_bg.jpg) no-repeat center;
}


/*archive
///////////////////////////////////*/
#archive {
  padding-bottom: 30px;
}
#archive .card {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3rem 2%;
}
.card-wrap a {
  text-decoration: none;
}
.card-header {
  margin-bottom: 0.5rem;
}
.card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card-title {
  font-family: 'Noto Serif JP', '游明朝', 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  font-size: 16px;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.5;
  padding-top: 0.5rem;
}
.card-customer {
  font-size: 0.8rem;
}
@media screen and (max-width: 750px) {
  #archive .card {
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem 2.5%;
  }
  .card-title {
    font-size: 1rem;
  }
}
/*detail
///////////////////////////////////*/
#detail {
  padding-bottom: 30px;
}
#detail .card {
  margin-bottom: 1rem;
}
.example-post-wrap {
  width: 100%;
  object-fit: fill;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  gap: 0 1%;
  position: relative;
  margin-bottom: 5rem;
}
.col_left {
  width: 36.5%;
  position: sticky;
  top: clamp(80px, 122 / 960* 100vw, 122px);
}
.col_right {
  width: 62.5%;
  max-width: 100%;
  margin-left: auto;
}
#detail .post-type-name {
  font-size: 12px;
}
#detail .col_left h3 {
  text-align: left;
  background-position: bottom left;
  line-height: 1.5;
  font-size: 28px;
  font-size: 2rem;
  letter-spacing: 0.1em;
}

.example-photo {
  width: 100%;
  max-width: 600px;
  margin-bottom: 1rem;
}
.example-photo.--double {
  display: flex;
  justify-content: space-between;
  grid: 0 1rem;
}
.example-photo.--double img {
  width: calc(100% / 2  - 0.5rem);
}
#detail .card {
  display: flex;
  justify-content: space-between;
}
#detail .card-wrap {
  width: 250px;
  max-width: 45%;
}
#detail .card-wrap:first-child::before {
  content: "PREV";
  font-size: 1rem;
  display: block;
}
#detail .card-wrap:last-child::before {
  content: "NEXT";
  font-size: 1rem;
  text-align: right;
  display: block;
}
#detail .card-wrap.no-item:first-child::before,
#detail .card-wrap.no-item::before {
  content: "";
}
@media screen and (max-width: 750px) {
  .example-post-wrap {
    display: block;
    margin-bottom: 5rem;
  }
  .col_left {
    width: 100%;
    position: static;
  }
  .col_right {
    width: 100%;
  }
  #detail .col_left h3 {
    font-size: 1.4rem;
    margin-bottom: 5.33333vw;
  }
  #detail .card-wrap {
    width: 40%;
    max-width: none;
  }
  #detail .card-wrap:first-child::before,
  #detail .card-wrap:last-child::before {
    font-size: 0.8rem;
  }
}