/*
  hoshinoki-global-design.css
  2026-06-01 update
  サイト全体の白基調化とヒーロー部分のフォント・位置統一用CSS。
  既存HTMLを大きく壊さず、最後に読み込んで上書きする前提です。
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Noto+Sans+JP:wght@300;400;500&family=Kaisei+Decol:wght@400;500;700&display=swap');

:root{
  --cream:#ffffff;
  --parchment:#ffffff;
  --warm-beige:#eadfce;
  --taupe:#d7c8b5;
  --brown:#7b6247;
  --dark-brown:#3b2b20;
  --gold:#b8965a;
  --text-main:#2f241c;
  --text-muted:#6f6258;
  --hoshinoki-red:#9f1f2b;
  --hoshinoki-red-dark:#851a24;
  --hoshinoki-line:rgba(169,130,63,0.16);
  --hoshinoki-soft-shadow:0 10px 28px rgba(53,40,32,0.045);
}

html,
body{
  background:#ffffff !important;
  color:var(--text-main) !important;
  font-family:'Noto Sans JP', sans-serif !important;
  font-weight:300;
  letter-spacing:0.015em;
}

/* ナビゲーション */
nav{
  background:rgba(255,255,255,0.94) !important;
  border-bottom:1px solid var(--hoshinoki-line) !important;
  box-shadow:0 6px 22px rgba(53,40,32,0.035) !important;
}

.nav-logo,
nav a{
  color:var(--dark-brown);
}

/* =========================================================
   ヒーロー部分の統一
   .page-header は一覧ページ、.article-hero は記事ページ系。
   背景画像は各ページ指定のまま活かし、文字の位置・大きさ・色を統一します。
   ========================================================= */
.page-header,
.article-hero{
  position:relative !important;
  overflow:hidden !important;
  background-color:#ffffff !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-top:0 !important;
  padding:0 2rem !important;
  min-height:clamp(260px, 31vw, 430px) !important;
  aspect-ratio:2244 / 701;
}

.page-header::before,
.article-hero::before{
  display:none !important;
  content:none !important;
  background:none !important;
}

.header-label,
.article-hero .header-label,
.page-header .header-label{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1rem !important;
  margin:0 0 1.15rem !important;
  color:var(--gold) !important;
  font-family:'Cormorant Garamond', serif !important;
  font-size:clamp(0.78rem, 1.05vw, 0.98rem) !important;
  font-weight:300 !important;
  letter-spacing:0.34em !important;
  line-height:1.2 !important;
  text-shadow:none !important;
}

.header-label::before,
.header-label::after{
  content:'' !important;
  display:block !important;
  width:2rem !important;
  height:1px !important;
  background:var(--gold) !important;
  opacity:0.75 !important;
}

.page-header h1,
.article-hero h1{
  position:relative !important;
  z-index:1 !important;
  color:var(--hoshinoki-red) !important;
  font-family:'Kaisei Decol','Noto Serif JP','Noto Sans JP',serif !important;
  font-weight:400 !important;
  letter-spacing:0.08em !important;
  text-align:center !important;
  text-shadow:none !important;
  margin:0 0 0.9rem !important;
  width:auto !important;
}

.page-header h1{
  font-size:clamp(2.35rem, 5.2vw, 4.35rem) !important;
  line-height:1.22 !important;
  max-width:88% !important;
}

.article-hero h1{
  font-size:clamp(1.75rem, 3.6vw, 3.35rem) !important;
  line-height:1.45 !important;
  max-width:78% !important;
}

.page-header p,
.article-hero p,
.article-date-hero{
  position:relative !important;
  z-index:1 !important;
  color:var(--text-muted) !important;
  font-family:'Noto Sans JP',sans-serif !important;
  font-size:clamp(0.82rem, 1.05vw, 0.98rem) !important;
  font-weight:300 !important;
  line-height:1.8 !important;
  text-align:center !important;
  letter-spacing:0.08em !important;
  text-shadow:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:88% !important;
}

