/* 背景 */
.news-detail {
  background: url("../images/background-002.jpg") repeat-y center top;
  background-size: auto;   /* coverにすると画面全体を覆える */
}

/* ラッパー */
.nd-wrap {
  max-width: 1200px;
  margin: 40px auto 120px;
  padding: 0 16px;
}

/* パンくず（簡易） */
.bc ol { list-style: none; padding: 0; margin: 0 0 16px; display: flex; gap: .5em; color: #ccc; }
.bc a { color: inherit; text-decoration: none; }

/* 2カラム */
.nd-article {
  display: grid;
  max-width: 1200px; 
  margin: 0 auto;      /* 中央寄せ */
  padding: 60px 20px 120px;  /* 内側余白（左右20px・上下40px） */
  grid-template-columns: 1.1fr 1fr; /* 左を少し広く */
  gap: 40px;
  align-items: start;
}

/* 左：メイン画像 */
.nd-figure {
  margin: 0;
  background: rgba(0,0,0,.3);
  padding: 0; /* 角丸や枠が必要ならここで */
}
.nd-figure img {
  width: 100%;
  height: auto;           /* 縦横比維持（正方形にしたいなら aspect-ratio:1/1; object-fit:cover;） */
  display: block;
}

/* 右：テキスト */
.nd-meta {
  color: #eee;
  font-size: .9rem;
  margin: 0 0 8px;
}
.nd-cat {
  margin-left: .75em;
  padding: 2px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
}
.nd-title {
  color: #fff;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.3;
  margin: 0 0 16px;
}
.nd-body p {
  color: #ddd;
  line-height: 1.9;
  margin: 0 0 1em;
}

/* CTAボタン（オレンジ・角丸なし） */
.nd-cta { margin-top: 24px; }
.nd-cta .btn {
  display: inline-block;
  padding: 10px 20px;
  color: #fff; text-decoration: none;
  background: #FC5F00;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.nd-cta .btn:hover { transform: translateY(-2px); background:#e14f00; }

/* 背景（ページ全体・縦リピート）※任意 */
body.news-page {
  background-image: url("../images/bg-news.jpg");
  background-repeat: repeat-y;
  background-size: auto;
  background-position: center top;
  background-attachment: fixed;
}

/* スマホ */
@media (max-width: 900px){
  .nd-article { grid-template-columns: 1fr; gap: 24px; }
  .nd-wrap { margin: 30px auto 60px; }
}
@charset "utf-8";
/* CSS Document */


/* ギャラリーのサムネ群 */
.nd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.nd-thumb {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.nd-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}

.nd-thumb[aria-selected="true"] img {
  outline: 2px solid #FC5F00;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(252,95,0,.3);
}

.nd-thumb:hover img {
  transform: translateY(-1px);
}

/* ギャラリーのリンクボタン */

.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;

  padding: 8px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #FC5F00;
  background: transparent;
  border: 1.5px solid #FC5F00;
  border-radius: 6px;   /* ← 少し角丸 */
  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.read-more-btn:hover {
  background: #FC5F00;
  color: #fff;
}

.read-more-btn:active {
  opacity: 0.85;
}

.read-more-btn svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ===== BreadCrumb（記事ページ専用） ===== */
.bc-news { background:#111; padding:12px 0 12px; }
.bc-news .bc-inner{ max-width:1400px; margin:0 auto; padding:0 clamp(16px,2vw,24px); }
.bc-news .bc{ color:#fff; }
.bc-news .bc ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0; font:600 14px/1.6 'Noto Sans JP',sans-serif; }
.bc-news .bc li{ display:flex; align-items:center; }
.bc-news .bc li + li::before{ content:"|"; margin:0 1em; color:#aaa; }
.bc-news .bc a{ color:#fff; text-decoration:none; opacity:.95; }
.bc-news .bc a:hover{ text-decoration:underline; }

/* サムネ内のバッジ配置 */
.news-thumb { position: relative; display:block; }
.news-thumb img { display:block; position: relative; z-index:1; width:100%; height:auto; }

.news-badges {
  position: absolute;
  top: 8px; left: 8px;
  display: flex; gap: 6px; flex-wrap: wrap;
  z-index: 2; /* 画像より前に出す */
}

.news-badge {
  font-size: 11px; font-weight: 700;
  color: #fff; background: #111;
  padding: 4px 8px; border-radius: 999px; opacity: .95;
}
.news-badge--new { background: #FC5F00; }


/* === NEWS詳細 背景（上書き） === */
.news-detail{
  /* PC：全面表示＆パララックス風 */
  background: url("../images/background-002.jpg") repeat-y center top fixed;
  background-size: cover;
}

/* SP：幅100%＆縦リピート、fixedは無効化（黒帯回避） */
@media (max-width:768px){
  .news-detail{
    background-attachment: scroll !important;
    background-size: 100% auto !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-color: transparent !important;
  }
}



/* スマホは横スクロールにしたい場合（お好みで） */
/*
.nd-thumbs { display: flex; overflow-x: auto; gap: 8px; }
.nd-thumb { flex: 0 0 84px; }
.nd-thumb img { width: 84px; height: 84px; }
*/