/* =========================================================
   ウガリット神話 解説サイト  共通スタイルシート
   色のイメージ：粘土板（クレイ）＋ラピスラズリ（青）＋金
   ========================================================= */

:root{
  --clay:#f6f1e7;        /* 背景：粘土色 */
  --clay-dark:#ece3d2;   /* 少し濃い粘土色 */
  --ink:#2b2521;         /* 本文の文字色 */
  --ink-soft:#5c534b;    /* 補足の文字色 */
  --lapis:#1d3c6e;       /* ラピスラズリの青（見出し・リンク） */
  --lapis-light:#33598f;
  --gold:#b8862f;        /* 金（アクセント） */
  --terra:#a8432a;       /* テラコッタ（強調） */
  --sea:#2f6f6a;         /* 海の神ヤムの緑青 */
  --line:#d9cfba;        /* 罫線 */
  --white:#fffdf8;
  --shadow:0 2px 14px rgba(60,45,25,.10);
  --radius:10px;
  --maxw:920px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:76px;}

body{
  margin:0;
  background:var(--clay);
  color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  font-size:17px;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-text-size-adjust:100%;
}

/* ---------- ヘッダーとナビゲーション ---------- */
header.site{
  background:linear-gradient(160deg,#16305a 0%,#1d3c6e 55%,#274b83 100%);
  color:#f3ead9;
  border-bottom:4px solid var(--gold);
}
.site-inner{max-width:var(--maxw);margin:0 auto;padding:20px 20px 16px;}
.site-title{
  margin:0;font-size:1.5rem;letter-spacing:.08em;font-weight:600;
}
.site-title a{color:#fff;text-decoration:none;}
.site-sub{margin:.35em 0 0;font-size:.83rem;color:#c9d6ea;letter-spacing:.12em;line-height:1.7;}

nav.gnav{
  position:sticky;top:0;z-index:50;
  background:rgba(29,60,110,.97);
  border-bottom:1px solid rgba(184,134,47,.6);
  backdrop-filter:saturate(140%) blur(4px);
}
nav.gnav ul{
  max-width:var(--maxw);margin:0 auto;padding:0 10px;
  list-style:none;display:flex;flex-wrap:wrap;gap:2px;
}
nav.gnav a{
  display:block;padding:9px 12px;color:#dfe7f3;text-decoration:none;
  font-size:.83rem;font-family:system-ui,"Hiragino Sans","Yu Gothic",sans-serif;
  letter-spacing:.06em;border-bottom:3px solid transparent;
}
nav.gnav a:hover{color:#fff;background:rgba(255,255,255,.08);}
nav.gnav a.current{color:#ffd98a;border-bottom-color:var(--gold);}

/* ---------- 本文レイアウト ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:0 20px 80px;}

.hero{
  background:var(--white);
  border:1px solid var(--line);
  border-top:5px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px 28px 26px;
  margin:26px 0 30px;
}
.hero h1{
  margin:0 0 .5em;font-size:1.85rem;line-height:1.5;color:var(--lapis);
  letter-spacing:.04em;
}
.hero .lead{margin:0;font-size:1.02rem;color:var(--ink);}
.kicker{
  display:inline-block;font-size:.74rem;letter-spacing:.18em;
  color:var(--terra);border:1px solid var(--terra);border-radius:3px;
  padding:2px 10px;margin-bottom:14px;
  font-family:system-ui,"Hiragino Sans",sans-serif;
}

section{margin:0 0 44px;}

h2{
  font-size:1.35rem;color:var(--lapis);margin:52px 0 18px;
  padding:0 0 10px;border-bottom:2px solid var(--line);
  letter-spacing:.05em;position:relative;
}
h2::after{
  content:"";position:absolute;left:0;bottom:-2px;width:80px;height:2px;
  background:var(--gold);
}
h3{
  font-size:1.1rem;color:var(--terra);margin:34px 0 12px;
  padding-left:12px;border-left:4px solid var(--gold);letter-spacing:.04em;
}
h4{font-size:1rem;color:var(--lapis-light);margin:24px 0 8px;letter-spacing:.04em;}

p{margin:0 0 1.2em;}
a{color:var(--lapis);text-underline-offset:3px;}
a:hover{color:var(--terra);}

ul,ol{padding-left:1.6em;margin:0 0 1.3em;}
li{margin-bottom:.5em;}

strong{color:var(--terra);font-weight:600;}
em{font-style:normal;background:linear-gradient(transparent 62%,rgba(184,134,47,.35) 62%);}

/* ---------- 目次 ---------- */
.toc{
  background:var(--clay-dark);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 24px;margin:0 0 40px;
}
.toc h2{
  margin:0 0 10px;font-size:1rem;border:none;padding:0;color:var(--lapis);
  font-family:system-ui,"Hiragino Sans",sans-serif;letter-spacing:.1em;
}
.toc h2::after{display:none;}
.toc ol{margin:0;padding-left:1.4em;font-size:.92rem;}
.toc li{margin-bottom:.3em;}
.toc a{text-decoration:none;}
.toc a:hover{text-decoration:underline;}

/* ---------- 囲み記事 ---------- */
.box{
  background:var(--white);border:1px solid var(--line);
  border-left:6px solid var(--lapis);
  border-radius:var(--radius);padding:20px 24px;margin:26px 0;
  box-shadow:var(--shadow);
}
.box > :last-child{margin-bottom:0;}
.box .box-title{
  display:block;font-size:.88rem;letter-spacing:.12em;color:var(--lapis);
  font-family:system-ui,"Hiragino Sans",sans-serif;font-weight:700;
  margin-bottom:8px;
}
.box.note{border-left-color:var(--gold);}
.box.note .box-title{color:var(--gold);}
.box.caution{border-left-color:var(--terra);background:#fdf5f1;}
.box.caution .box-title{color:var(--terra);}
.box.tablet{border-left-color:var(--sea);background:#f2f7f5;}
.box.tablet .box-title{color:var(--sea);}

/* ---------- 引用（神話の訳文） ---------- */
blockquote{
  margin:22px 0;padding:18px 22px 18px 26px;
  background:#fbf7ee;
  border-left:5px solid var(--gold);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:1rem;line-height:2.1;color:#3a322a;
}
blockquote p{margin:0 0 .8em;}
blockquote p:last-child{margin-bottom:0;}
blockquote cite{
  display:block;margin-top:10px;font-style:normal;font-size:.8rem;
  color:var(--ink-soft);text-align:right;
  font-family:system-ui,"Hiragino Sans",sans-serif;
}

/* ---------- 表 ---------- */
.table-wrap{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch;}
table{
  border-collapse:collapse;width:100%;min-width:520px;
  background:var(--white);font-size:.92rem;line-height:1.75;
  box-shadow:var(--shadow);
}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
thead th{
  background:var(--lapis);color:#fff;font-weight:600;letter-spacing:.06em;
  font-family:system-ui,"Hiragino Sans",sans-serif;font-size:.86rem;
}
tbody tr:nth-child(even){background:#faf6ee;}
td.name{white-space:nowrap;color:var(--terra);font-weight:600;}

/* ---------- 神々カード ---------- */
.god-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:24px 0;}
.god-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);border-top:4px solid var(--gold);
}
.god-card h4{margin:0 0 4px;font-size:1.05rem;color:var(--lapis);}
.god-card .roman{font-size:.75rem;color:var(--ink-soft);letter-spacing:.08em;display:block;margin-bottom:8px;font-family:system-ui,sans-serif;}
.god-card p{font-size:.9rem;line-height:1.8;margin:0;}

/* ---------- 年表 ---------- */
.timeline{list-style:none;padding:0;margin:24px 0;border-left:3px solid var(--gold);}
.timeline li{position:relative;padding:0 0 20px 26px;margin:0;}
.timeline li::before{
  content:"";position:absolute;left:-9px;top:9px;width:15px;height:15px;
  background:var(--clay);border:3px solid var(--lapis);border-radius:50%;
}
.timeline .year{
  display:block;font-family:system-ui,"Hiragino Sans",sans-serif;
  font-size:.82rem;letter-spacing:.08em;color:var(--terra);font-weight:700;
}

/* ---------- 系図・図解 ---------- */
figure{margin:26px 0;text-align:center;}
figure svg{max-width:100%;height:auto;}
figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:8px;font-family:system-ui,sans-serif;}

/* ---------- ページ送り ---------- */
.pager{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:56px 0 0;padding-top:22px;border-top:2px solid var(--line);
  font-family:system-ui,"Hiragino Sans",sans-serif;font-size:.88rem;
}
.pager a{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 18px;text-decoration:none;
  box-shadow:var(--shadow);max-width:46%;
}
.pager a:hover{border-color:var(--gold);background:#fffaf0;}
.pager span{display:block;font-size:.72rem;color:var(--ink-soft);letter-spacing:.1em;}

/* ---------- トップページのカード ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;margin:26px 0;}
.card{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;
  color:var(--ink);box-shadow:var(--shadow);transition:.18s;
  border-top:4px solid var(--lapis);
}
.card:hover{transform:translateY(-3px);border-top-color:var(--gold);color:var(--ink);}
.card .num{
  font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.2em;color:var(--gold);
}
.card h3{margin:4px 0 8px;padding:0;border:none;font-size:1.08rem;color:var(--lapis);}
.card p{margin:0;font-size:.88rem;line-height:1.8;color:var(--ink-soft);}

/* ---------- 小物 ---------- */
.ug{font-family:"Times New Roman",serif;font-style:italic;color:var(--sea);letter-spacing:.03em;}
.ktu{
  font-family:system-ui,sans-serif;font-size:.76rem;background:var(--clay-dark);
  border:1px solid var(--line);border-radius:3px;padding:1px 7px;color:var(--ink-soft);
  white-space:nowrap;letter-spacing:.04em;
}
.dl-term{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:4px 22px 14px;box-shadow:var(--shadow);}
dl dt{font-weight:700;color:var(--lapis);margin-top:16px;letter-spacing:.04em;}
dl dd{margin:4px 0 0;padding-left:0;font-size:.95rem;}

hr.orn{
  border:none;text-align:center;margin:44px 0;overflow:visible;
}
hr.orn::after{
  content:"❖ ❖ ❖";color:var(--gold);letter-spacing:.6em;font-size:.8rem;
}

/* ---------- フッター ---------- */
footer.site{
  background:#16305a;color:#c4d0e4;margin-top:40px;
  border-top:4px solid var(--gold);
}
footer.site .f-inner{
  max-width:var(--maxw);margin:0 auto;padding:28px 20px 34px;
  font-size:.83rem;line-height:1.9;
  font-family:system-ui,"Hiragino Sans",sans-serif;
}
footer.site a{color:#ffd98a;}
footer.site .sig{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:.78rem;color:#96a6c1;}

/* ---------- スマホ対応 ---------- */
@media (max-width:640px){
  body{font-size:16px;line-height:1.9;}
  .site-inner{padding:16px 16px 12px;}
  .site-title{font-size:1.15rem;}
  main{padding:0 14px 60px;}
  .hero{padding:22px 18px;}
  .hero h1{font-size:1.35rem;}
  h2{font-size:1.15rem;margin:40px 0 14px;}
  h3{font-size:1.02rem;}
  blockquote{padding:14px 16px;font-size:.95rem;}
  .box{padding:16px 18px;}
  .pager a{max-width:100%;width:100%;}
  nav.gnav a{padding:8px 9px;font-size:.78rem;}
}

/* ---------- 印刷 ---------- */
@media print{
  nav.gnav,.pager,footer.site{display:none;}
  body{background:#fff;font-size:11pt;}
  .box,blockquote,table{box-shadow:none;}
}

/* =========================================================
   外部サイト（ウィキメディア・コモンズ）から読み込む写真
   ========================================================= */

figure.photo{
  margin:28px 0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  text-align:center;
}
figure.photo img{
  display:block;width:100%;height:auto;
  background:var(--clay-dark);   /* 読み込み中の背景 */
}
/* 縦長の像・石碑用：高さを抑える */
figure.photo.tall img{
  width:auto;max-width:100%;max-height:520px;margin:0 auto;
}
figure.photo figcaption{
  padding:12px 18px 14px;
  font-size:.86rem;line-height:1.75;color:var(--ink);
  text-align:left;border-top:1px solid var(--line);
  background:#fbf7ee;
}
figure.photo .src{
  display:block;margin-top:6px;
  font-size:.74rem;color:var(--ink-soft);
  font-family:system-ui,"Hiragino Sans",sans-serif;
}
figure.photo .src a{color:var(--lapis-light);}

/* 写真を2枚横に並べる */
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0;}
.photo-row figure.photo{margin:0;}
.photo-row figure.photo img{height:230px;object-fit:cover;}

@media (max-width:640px){
  .photo-row{grid-template-columns:1fr;}
  .photo-row figure.photo img{height:auto;}
  figure.photo.tall img{max-height:380px;}
  figure.photo figcaption{padding:10px 14px 12px;font-size:.8rem;}
}