@charset "UTF-8";

/* ==========================================================================
   cle-news.css — お知らせの一覧と詳細

   効く面は3枚。どれも ecforce のテーマテンプレート。

     /shop/informations                    … 全件の一覧（informations/index）
     /shop/information_categories/{slug}   … カテゴリー別の一覧（同 show）
     /shop/information/{slug}              … 記事の詳細（informations/show）

   デザインコーディングにこの3枚は無い。ショッピングガイド・よくある質問と
   同じ骨格（cle-page.css の共通パーツ）に寄せて、トンマナだけ合わせてある。

   土台は cle-page.css。このファイルには「お知らせにしか無いもの」だけを置く。
   借りているものは次のとおりで、ここでは寸法を持たない。

     .cle-page__flow.--plain             … 写真を敷かないページの地（1節）
     .cle-page__wrap / .cle-page__block  … 幅と節の余白（同）
     .cle-page__top                      … ページヘッドの帯（2節）
     .cle-page__head                     … 中央寄せの見出し（同）
     .cle-crumb                          … パンくず（3節。テンプレートが出す）
     .cle-btn.--outline                  … 前後の記事のボタン（4節）
     .cle-ptag                           … タグのチップ（5節）
     .cle-products__pager                … ページ送り（cle-list.css 7節）

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。
     指定はすべて .cle-news-index / .cle-news-article の下に閉じてあるので、
     他のページで読まれても影響は出ない。JSは要らない。

   ■ TOPページの News の帯とは別のファイル
     あちらは cle-top.css の11節（.cle-news）で、TOPでしか読まれない。
     行の組みは同じだが暗い地なので、色はすべて別に持っている。
     **行の寸法を直すときは両方を見ること**（このファイルの2節）。

   ■ クラス名が .cle-news で始まらない理由
     .cle-news はTOPの帯が使っている。読まれる面が重ならないので実害は
     無いが、grep したときに混ざるので -index / -article を付けている。
   ========================================================================== */

/* ==========================================================================
   1. 一覧の土台

   ページヘッドと本文のあいだは、他の下層ページ（よくある質問）と同じ
   詰め方にしてある。.cle-page__block の既定は上下 96px だが、
   ページヘッドの直後だけは空きすぎるので上を詰める。
   ========================================================================== */

.cle-news-index__body {
  padding: 40px 0 96px;
}

/* 1件も無いとき。空の枠だけが残ると壊れて見えるので一文を置く */
.cle-news-index__empty {
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid var(--cle-line);
  color: var(--cle-ink-soft);
  font-size: 13px;
  text-align: center;
}

/* ==========================================================================
   2. リスト表示の行

   TOPページの News の帯（cle-top.css 11節）と対。組みは同じで、
   明るい地のぶんだけ色が違う。**片方だけ直さないこと。**

     日付 … Cormorant。行の頭で幅を取らない
     タグ … 共通のチップ（.cle-ptag）を借りる
     見出し … 明朝。行の主役

   /shop/informations は全カテゴリーが混ざるのでタグを出し、
   カテゴリー別の一覧は見出しと二重になるので出さない（テンプレート側）。
   ========================================================================== */

.cle-news-index__list {
  display: flex;
  flex-direction: column;
}

.cle-news-index__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 4px;
  border-top: 1px solid var(--cle-line);
  color: var(--cle-ink);
  text-decoration: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* 最後の1本にだけ下の罫線を足してリストを閉じる */
.cle-news-index__list .cle-news-index__item:last-child {
  border-bottom: 1px solid var(--cle-line);
}

/* 暗い地の帯は opacity で沈めているが、明るい地では紙が透けるだけで
   反応が分からない。地をわずかに起こす形にしてある。 */
.cle-news-index__item:hover,
.cle-news-index__item:focus-visible {
  background: rgba(255, 253, 249, 0.6);
}

.cle-news-index__date {
  flex: 0 0 auto;
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-en);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* タグは共通のチップ（cle-page.css 5節）と同じ値。あちらは属性の印で
   複数並ぶが、ここは1つだけなので隣接の余白は要らない。 */
.cle-news-index__tag {
  display: inline-block;
  flex: 0 0 auto;
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.cle-news-index__title {
  font-family: var(--cle-font-mincho);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

/* ==========================================================================
   3. サムネイル表示のカード

   コラム・メディア掲載のように写真が主役のカテゴリー用。出るかどうかは
   カテゴリーの slug で決まる（information_categories/show.html.liquid）。

   商品カード（cle-list.css 4節）と揃えて、縦罫ではなく余白で仕切る
   3列の格子にしてある。写真は 3:2。記事に写真が無いときは ecforce の
   既定サムネイルが入るので、高さは揃う。
   ========================================================================== */

.cle-news-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
  padding-top: 8px;
}

.cle-news-index__card {
  display: grid;
  gap: 14px;
  color: var(--cle-ink);
  text-decoration: none;
}

/* 写真の器。はみ出しを切るので、中の拡大がここで止まる */
.cle-news-index__card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cle-paper-strong);
}

.cle-news-index__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cle-news-index__card:hover .cle-news-index__card-media img,
.cle-news-index__card:focus-visible .cle-news-index__card-media img {
  transform: scale(1.04);
}

.cle-news-index__card-date {
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-en);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* 見出しは3行で切る。カードの高さを揃えるため。
   line-clamp は下の3つが揃って初めて効く。 */
.cle-news-index__card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-family: var(--cle-font-mincho);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
}

/* ==========================================================================
   4. 記事詳細の見出しと写真
   ========================================================================== */

/* ページヘッドは中央寄せの共通パーツを使わず、この面だけ左寄せにする。
   記事のタイトルは長くなりやすく、中央寄せだと折り返しが読みにくい。
   （ショッピングガイドの運営会社の節と同じ考え方） */
