/*
Theme Name: Arkhe Child - 系図系譜学研究所
Template: arkhe
Version: 1.0.0
Description: 系図系譜学研究所 genealogy.jp/jp 用カスタムテーマ
*/

/* ========================================
   BASE: 変数定義
======================================== */
:root {
  --res-navy:   #000080;
  --res-pink:   #ffa6c9;
  --res-accent: #e6b422;
  --res-bg:     transparent;            /* 背景は body の画像で */
  --res-text:   #2c2418;
  --res-border: #c8a0b8;
  --res-link:   #000080;
  --res-panel:  rgba(255, 255, 255, 0.88);
  --res-font:   'Yu Mincho', '游明朝', 'Hiragino Mincho ProN',
                'ヒラギノ明朝 ProN W3', 'HGS明朝E', serif;
}

/* ========================================
   BODY: ピンクグラデーション背景
======================================== */
body {
  font-family: var(--res-font) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--res-text) !important;
  background-image: url('/jp/sp/wp-content/uploads/2026/05/pink-gradient-bg.jpg') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* ========================================
   HEADER — スティッキー無効化
======================================== */
.l-header,
.l-header[data-pcfix],
.l-header[data-spfix],
.l-header[data-pcfix="0"],
.l-header[data-pcfix="1"],
.l-header[data-spfix="0"],
.l-header[data-spfix="1"] {
  position: static !important;
  top: auto !important;
}
.l-headerUnder,
.l-headerUnder[data-fix],
.l-headerUnder[data-fix="1"] {
  position: static !important;
  top: auto !important;
}

/* ========================================
   HEADER デザイン: 紺地 + 下部に金色線
======================================== */
.l-header {
  background-color: var(--res-navy) !important;
  border-bottom: 3px solid var(--res-accent) !important;
  border-top: none !important;
  padding: 0 !important;
}

