@charset "UTF-8";
/* ============================================================
   Luke SKY & GARDEN — お知らせ
   ------------------------------------------------------------
   style.css とは別ファイルにしている。
   お知らせ機能をやめるときは、この読み込みを外すだけで
   既存ページに影響を残さず元に戻せる。
   色・線の太さ・影の出し方は style.css の :root をそのまま使う。
   ============================================================ */

/* ============================================================
   共通：日付ステッカー
   ============================================================ */

.news-date {
  flex: none;
  display: grid;
  place-content: center;
  gap: 0.1em;
  width: 3.5rem;
  padding: 0.42rem 0.2rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  text-align: center;
  transform: rotate(-3deg);
  transition: transform 0.4s var(--ease-boing), background-color 0.3s;
}
.news-date time { display: contents; }
.news-date__d {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.news-date__ym {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

/* ============================================================
   トップページ：お知らせボード
   ============================================================ */

.news { background: var(--sky-pale); padding-block: clamp(3rem, 6vw, 5rem); }

.news-board {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.1rem, 3.5vw, 2.4rem) clamp(1.4rem, 3.5vw, 2rem);
  background: var(--white);
  border: var(--border-pop);
  border-radius: 28px;
  box-shadow: 9px 9px 0 var(--pop-sun);
  transform: rotate(-0.5deg);
}

/* 掲示板らしく、上に押しピンを打つ */
.news-board__pin {
  position: absolute;
  top: -20px;
  left: 50%;
  width: clamp(30px, 5vw, 38px);
  height: auto;
  transform: translateX(-50%) rotate(-7deg);
  transform-origin: 50% 90%;
  filter: drop-shadow(2px 3px 0 rgba(51, 66, 29, 0.18));
  pointer-events: none;
}

.news-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 2.5px dashed rgba(51, 66, 29, 0.25);
}
.news-board__titles { flex: 1 1 auto; min-width: 0; }
.news-board__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.3;
}
.news-board__all { margin-top: 0; white-space: nowrap; }

.news-board__list { display: grid; gap: 0.5rem; }

/* ---------- 1行 ---------- */

.news-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border-radius: 18px;
  border: 2px solid transparent;
  color: var(--ink);
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.news-board__item + .news-board__item { border-top: 2px dashed rgba(51, 66, 29, 0.16); }

.news-row__thumb {
  flex: none;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--sky-pale);
  display: grid;
  place-items: center;
}
.news-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }

.news-row__text { flex: 1 1 8rem; min-width: 0; }
.news-row__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 800;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  line-height: 1.55;
}
.news-row__excerpt {
  display: none;
  margin-top: 0.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(51, 66, 29, 0.68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-row__arrow {
  flex: none;
  display: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition: background-color 0.3s, transform 0.35s var(--ease-bounce);
}
.news-row__arrow svg { width: 1.05rem; height: 1.05rem; }

/* 日付の色は順番で変える（style.css のカードと同じ考え方） */
.news-board__item:nth-child(3n+2) .news-date { background: var(--sky); transform: rotate(2.5deg); }
.news-board__item:nth-child(3n)   .news-date { background: var(--coral); color: var(--white); transform: rotate(-1.5deg); }

/* スマホでは日付と写真を少し小さくして、見出しに使える幅を広げる */
@media (max-width: 559px) {
  .news-date { width: 3rem; padding: 0.35rem 0.15rem 0.42rem; border-radius: 13px; }
  .news-date__d { font-size: 1.28rem; }
  .news-date__ym { font-size: 0.55rem; }
  .news-row__thumb { width: 60px; height: 60px; border-radius: 12px; }
  .news-row { gap: 0.6rem; padding: 0.65rem 0.4rem; }
}

@media (min-width: 560px) {
  .news-row { gap: 0.95rem; padding: 0.8rem 0.9rem; }
  .news-row__excerpt { display: block; }
  .news-row__arrow { display: grid; margin-left: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .news-row:hover {
    background: var(--sun-soft);
    border-color: var(--ink);
    transform: translateX(3px);
  }
  .news-row:hover .news-date { transform: rotate(0deg) scale(1.06); }
  .news-row:hover .news-row__thumb img { transform: scale(1.09); }
  .news-row:hover .news-row__arrow { background: var(--coral); color: var(--white); transform: translateX(3px); }
}

.news-board__foot { margin-top: 1rem; text-align: center; }
.news__noscript { margin-top: 0.8rem; font-weight: 700; }

/* ---------- 読み込み後に静かに出す ----------
   style.css の .reveal は読み込み時点にある要素しか見ていないため、
   あとから差し込む要素に .reveal を付けると透明のまま消えてしまう。
   お知らせ専用の控えめなフェードを用意する。 */
.news-board__list { opacity: 0; transform: translateY(10px); }
.news-board__list.is-in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .news-board__list { opacity: 1; transform: none; }
  .news-board__list.is-in { transition: none; }
}

/* ============================================================
   お知らせ一覧ページ
   ============================================================ */

.news-page .legal-hero__title { margin-top: 0.6rem; }

.news-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.4rem);
}
@media (min-width: 620px)  { .news-cards { grid-template-columns: repeat(2, 1fr); } }