.cle-news-article__head {
  display: grid;
  gap: 18px;
  max-width: 860px;
}

.cle-news-article__head h1 {
  margin: 0;
  color: var(--cle-ink);
  font: 300 clamp(22px, 2.2vw, 30px)/1.6 var(--cle-font-mincho);
}

/* 日付とタグの行。見出しの上に小さく置く */
.cle-news-article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-en);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.cle-news-article__tag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-jp);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.cle-news-article__body {
  padding: 48px 0 96px;
}

/* 記事のサムネイル。本文の頭に1枚だけ置く。
   記事に登録が無ければテンプレートが要素ごと出さない。 */
.cle-news-article__hero {
  margin: 0 0 48px;
  max-width: 860px;
}

.cle-news-article__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   5. 本文（管理画面のHTMLをそのまま受ける）

   information.parsed_content。書き手が管理画面のエディタで組むので、
   どの要素が来るか分からない。よく使うものだけ最低限を整えてある。

   ここは自前のクラスを付けられないので、**要素セレクタで受けている**。
   .cle-news-article__prose の下に閉じてあるので他へは漏れない。

   幅を 720px で止めているのは、本文が横に伸びすぎると読めなくなるため。
   1400px の器の中で左に寄る（見出しも左寄せなので頭が揃う）。
   ========================================================================== */

.cle-news-article__prose {
  max-width: 720px;
  color: var(--cle-ink);
  font-size: 14px;
  line-height: 2;
}

.cle-news-article__prose > :first-child {
  margin-top: 0;
}

.cle-news-article__prose > :last-child {
  margin-bottom: 0;
}

.cle-news-article__prose p {
  margin: 0 0 1.8em;
}

.cle-news-article__prose h2,
.cle-news-article__prose h3,
.cle-news-article__prose h4 {
  margin: 2.6em 0 1em;
  color: var(--cle-ink);
  font-family: var(--cle-font-mincho);
  font-weight: 400;
  line-height: 1.6;
}

.cle-news-article__prose h2 {
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--cle-line);
  font-size: 20px;
}

.cle-news-article__prose h3 {
  font-size: 17px;
}

.cle-news-article__prose h4 {
  font-size: 15px;
}

.cle-news-article__prose ul,
.cle-news-article__prose ol {
  margin: 0 0 1.8em;
  padding-left: 1.4em;
}

.cle-news-article__prose li {
  margin-bottom: 0.5em;
}

/* リンクは色を変えず下線で示す。サイト全体の扱いに合わせる
   （cle-common.css で --color-text-link を墨に向けているのと同じ理由）。 */
.cle-news-article__prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 0.3s ease;
}

.cle-news-article__prose a:hover,
.cle-news-article__prose a:focus-visible {
  opacity: 0.6;
}

.cle-news-article__prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.4em 0;
}

.cle-news-article__prose blockquote {
  margin: 2.4em 0;
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--cle-line-strong);
  color: var(--cle-ink-soft);
}

.cle-news-article__prose hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--cle-line);
}

/* 表は横に長くなりがち。器ごと横スクロールさせて、ページ全体が
   横に流れるのを防ぐ。 */
.cle-news-article__prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 2.4em 0;
  border-collapse: collapse;
  font-size: 13px;
}

.cle-news-article__prose th,
.cle-news-article__prose td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cle-line);
  text-align: left;
  vertical-align: top;
}

.cle-news-article__prose th {
  color: var(--cle-ink-soft);
  font-weight: 400;
  white-space: nowrap;
}

/* ==========================================================================
   6. 前後の記事

   左に「前の記事へ」、右に「次の記事へ」、中央に「一覧へ戻る」。
   前後が無いときもテンプレートが枠を出すので、左右の釣り合いは崩れない。
   ========================================================================== */

.cle-news-article__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 押せないほうは枠だけ残して沈める。span で出ているのでリンクにならない */
.cle-news-article__nav .cle-btn.is-disabled {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

/* 一覧へ戻るは主導線ではないので字のリンク。
   お問い合わせの「入力内容を修正する」と同じ扱い。 */
.cle-news-article__back {
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color 0.3s ease;
}

.cle-news-article__back:hover,
.cle-news-article__back:focus-visible {
  color: var(--cle-ink);
}

/* ==========================================================================
   7. レスポンシブ（他の下層ページに合わせて 1024px / 768px の2点だけ）
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-news-index__body {
    padding: 30px 0 72px;
  }

  .cle-news-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .cle-news-article__body {
    padding: 36px 0 72px;
  }
}

@media (max-width: 768px) {
  .cle-news-index__body {
    padding: 22px 0 58px;
  }

  /* 日付・タグ・見出しを折り返す。見出しが長いと横並びでは入らないので、
     見出しだけ次の行へ落ちる（TOPの帯と同じ畳み方）。 */
  .cle-news-index__item {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 18px 4px;
  }

  .cle-news-index__title {
    font-size: 14px;
  }

  /* カードは1列。写真が大きくなりすぎるので比率を横長へ振る */
  .cle-news-index__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cle-news-index__card-media {
    aspect-ratio: 16 / 9;
  }

  .cle-news-article__body {
    padding: 28px 0 58px;
  }

  .cle-news-article__hero {
    margin-bottom: 32px;
  }

  .cle-news-article__prose {
    font-size: 13px;
    line-height: 1.95;
  }

  /* 前後の記事は縦積み。字のリンクを最後に置く */
  .cle-news-article__nav-inner {
    flex-wrap: wrap;
    gap: 14px;
  }

  .cle-news-article__nav-inner .cle-btn {
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .cle-news-article__back {
    order: 1;
    width: 100%;
    text-align: center;
  }
}