/*
Theme Name: RIJENA BEAUTY ESTHETIQUE
Theme URI: https://rijena-beauty.com/
Author: 株式会社リード
Description: RIJENA BEAUTY ESTHETIQUE 公式サイト オリジナルテーマ。静的LPを忠実に再現したシングルページテーマです。
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rijena
*/

/* 基本スタイルは /assets/css/ 内の各CSS（style.css / style_page.css / navi.css / fade.css）で読み込んでいます。
   以下は WordPress 投稿（NEWS 一覧・詳細）ページ用の追加スタイルです。 */

/* ===== NEWS（一覧・詳細 共通） ===== */
.news-page {
  background: #f4f0e8; /* --color-ivory */
  padding: clamp(120px, 14vw, 170px) 40px 110px;
  min-height: 60vh;
  color: #1c0e0f; /* --color-dark */
}
.news-page .contents-area {
  max-width: 1100px;
  margin: 0 auto;
}
.news-page .contents-narrow {
  max-width: 1024px;
}

/* 見出し */
.news-page-head {
  text-align: center;
  margin-bottom: 56px;
}
.news-page-head .section-label {
  display: block;
  margin-bottom: 6px;
}
.news-page-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif; /* --font-en */
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: #581A1C; /* --color-bordeaux */
  margin: 0;
}
.news-page-head .gold-line {
  margin: 18px auto 0;
}

/* 一覧 */
.news-list li {
  padding: 22px 10px;
}
.news-list li a {
  display: block;
  color: #1c0e0f;
  text-decoration: none;
  transition: color 0.25s ease;
}
.news-list li a:hover {
  color: #581A1C;
}
.news-empty {
  text-align: center;
  padding: 40px 0 60px;
}

/* ページネーション */
.news-pager {
  margin-top: 48px;
}
.news-pager .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.news-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid rgba(88,26,28,0.2);
  color: #581A1C;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: all 0.25s ease;
}
.news-pager .page-numbers:hover,
.news-pager .page-numbers.current {
  background: #581A1C;
  border-color: #581A1C;
  color: #f4f0e8;
}

/* 詳細 */
.news-article-head {
  text-align: left;
  margin-bottom: 40px;
}
.news-article-head .post-date {
  margin-bottom: 10px;
}
.news-article-title {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #1c0e0f;
  margin: 0;
}
.news-article-head .gold-line {
  margin: 22px 0 0;
}
.news-article-thumb {
  margin: 0 0 36px;
}
.news-article-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.news-article-body {
  line-height: 2;
  letter-spacing: 0.02em;
  font-size: 16px;
}
.news-article-body > * + * {
  margin-top: 1.4em;
}
.news-article-body a {
  color: #581A1C;
  text-decoration: underline;
}
.news-article-body img {
  max-width: 100%;
  height: auto;
}
.news-article-body h2,
.news-article-body h3 {
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 1.8em;
}

/* 記事ナビ */
.news-article-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(88,26,28,0.15);
  font-size: 13px;
}
.news-article-nav a {
  color: #581A1C;
  text-decoration: none;
}
.news-article-nav .link-y {
  flex: 0 0 auto;
}
.news-nav-prev,
.news-nav-next {
  flex: 1 1 0;
}
.news-nav-next {
  text-align: right;
}

@media (max-width: 599px) {
  .news-page {
    padding-left: 22px;
    padding-right: 22px;
  }
  /* 記事ナビは SP でも PC と同様に1行表示（前の記事／一覧へ戻る／次の記事） */
  .news-article-nav {
    gap: 8px;
  }
  /* ページャーは SP では小さめの正方形 */
  .news-pager .page-numbers {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

/* ===== VOICE（お客様の声）一覧：front-page と同じノート風カード ===== */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.voice-card {
  display: flex;
  flex-direction: column;
  padding: 25px;
  background: #fff;
  border: 1px solid #dcd4c4;
  box-shadow: 0 10px 30px rgba(28,14,15,0.05);
  color: #1c0e0f;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.voice-card:hover {
  box-shadow: 0 14px 36px rgba(28,14,15,0.10);
  transform: translateY(-2px);
  text-decoration: none;
}
/* ノート風の罫線（front-page の .note と同じ手法） */
.voice-note {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 2;
  background-image: linear-gradient(
    to bottom,
    transparent calc(2em - 1px),
    rgba(197,165,90,0.2) calc(2em - 1px)
  );
  background-size: 100% 2em;
}
.voice-note span {
  color: rgba(28,14,15,0.78);
  font-weight: 300;
}
.voice-card-more {
  display: inline-block;
  align-self: flex-start;
  margin-top: 22px;
  font-size: 13px;
  color: #581A1C;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (max-width: 900px) {
  .voice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .voice-grid { grid-template-columns: 1fr; gap: 16px; }
}