@charset "UTF-8";
/* いしのなかにいる */
.sp_none {
  display: inherit;
}
@media only screen and (max-width: 959px) {
  .sp_none {
    display: none;
  }
}

.pc_none {
  display: none;
}
@media only screen and (max-width: 959px) {
  .pc_none {
    display: inherit;
  }
}

h2 {
  margin: 2em auto 2em;
}

.pamphlet_work_list,
.poster_work_list {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-template-columns: masonry;
}
.pamphlet_work_list li,
.poster_work_list li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pamphlet_work_list li ._label,
.poster_work_list li ._label {
  padding-left: 20px;
  display: block;
  line-height: 1.5;
  margin-bottom: 1ex;
  font-weight: 600;
  position: relative;
  flex-grow: 1;
}
.pamphlet_work_list li ._label::before,
.poster_work_list li ._label::before {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50% 50%;
  width: 3px;
  aspect-ratio: 1/1;
  border: 2px solid #333333;
  left: 0.7ex;
  top: 1ex;
}
.pamphlet_work_list li ._img,
.poster_work_list li ._img {
  position: relative;
}
.pamphlet_work_list li a,
.poster_work_list li a {
  display: flex;
  align-items: center;
  aspect-ratio: 848/1200;
  position: relative;
  overflow: hidden;
  box-shadow: 14px 14px 30px rgba(0, 0, 0, 0.1333333333);
  border-radius: 3px;
}
.pamphlet_work_list li a img,
.poster_work_list li a img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
.pamphlet_work_list li a img._cover,
.poster_work_list li a img._cover {
  object-fit: cover;
  position: absolute;
  transform: scale(1.1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(10px);
}

.pamphlet_work_list li ._img::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  aspect-ratio: 3/4;
  width: 16.6%;
  background: url(../img/icon_pamphlet.avif) 0% 100%/contain no-repeat;
}

.poster_work_list li ._img::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  aspect-ratio: 36/50;
  width: 10%;
  background: url(../img/icon_pin.webp) 0% 100%/contain no-repeat;
  transform: translateY(-50%);
}
.poster_work_list li a {
  border: 10px solid #ffffff;
  background: #ebe9ea;
}

/* ===== レスポンシブ ===== */
@media only screen and (max-width: 959px) {
  .pamphlet_work_list,
  .poster_work_list {
    gap: 40px;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
    margin: 1.5em auto;
  }
  .pamphlet_work_list,
  .poster_work_list {
    gap: 30px 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
/* ===== 公開前チェックの修正 ===== */
/* ポスターの画鋲は画像上端から半分はみ出すと、タイトルの末尾（「（オモテ）」等）に重なるので、
   カードの内側へ下げる。はみ出しはタイトルと画像の間（1ex）に収まる量だけ残す */
.poster_work_list li ._img::after {
  transform: translateY(-14%);
}

/* 横長の作品：ぼかした拡大画像で埋めると読み込み途中に見えるので、白地の中央に置く */
.pamphlet_work_list li a._landscape,
.poster_work_list li a._landscape {
  background: #ffffff;
}

@media only screen and (max-width: 767px) {
  /* 1列なので縦をそろえる必要がない。枠を作品の高さに合わせる */
  .pamphlet_work_list li a._landscape,
  .poster_work_list li a._landscape {
    aspect-ratio: auto;
  }
  /* 2行の見出しも文字幅に合わせて中央に置く。2つ目の見出しは上を空けてセクションの切れ目を見せる */
  .content_section > h2.title_dotline {
    max-width: 11em;
    margin: 64px auto 22px;
    text-align: center;
  }
}
/* お問い合わせボタン上の空きを他の実績ページ（約 80px）にそろえる */
@media only screen and (min-width: 960px) {
  .poster_work_list + .btn_centered,
  .pamphlet_work_list + .btn_centered {
    padding-top: 80px;
  }
}

/*# sourceMappingURL=graphic.css.map */