.l-header__body {
  border: none !important;
  background: linear-gradient(160deg,
    #00004a 0%, var(--res-navy) 40%,
    #3a007a 70%, #1a0040 100%) !important;
  padding: 22px 44px 20px !important;
}

.l-header__bar {
  background-color: var(--res-navy) !important;
  border: none !important;
}

/* 空のナビ帯を非表示 */
.l-headerUnder {
  display: none !important;
}

/* ========================================
   SITE TITLE
======================================== */
.l-header__center {
  text-align: center !important;
}

.l-header__logo,
.l-header__logo.has-text {
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.c-headLogo,
.l-header__logo a.c-headLogo {
  font-family: var(--res-font) !important;
  font-size: 44px !important;
  font-weight: bold !important;
  color: #fff8f0 !important;
  letter-spacing: 0.2em !important;
  text-decoration: none !important;
  text-shadow:
    0 0 24px rgba(255, 166, 201, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.7) !important;
  display: inline-block !important;
  padding: 6px 0 8px !important;
  border-top: 1px solid rgba(255, 166, 201, 0.6) !important;
  border-bottom: 1px solid rgba(255, 166, 201, 0.6) !important;
  line-height: 1.3 !important;
}

.c-headLogo::before,
.c-headLogo::after {
  content: none !important;
}

.c-tagline {
  font-family: var(--res-font) !important;
  font-size: 12px !important;
  color: var(--res-pink) !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  margin-top: 8px !important;
  opacity: 0.95 !important;
}

/* ========================================
   NAVIGATION
======================================== */
.c-gnav,
.c-gnavWrap,
.l-header__bar .c-gnav {
  background-color: rgba(0, 0, 128, 0.85) !important;
}

.c-gnav__a,
.c-gnav a {
  font-family: var(--res-font) !important;
  color: #fff8f0 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}

.c-gnav__a:hover,
.c-gnav a:hover {
  color: var(--res-pink) !important;
  background-color: rgba(255, 166, 201, 0.15) !important;
}

/* ========================================
   MAIN CONTENT — 半透明パネル
======================================== */
.l-main,
.site-main,
main {
  background-color: transparent !important;
}

/* コンテンツエリアに半透明白パネル */
.l-article,
.l-content,
.p-article,
.entry-content,
article.post,
article.page,
.l-wrap > .l-main {
  background: var(--res-panel) !important;
  border-radius: 4px !important;
  padding: 32px 36px !important;
  box-shadow: 0 2px 16px rgba(0, 0, 80, 0.10) !important;
}

/* コンテナ幅 */
.l-container,
.l-wrap {
  max-width: 1200px !important;
}

/* 記事タイトル */
.entry-title,
.page-title,
h1.entry-title {
  font-family: var(--res-font) !important;
  font-size: 22px !important;
  font-weight: bold !important;
  color: var(--res-navy) !important;
  border-left: 5px solid var(--res-accent) !important;
  padding-left: 16px !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}

/* 見出し */
.entry-content h2 {
  font-family: var(--res-font) !important;
  font-size: 18px !important;
  color: var(--res-navy) !important;
  border-bottom: 2px solid var(--res-accent) !important;
  padding-bottom: 6px !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}

.entry-content h3 {
  font-family: var(--res-font) !important;
  font-size: 16px !important;
  color: var(--res-navy) !important;
  border-left: 3px solid var(--res-border) !important;
  padding-left: 10px !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--res-font) !important;
  color: var(--res-navy) !important;
}

/* 本文 */
.entry-content p,
.entry-content li,
.entry-content td {
  font-family: var(--res-font) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

/* リンク */
a,
.entry-content a {
  color: var(--res-link) !important;
  text-decoration: underline !important;
}
a:hover {
  color: var(--res-accent) !important;
}

/* ========================================
   SIDEBAR
======================================== */
.l-sidebar,
.sidebar,
#secondary {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid var(--res-border) !important;
  padding: 20px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
}

.widget-title,
.widgettitle {
  font-family: var(--res-font) !important;
  font-size: 14px !important;
  color: var(--res-navy) !important;
  border-bottom: 1px solid var(--res-border) !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
}

/* ========================================
   BREADCRUMB
======================================== */
.breadcrumb,
.c-breadcrumb,
nav.breadcrumb {
  font-size: 12px !important;
  color: #555 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--res-border) !important;
  margin-bottom: 20px !important;
}

/* ========================================
   TABLE
======================================== */
.entry-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 14px !important;
  margin: 20px 0 !important;
}

.entry-content th {
  background-color: var(--res-navy) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  font-family: var(--res-font) !important;
  font-weight: bold !important;
}

.entry-content td {
  border: 1px solid var(--res-border) !important;
  padding: 7px 12px !important;
}

.entry-content tr:nth-child(even) td {
  background-color: rgba(255, 166, 201, 0.12) !important;
}

/* ========================================
   IMAGES
======================================== */
.entry-content figure,
.entry-content .wp-block-image {
  margin: 24px 0 !important;
}

.entry-content .wp-block-image img,
.entry-content figure img {
  max-width: 100% !important;
  border: 1px solid var(--res-border) !important;
  box-shadow: 3px 3px 12px rgba(0, 0, 80, 0.12) !important;
}

/* ========================================
   FOOTER: 紺地 + 上部に金色線（ヘッダー上下反転）
======================================== */
.site-footer,
#site-footer,
.l-footer {
  background-color: var(--res-navy) !important;
  color: var(--res-pink) !important;
  border-top: 3px solid var(--res-accent) !important;
  padding: 30px 40px !important;
  font-family: var(--res-font) !important;
  font-size: 13px !important;
}

.site-footer a,
.l-footer a {
  color: var(--res-pink) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
.l-footer a:hover {
  color: var(--res-accent) !important;
}

/* ========================================
   BUTTONS / CTA
======================================== */
.wp-block-button__link,
.btn,
button[type="submit"] {
  background-color: var(--res-navy) !important;
  color: #fff !important;
  border: 2px solid var(--res-accent) !important;
  font-family: var(--res-font) !important;
  letter-spacing: 0.08em !important;
  padding: 10px 24px !important;
  border-radius: 2px !important;
  transition: background 0.2s, color 0.2s !important;
}

.wp-block-button__link:hover,
.btn:hover,
button[type="submit"]:hover {
  background-color: var(--res-accent) !important;
  color: var(--res-navy) !important;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .c-headLogo,
  .l-header__logo a.c-headLogo {
    font-size: 26px !important;
    letter-spacing: 0.12em !important;
  }

  .l-header__body {
    padding: 14px 20px 12px !important;
  }

  body {
    background-attachment: scroll !important;
  }

  .l-article,
  .entry-content {
    padding: 20px 16px !important;
  }
}