/* 個別ページで右寄せ指定などが残っている場合の打ち消し */
.page-header h1,
.page-header p{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* セクション全体を白基調へ */
section,
.content-section,
.card-section,
.article-content,
.column-content,
.profile-section,
.tarot-section,
.main-content{
  background-color:#ffffff;
}

/* カード・ボックス類を白基調へ */
.card,
.card-box,
.info-card,
.feature-card,
.column-card,
.tarot-card,
.article-card,
.spread-card,
.reading-theme-card,
.reading-genre-accordion,
.reading-result,
.notice-box,
.profile-box,
.history-box,
.meaning-box,
.keyword-box,
.data-box,
.point-box,
.intro-card,
.suit-section,
.major-card,
.minor-card{
  background:#ffffff !important;
  background-image:none !important;
  border-color:var(--hoshinoki-line) !important;
  box-shadow:var(--hoshinoki-soft-shadow) !important;
}

/* ベージュ面を減らす */
.parchment,
.bg-parchment,
.warm-box,
.highlight-box,
.explanation-box{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid var(--hoshinoki-line) !important;
}

/* 見出しの統一 */
h1,
h2,
h3{
  color:var(--dark-brown);
}

h2,
.section-title,
.section-heading,
.reading-section-heading h2{
  font-family:'Cormorant Garamond','Noto Sans JP',serif !important;
  font-weight:300 !important;
  letter-spacing:0.05em;
}

h2::after,
.section-title::after,
.section-heading::after{
  background:var(--gold) !important;
}

/* 小さな英字見出し */
.eyebrow,
.reading-eyebrow,
.article-category,
.category-label{
  color:var(--gold) !important;
  letter-spacing:0.18em;
}

/* リンクとボタン */
a{color:inherit;}

.btn-primary,
.reading-theme-card__button,
button.primary,
input[type="submit"]{
  background:var(--hoshinoki-red) !important;
  border-color:var(--hoshinoki-red) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

.btn-primary:hover,
.reading-theme-card__button:hover,
button.primary:hover,
input[type="submit"]:hover{
  background:var(--hoshinoki-red-dark) !important;
  border-color:var(--hoshinoki-red-dark) !important;
}

.btn-outline,
button.secondary{
  background:#ffffff !important;
  color:var(--hoshinoki-red) !important;
  border-color:rgba(159,31,43,0.35) !important;
  border-radius:999px !important;
}

/* テーブル */
table{
  background:#ffffff !important;
  border-color:var(--hoshinoki-line) !important;
}
th{background:#fbf8f3 !important;color:var(--dark-brown) !important;}
td{background:#ffffff !important;}

/* フォーム */
input,
textarea,
select{
  background:#ffffff !important;
  border:1px solid var(--hoshinoki-line) !important;
  color:var(--text-main) !important;
}

input:focus,
textarea:focus,
select:focus{
  outline:none !important;
  border-color:rgba(159,31,43,0.45) !important;
  box-shadow:0 0 0 3px rgba(159,31,43,0.08) !important;
}

/* 占いページ系 */
.reading-page-new,
.featured-readings-panel,
.reading-genres-new{
  background:#ffffff !important;
}

.featured-readings-panel{border-color:var(--hoshinoki-line) !important;}
#featured-reading-list .reading-theme-card{background:#ffffff !important;}
#featured-reading-list .reading-theme-card__spread-top{
  border-color:var(--hoshinoki-red) !important;
  color:var(--hoshinoki-red) !important;
  background:#fff !important;
}

/* フッターは濃色のまま */
footer{background:#3b2b20 !important;}

@media(max-width:768px){
  body{background:#ffffff !important;}

  .page-header,
  .article-hero{
    min-height:220px !important;
    aspect-ratio:auto !important;
    padding:64px 1.25rem 1.7rem !important;
    align-items:center !important;
    justify-content:center !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  .header-label,
  .article-hero .header-label,
  .page-header .header-label{
    font-size:0.72rem !important;
    letter-spacing:0.24em !important;
    margin-bottom:0.85rem !important;
    gap:0.7rem !important;
  }

  .header-label::before,
  .header-label::after{
    width:1.35rem !important;
  }

  .page-header h1,
  .article-hero h1{
    font-size:clamp(1.8rem, 8vw, 2.55rem) !important;
    line-height:1.35 !important;
    max-width:94% !important;
    text-align:center !important;
    margin:0 auto 0.65rem !important;
    letter-spacing:0.05em !important;
  }

  .page-header p,
  .article-hero p,
  .article-date-hero{
    font-size:0.8rem !important;
    max-width:92% !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .card,
  .card-box,
  .info-card,
  .feature-card,
  .column-card,
  .reading-theme-card,
  .reading-genre-accordion{
    box-shadow:0 6px 18px rgba(53,40,32,0.035) !important;
  }
}