.news-card {
  background: var(--white);
  border: var(--border-pop);
  border-radius: 24px;
  overflow: hidden;
  transform: rotate(-1.1deg);
  box-shadow: 8px 8px 0 var(--pop-coral);
  transition: transform 0.5s var(--ease-boing), box-shadow 0.4s var(--ease-out);
}
.news-card:nth-child(3n+2) { transform: rotate(1deg);    box-shadow: 8px 8px 0 var(--pop-sky); }
.news-card:nth-child(3n)   { transform: rotate(-0.6deg); box-shadow: 8px 8px 0 var(--pop-sun); }

.news-card__link { display: block; color: var(--ink); height: 100%; }

.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--border-pop);
  background: var(--sky-pale);
}
.news-card__media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.06);
  transition: transform 0.6s var(--ease-out);
}
/* ---------- 写真が無い記事のカード ----------
   写真の領域そのものを作らず、日付を本文の先頭に置く。
   上辺に色の帯を引いて、写真つきカードと並んでも見劣りしないようにする。 */
.news-card--text .news-card__body {
  padding-top: 1.3rem;
  border-top: var(--border-pop);
}
.news-card--text { border-top-width: 0; }
.news-card--text .news-card__link { position: relative; }
.news-card--text .news-card__link::before {
  content: "";
  display: block;
  height: 14px;
  background: var(--sun);
  border-bottom: var(--border-pop);
}
.news-card:nth-child(3n+2).news-card--text .news-card__link::before { background: var(--sky); }
.news-card:nth-child(3n).news-card--text   .news-card__link::before { background: var(--coral); }

.news-card--text .news-date {
  display: inline-grid;
  margin-bottom: 0.7rem;
}

/* カードの上に日付ステッカーを貼る */
.news-card__media .news-date {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
}
.news-card:nth-child(3n+2) .news-date { background: var(--sky); }
.news-card:nth-child(3n)   .news-date { background: var(--coral); color: var(--white); }

.news-card__body { display: block; padding: 1.15rem 1.3rem 1.4rem; }
.news-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.55;
}
.news-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.8;
  color: rgba(51, 66, 29, 0.72);
}
.news-card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--sky-deep);
  border-bottom: 2.5px solid rgba(46, 154, 208, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.3s, color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .news-card:hover,
  .news-card:nth-child(3n+2):hover,
  .news-card:nth-child(3n):hover { transform: rotate(0deg) translateY(-10px) scale(1.015); }
  .news-card:hover              { box-shadow: 12px 14px 0 var(--pop-coral); }
  .news-card:nth-child(3n+2):hover { box-shadow: 12px 14px 0 var(--pop-sky); }
  .news-card:nth-child(3n):hover   { box-shadow: 12px 14px 0 var(--pop-sun); }
  .news-card:hover .news-card__media > img { transform: scale(1.07) rotate(1.2deg); }
  .news-card:hover .news-card__more { color: var(--coral-deep); border-color: currentColor; }
  .news-card__link:hover { text-decoration: none; }
}

/* ---------- ページ送り ---------- */

.news-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
}
.news-pager__count { font-weight: 800; font-size: 0.86rem; color: rgba(51, 66, 29, 0.7); }

/* ---------- 何も無いとき ---------- */

.news-empty {
  padding: clamp(2.4rem, 7vw, 4rem) 1.4rem;
  text-align: center;
  background: var(--white);
  border: 2.5px dashed rgba(51, 66, 29, 0.3);
  border-radius: 28px;
}
.news-empty__art { width: min(150px, 42vw); margin: 0 auto 1.1rem; }
.news-empty__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; margin-bottom: 0.4rem; }
.news-empty__text { font-size: 0.92rem; color: rgba(51, 66, 29, 0.72); margin-bottom: 1.5rem; }

/* ============================================================
   お知らせ詳細
   ============================================================ */

.news-detail__date {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(51, 66, 29, 0.72);
}

.news-detail { box-shadow: 8px 8px 0 var(--pop-sun); }
.news-detail__body { font-size: clamp(0.95rem, 0.9rem + 0.22vw, 1.04rem); line-height: 2; }
.news-body__p + .news-body__p { margin-top: 1.3em; }
.news-detail__body a { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }

.news-detail__photos { display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }

.news-photo { margin: 0; }
.news-photo img {
  width: 100%;
  height: auto;
  border: var(--border-pop);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--pop-sky);
  background: var(--sky-pale);
}
.news-photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(51, 66, 29, 0.66);
  text-align: center;
}

/* ---------- 前後の記事 ---------- */

.news-nav {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 620px) { .news-nav { grid-template-columns: 1fr 1fr; } }

.news-nav__link {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--white);
  border: var(--border-pop);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--pop-grass);
  color: var(--ink);
  transition: transform 0.35s var(--ease-boing), box-shadow 0.35s var(--ease-out);
}
.news-nav__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sky-deep);
  margin-bottom: 0.25rem;
}
.news-nav__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 800;
  line-height: 1.55;
}
.news-nav__link--prev { text-align: right; }
/* 「前のお知らせ」しか無いときは右側に寄せる（左に浮いて見えるのを防ぐ） */
@media (min-width: 620px) {
  .news-nav__link--prev:only-child { grid-column: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .news-nav__link:hover { transform: translateY(-4px); box-shadow: 7px 10px 0 var(--pop-sun); text-decoration: none; }
}