@charset "utf-8";
/* =======================================================
 *
 *  momiji — 秋・紅葉・臙脂
 *
 *  style.css（配置）を読んだ後に読む。ここは意匠だけを受け持つ。
 *  **配置には触らないこと。** style.css は既存テーマで実績のある組みで、
 *  崩すと表紙とプロフィールの段組みが壊れる。
 *
 *  色は :root にまとめてある。調整はそこだけで足りる。
 *  値は tools/make_wagara.py の THEMES['momiji'] と同じにすること
 *  （選択画面のサムネイルがそちらから生成されるため、
 *   片方だけ変えると札と実物の色が食い違う）。
 *
 *  地紋 images/pattern.svg も同スクリプトの生成物。手で SVG を書かない。
 *
 * ======================================================= */

:root {
  --bg:         #FAF3EF;
  --bg-alt:     #F3E7E0;
  --ink:        #4A2A22;
  --sub:        #6E5348;
  --line:       #EAD8CE;
  --accent:     #A8402E;
  --cover-ink:  #4A2A22;
  --cover-sub:  #6E5348;
  --cover-line: #EAD8CE;
  --face:       "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
}

/* ---------------------------------------------- 全体 */

body {
  font-family: var(--face);
  color: var(--sub);
  background: var(--bg);
  letter-spacing: 0.05em;
}

a { color: var(--accent); }

/* ---------------------------------------------- 表紙 */

/* 地紋は敷き詰める。cover は既定が background-size: cover なので上書きする。 */
#fh5co-header.fh5co-cover {
  background-repeat: repeat;
  background-size: 152px auto;
  background-color: #FAF3EF;
}

/* 元テーマの飾り（bg_designL/R・stamp）は複製していない。
   style.css 側の参照も外してあるので、ここは念のための保険。 */
.fh5co-cover .overlay,
.fh5co-cover .overlay-R,
.fh5co-cover .overlay-stamp {
  background-image: none;
}

/* 秋の顔合わせ向け。 */
.fh5co-cover .overlay-fr {
  background-image: none;
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: 24px;
  border: 1px solid var(--line);
}

#fh5co-header h2,
.va .fam-L h2,
.va .fam-R h2 {
  color: var(--cover-ink) !important;
  font-family: var(--face);
  font-weight: 300;
  letter-spacing: 0.22em;
}

.va .fam-L h2,
.va .fam-R h2 { color: var(--cover-sub) !important; }

/* ---------------------------------------------- 見出し */

.fh5co-heading span {
  color: var(--ink);
  font-family: var(--face);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.18em;
}

.fh5co-heading h2 {
  color: var(--accent);
  font-family: var(--face);
}

.fh5co-heading p { color: var(--sub); }

/* 見出しの下に一本だけ罫を引く */
.fh5co-heading span::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--line);
}

/* ---------------------------------------------- 各セクションの地 */

#fh5co-greeting,
#fh5co-couple { background: var(--bg); }

.fh5co-section-gray { background: var(--bg-alt); }

/* 当日の予定・今後の予定にも地紋を敷く。写真ではなく紋で格を出す。 */
#fh5co-event.fh5co-bg,
#fh5co-schedule.fh5co-bg {
  background-repeat: repeat;
  background-size: 152px auto;
  background-color: var(--bg-alt);
}

/* 元は写真の上に置く前提で暗い膜が掛かっている。地紋には濃すぎる。 */
#fh5co-event .overlay,
#fh5co-schedule .overlay {
  background: rgba(250, 243, 239, 0.72);
}

#fh5co-event .fh5co-heading span,
#fh5co-schedule .fh5co-heading span,
#fh5co-event h3,
#fh5co-schedule h3 { color: var(--ink); }

/* ---------------------------------------------- 罫と囲み */

.event-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--sub);
}

.event-wrap h3 {
  font-family: var(--face);
  color: var(--ink);
  letter-spacing: 0.14em;
}

.task table { border-collapse: collapse; }

.task table th,
.task table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
}

.event-wrap i { color: var(--accent); }

/* プロフィールと家族 */

.desc-groom span,
.desc-bride span,
.prof-desc .name,
.grfam_area > span,
.brfam_area > span {
  font-family: var(--face);
  color: var(--ink);
  letter-spacing: 0.12em;
}

.prof-desc .rel { color: var(--accent); }

.couple-half,
.prof { border-bottom: 1px solid var(--line); }

.heart i { color: var(--accent); }

/* 出会いから今まで */

.timeline > li > .timeline-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: none;
}

.timeline-title { font-family: var(--face); color: var(--ink); }

.timeline > li > .timeline-badge { border: 2px solid var(--line); }

.timeline:before { background: var(--line); }

/* ---------------------------------------------- ボタン・足元 */

.btn-primary,
.btn--orange {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  letter-spacing: 0.1em;
}

.btn-primary:hover,
.btn--orange:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.fh5co-nav { background: var(--bg); border-bottom: 1px solid var(--line); }

.fh5co-nav .title,
#fh5co-footer .title { color: var(--ink); font-family: var(--face); }

#fh5co-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  color: var(--sub);
}

.gototop a { background: var(--ink); color: var(--bg); }