@charset "utf-8";
/* ==========================================================================
   結婚式レポート一覧（/report/）の追加スタイル

   これは手書きのファイル。style_sass_report-v4.1 の Sass 生成物ではない
   （gulp が書くのは report.css と style.css だけ）。

   見た目の土台は /contents/css/library.css をそのまま読んで共有している。
   ここに置くのは、レポート固有の項目（神社バッジ・会場・人数・イニシャル・
   件数の併記・会場の開閉）と、画像の縦横比の差だけ。
   新しい色や書体は作らず、library.css で既に使われている値だけを使う。
   ========================================================================== */

/* --------------------------------------------------------- カードの写真 */

/* 一覧カードの写真は report/img/<神社>/<神社>_pic<NN>.jpg で 480×318。
   library.css は 16:9（56.25%）を前提にしているので、そのままだと
   上下が15%ほど切れる。レポートの写真に合わせて 3:2 に直す。 */
.rep-card .lib-card__thumb {
  padding-top: 66.25%;
}

.lib-grid--pickup .rep-card .lib-card__thumb {
  padding-top: 0;
  aspect-ratio: 480/318;
}

/* --------------------------------------------------------- 神社バッジ */

/* library.css の .lib-card__media は ::before にアイコンを出す前提で
   右に7pxの余白を取っている。レポートには媒体アイコンが無いので消す。 */
.rep-card__shrine::before {
  display: none;
}

.rep-card__shrine {
  font-family: sans-serif;
  font-size: 13px;
  color: #ae2424;
}

/* ------------------------------------------------------- カードの足元 */

.rep-card__meta {
  gap: 6px 10px;
}

/* 会場名は長いものが多いので1行を占有させる */
.rep-card__venue {
  flex: 0 0 100%;
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

.rep-card__meta .lib-card__tags {
  margin: 0;
  flex: 0 1 auto;
}

/* 人数タグ。.lib-card__tag はマガジンと共通のクラスなので、
   レポートのカードの中だけに効くようにしておく */
.rep-card .lib-card__tag {
  font-size: 12px;
}

.rep-card__couple {
  font-family: sans-serif;
  font-size: 12px;
  color: #907a51;
  margin: 0 0 0 auto;
}

/* ------------------------------------------------------------- 絞り込み */

/* library.css の既定（PC 48px / SP 32px）はマガジン向けの広さ。
   レポートは絞り込みが3軸しかないので、おすすめ枠との間を詰める。
   ブレークポイントは library.css と同じ max-width: 767px に合わせている。 */
.lib-filter {
  padding-top: 18px;
}

@media screen and (max-width: 767px) {
  .lib-filter {
    padding-top: 12px;
  }
}

/* 会場名は「東京 アンティカ・オステリア・デル・ポンテ」のように長いものがある。
   狭い画面でボタン1つが画面幅を超えないように、折り返しを許しておく。 */
.lib-filter .lib-tags dd,
.rep-facet__more-list dd {
  max-width: 100%;
}

.lib-filter .lib-tag-btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.rep-num {
  font-size: 11px;
  color: #666;
}

.lib-tag-btn.is-active .rep-num {
  color: #fff;
}

/* 他の軸で絞り込んだ結果0件になった選択肢。消すとレイアウトが跳ねるので
   残したまま押せなくする。選択中のものは JS 側で活性のままにしてある。 */
.lib-tag-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ------------------------------------------------------- 会場の開閉 */

/* 会場は16種あり、1件しかないものを並べると選びにくい。
   件数の少ないものはここに畳む。 */
.rep-facet__more-wrap {
  flex: 0 0 100%;
  margin: 0;
}

.rep-facet__more {
  margin: 0;
}

.rep-facet__more > summary {
  display: inline-block;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #ae2424;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

.rep-facet__more > summary::-webkit-details-marker {
  display: none;
}

.rep-facet__more > summary::marker {
  content: "";
}

.rep-facet__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
}

.rep-facet__more-list dd {
  margin: 0;
}

/* ------------------------------------------------ 神社から探す（リンク） */

/* 神社の絞り込みは JS ではなく神社別の一覧ページへのリンク（静的）。
   button と同じ見た目にするため、a にだけ足りない指定を補う。 */
a.lib-tag-btn {
  display: inline-block;
  text-decoration: none;
}
a.lib-tag-btn:link,
a.lib-tag-btn:visited {
  color: #333;
}
a.lib-tag-btn.is-active:link,
a.lib-tag-btn.is-active:visited {
  color: #fff;
}

/* トップは新着だけを載せるので、全件への道筋を一覧の下に添える */
.rep-all-note {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  text-align: center;
  padding-top: 24px;
}