@charset "UTF-8";
/* ============================================================
   干支九星術 月恩会（沙門堂）  共通スタイル
   このファイル1つで全ページの見た目を管理しています。
   色を変えたいときは、下の :root の値だけを書き換えてください。
   ============================================================ */

:root {
  --sumi:      #16203a;  /* 墨紺（見出し・文字） */
  --ai:        #2f4470;  /* 藍（リンク・罫） */
  --kinari:    #f7f4ee;  /* 生成り（背景） */
  --washi:     #ffffff;  /* 白（カード背景） */
  --shu:       #a8443a;  /* 朱（差し色。ごく控えめに使う） */
  --usuzumi:   #5d6472;  /* 薄墨（補足文字） */
  --keisen:    #ddd8cc;  /* 罫線 */

  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  --wrap: 960px;
}

* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 1.0625rem;   /* 17px 相当。読みやすさ優先 */
  line-height: 1.9;
  letter-spacing: 0.02em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ai); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { color: var(--shu); }
a:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* 読み飛ばしリンク（キーボード操作用） */
.skip {
  position: absolute; left: -9999px;
  background: var(--sumi); color: #fff; padding: .6em 1em;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

/* ---------- ヘッダー ---------- */
.site-header {
  background: var(--washi);
  border-bottom: 1px solid var(--keisen);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1rem 0;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
}
.brand-mark {
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 50%;
  background: var(--sumi);
  position: relative;
  overflow: hidden;
}
/* 月の満ち欠けを模した印 */
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--washi);
  border-radius: 50%;
  transform: translateX(-38%);
}
.brand-text { font-family: var(--mincho); line-height: 1.3; }
.brand-text strong { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; }
.brand-text small { display: block; font-size: .8rem; color: var(--usuzumi); letter-spacing: .18em; }

/* ---------- ナビゲーション ---------- */
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
}
.nav a {
  display: inline-block;
  padding: .2em 0;
  font-size: .95rem;
  text-decoration: none;
  color: var(--sumi);
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--shu); color: var(--shu); }
.nav a[aria-current="page"] { border-bottom-color: var(--sumi); font-weight: 600; }

/* ---------- 扉（各ページ上部） ---------- */
.hero {
  background: var(--sumi);
  color: #f2efe8;
  padding: 3rem 0 3.25rem;
}
.hero .wrap { display: grid; gap: 2rem; align-items: center; }
.hero h1 {
  font-family: var(--mincho);
  font-size: clamp(1.6rem, 5.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  margin: 0 0 .8rem;
}
.hero p { margin: 0; color: #cdd3e0; }
.eyebrow {
  font-family: var(--mincho);
  font-size: .8rem; letter-spacing: .35em;
  color: #8f9bb5; margin: 0 0 1rem;
}

/* 九星盤（洛書）— このサイトの目印 */
.kyusei {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 11.5rem; aspect-ratio: 1;
  border: 1px solid #4a5573;
  justify-self: start;
}
.kyusei span {
  display: grid; place-items: center;
  font-family: var(--mincho);
  font-size: 1.35rem;
  color: #b9c2d6;
  border: 1px solid #333e5c;
}
.kyusei .center { color: var(--washi); background: #202b48; }

@media (min-width: 720px) {
  .hero .wrap { grid-template-columns: 1fr auto; }
  .kyusei { justify-self: end; }
}

/* 下層ページの扉は控えめに */
.hero.simple { padding: 2.25rem 0 2.5rem; }
.hero.simple h1 { margin-bottom: 0; }

/* ---------- 本文 ---------- */
main { padding: 3rem 0 4rem; }

section + section { margin-top: 3rem; }

h2 {
  font-family: var(--mincho);
  font-size: 1.4rem; font-weight: 600; letter-spacing: .08em;
  margin: 0 0 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--keisen);
}
h3 {
  font-family: var(--mincho);
  font-size: 1.15rem; font-weight: 600; letter-spacing: .06em;
  margin: 2rem 0 .6rem;
}
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.1rem; }

ul.list { padding-left: 1.2em; margin: 0 0 1.2em; }
ul.list li { margin-bottom: .4em; }

/* ---------- カード ---------- */
.cards {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
  background: var(--washi);
  border: 1px solid var(--keisen);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; }
.card p { font-size: .95rem; color: var(--usuzumi); }

/* できることの一覧（項目＋説明） */
.feature {
  background: var(--washi);
  border: 1px solid var(--keisen);
  border-left: 3px solid var(--ai);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}
.feature h3 {
  margin: 0 0 .5rem;
  font-size: 1.08rem;
  line-height: 1.6;
}
.feature p {
  margin: 0;
  font-size: .96rem;
  color: var(--usuzumi);
}

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  background: var(--washi);
  font-size: .98rem;
}
th, td {
  border: 1px solid var(--keisen);
  padding: .8em 1em;
  text-align: left;
  vertical-align: top;
}
th {
  background: #efeade;
  font-weight: 600;
  white-space: nowrap;
}

/* 日程表（毎回書き換える表）— 空欄でも高さが保たれるように */
table.schedule td { height: 2.9em; }
table.schedule td:empty::after { content: "―"; color: var(--keisen); }
table.schedule thead th { white-space: nowrap; }
.schedule-note { font-size: .92rem; color: var(--usuzumi); margin-top: .8rem; }

.small-note { font-size: .87rem; color: var(--usuzumi); }

/* ---------- 補足の囲み ---------- */
.note {
  background: var(--washi);
  border-left: 3px solid var(--shu);
  padding: 1.2rem 1.4rem;
  font-size: .97rem;
}

/* ---------- 原稿待ちの目印（公開前に必ず削除してください） ---------- */
.todo {
  border: 2px dashed var(--shu);
  background: #fdf6f4;
  color: var(--shu);
  padding: 1.2rem 1.4rem;
  font-size: .95rem;
}
.todo strong { display: block; margin-bottom: .3em; }

/* ---------- 行動を促す箇所 ---------- */
.cta {
  display: inline-block;
  background: var(--sumi);
  color: #fff;
  text-decoration: none;
  padding: .8em 2em;
  letter-spacing: .1em;
  font-size: .98rem;
}
.cta:hover { background: var(--shu); color: #fff; }

/* ---------- フッター ---------- */
.site-footer {
  background: var(--washi);
  border-top: 1px solid var(--keisen);
  padding: 2.5rem 0;
  font-size: .9rem;
  color: var(--usuzumi);
}
.site-footer .footer-nav ul {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
}
.site-footer a { color: var(--usuzumi); }
.copyright { margin: 0; font-size: .85rem; }


/* ---------- ここから index 用に追加 ---------- */

/* 九星盤・十二支盤（方位つき） */
.ban-fig { margin: 1.8rem 0 2.2rem; text-align: center; --cell: 3.3rem; }
.ban-frame {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  align-items: center; justify-items: center;
  gap: .35rem .6rem;
}
.ban-frame .dir {
  font-family: var(--mincho); font-size: .85rem;
  color: var(--usuzumi); letter-spacing: .1em;
}
.dir-s { grid-column: 2; grid-row: 1; }
.dir-n { grid-column: 2; grid-row: 3; }
.dir-e { grid-column: 1; grid-row: 2; }
.dir-w { grid-column: 3; grid-row: 2; }
.ban-frame .ban { grid-column: 2; grid-row: 2; }
.ban {
  display: grid; grid-template-columns: repeat(3, var(--cell, 3.3rem));
  border: 1px solid var(--sumi); background: var(--washi);
}
.ban span {
  aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--mincho); font-size: 1.2rem;
  border: 1px solid var(--keisen);
}
.ban .center { background: #efeade; font-weight: 600; }
.ban .shi { display: block; font-size: .68rem; line-height: 1; color: var(--shu); }
.ban-fig figcaption {
  font-size: .87rem; color: var(--usuzumi); margin-top: .8rem;
}
@media (min-width: 480px) {
  .ban-fig { --cell: 4rem; }
  .ban-fig .ban span { font-size: 1.35rem; }
}

/* 盤の外側の縁に十二支を置く */
.ban-outer {
  display: inline-grid;
  grid-template-columns: 1.4rem repeat(3, var(--cell, 3.3rem)) 1.4rem;
  grid-template-rows:    1.4rem repeat(3, var(--cell, 3.3rem)) 1.4rem;
  align-items: center; justify-items: center;
}
.ban-outer .ban { grid-column: 2 / 5; grid-row: 2 / 5; }
.ban-outer .edge {
  font-family: var(--mincho); font-size: .82rem;
  color: var(--shu); line-height: 1;
}
.edge.t1 { grid-column: 2; grid-row: 1; }
.edge.t2 { grid-column: 3; grid-row: 1; }
.edge.t3 { grid-column: 4; grid-row: 1; }
.edge.b1 { grid-column: 2; grid-row: 5; }
.edge.b2 { grid-column: 3; grid-row: 5; }
.edge.b3 { grid-column: 4; grid-row: 5; }
.edge.l1 { grid-column: 1; grid-row: 2; }
.edge.l2 { grid-column: 1; grid-row: 3; }
.edge.l3 { grid-column: 1; grid-row: 4; }
.edge.r1 { grid-column: 5; grid-row: 2; }
.edge.r2 { grid-column: 5; grid-row: 3; }
.edge.r3 { grid-column: 5; grid-row: 4; }

/* 干支の並び（己亥8白年…） */
.ganshiki {
  font-family: var(--mincho);
  font-size: 1.15rem; letter-spacing: .05em;
  background: var(--washi);
  border: 1px solid var(--keisen);
  padding: 1rem 1.2rem;
  overflow-x: auto; white-space: nowrap;
}
.tbl-cap {
  font-family: var(--mincho); text-align: left;
  padding-bottom: .5em; color: var(--usuzumi); font-size: .9rem;
}

/* 四つの盤を横に並べる */
.ban-row {
  display: grid; gap: 1.4rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  margin: 1.6rem 0 2.2rem;
}
.ban-row figure { margin: 0; text-align: center; }
.ban-row figcaption {
  font-family: var(--mincho); font-size: .9rem;
  color: var(--usuzumi); margin-bottom: .5rem; letter-spacing: .1em;
}
.ban-row { --cell: 2.2rem; }
.ban-row .ban span { font-size: 1rem; }
@media (min-width: 700px) {
  .ban-row { grid-template-columns: repeat(4, minmax(0, 1fr)); --cell: 2.6rem; }
  .ban-row .ban span { font-size: 1.15rem; }
}
.ban span:empty { background: #f4f1ea; }

/* 会名のよみ */
.hero .yomi {
  font-family: var(--mincho);
  font-size: 1rem; letter-spacing: .3em;
  color: #9aa5bd; margin: -.4rem 0 1rem;
}

/* ヘッダーの「鑑定のご案内」を目立たせる */
.nav .nav-cta a {
  background: var(--shu);
  color: #fff;
  padding: .35em 1em;
  border-bottom: none;
}
.nav .nav-cta a:hover { background: var(--sumi); color: #fff; border-bottom: none; }
.nav .nav-cta a[aria-current="page"] { background: var(--sumi); }

/* 扉のボタン */
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-actions a {
  display: inline-block;
  padding: .7em 1.8em;
  text-decoration: none;
  letter-spacing: .08em;
  font-size: .97rem;
  border: 1px solid #6b769a;
  color: #f2efe8;
}
.hero-actions a.primary { background: var(--shu); border-color: var(--shu); color: #fff; }
.hero-actions a:hover { background: #f2efe8; color: var(--sumi); border-color: #f2efe8; }
.hero-actions a.primary:hover { background: #fff; color: var(--shu); border-color: #fff; }

/* 写真と説明 */
figure.photo { margin: 0 0 2.5rem; text-align: center; }
figure.photo img {
  width: 100%; max-width: 420px;   /* 写真の実寸に合わせ、引き伸ばさない */
  margin-inline: auto;
  border: 1px solid var(--keisen);
}
figure.photo figcaption {
  font-size: .87rem; color: var(--usuzumi);
  padding-top: .6em;
}

/* 「くわしく見る →」 */
.arrow { display: inline-block; margin-top: .4rem; font-size: .95rem; text-decoration: none; }
.arrow::after { content: " →"; }
.arrow:hover { text-decoration: underline; }

/* 鑑定へのお誘い */
.invite {
  background: var(--sumi);
  color: #f2efe8;
  padding: 2.5rem 2rem;
  text-align: center;
}
.invite h2 { border-bottom: none; color: #fff; margin-bottom: .8rem; }
.invite p { color: #cdd3e0; max-width: 34em; margin-inline: auto; }
.invite .tel {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--mincho); font-size: 1.5rem; letter-spacing: .06em;
  color: #fff; text-decoration: none;
}
.invite .tel:hover { color: #fff; text-decoration: underline; }
.invite .cta { background: var(--shu); }
.invite .cta:hover { background: #fff; color: var(--shu); }

/* フッターの三段組 */
.footer-cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: 2rem;
}
.footer-cols h2 {
  font-size: .95rem; letter-spacing: .12em;
  border-bottom: none; margin: 0 0 .6rem; padding: 0;
  color: var(--sumi);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: .35em; }
.footer-cols address { font-style: normal; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}