body {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
}

header {
  background: #f9f9f9;
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 1em;
}

/* ここを置き換え */
main{
  max-width: 980px;      /* ← 960～1100あたりで好みで */
  margin: 2em auto;
  padding: 1em;
}


form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

label {
  font-weight: bold;
}

input, select, button {
  padding: 0.5em;
  font-size: 1em;
}

button {
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #555;
}

#result {
  margin-top: 2em;
  padding: 1em;
  border: 1px solid #ddd;
  background: #fafafa;
}

footer {
  margin-top: 3em;
  padding: 1em;
  font-size: 0.9em;
  text-align: center;
  color: #666;
  border-top: 1px solid #ccc;
}

.kami-header {
  width: 100%;
  background: #f9f9f9;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}

.kami-grid {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.kami-box {
  flex: 1;
  max-width: 180px;
  text-align: center;
}

.kami-box img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.kami-label {
  margin-top: 6px;
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.kami-box.active img {
  border: 2px solid #000;
}
/* ── 神様ヘッダー ─────────────────────────────── */
.kami-hero{position:relative;width:100%;overflow:hidden;background:#fafafa;border-bottom:1px solid #e5e7eb}
.kami-hero img{width:100%;height:clamp(180px,28vw,320px);object-fit:cover;display:block}
.kami-hero__label{
  position:absolute;left:16px;bottom:14px;
  background:#111;color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:14px;opacity:.95
}

/* ── 占いフォーム ─────────────────────────────── */
.card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:16px}
.fortune-form{margin-top:16px}

.field label{display:block;font-weight:700;margin-bottom:.35rem}
.field input[type="text"],
.field input[type="date"],
.field textarea{
  width:100%;padding:.65rem .75rem;border:1px solid #dcdfe5;border-radius:8px;font-size:16px;
  background:#fff
}
/*.field textarea{resize:vertical;min-height:120px}*/
.readonly-wrap{display:block}
.readonly{padding:.65rem .75rem;border:1px dashed #d0d4da;border-radius:8px;background:#fafafa}
.hint{color:#666;font-size:.9rem;margin-top:.35rem}
.actions{display:flex;gap:8px;margin-top:12px}
.btn{background:#111;color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer}
.btn:hover{background:#333}
.btn-ghost{background:#fff;border:1px solid #ddd;color:#111}
.hide{display:none}

/* 横いっぱいにしたい行 */
.field--wide{grid-column:1/-1}

/* 入力の上寄せ＆幅いっぱい */
.field label{display:block;font-weight:700;margin-bottom:.35rem}
.field textarea,.field input[type="text"],.field input[type="date"],
#question,#answer{width:100% !important;box-sizing:border-box}
#question{min-height:160px}
#answer{min-height:320px}

/* 神様画像：フェード＆スケール */
/* 結果の左右レイアウト */
/* 画面幅に応じて 140〜220px の範囲で自動 */
/* 結果パネル：画像＋結果（スマホは縦） */
#resultPane{
  display:grid;
  grid-template-columns: clamp(140px, 18vw, 200px) 1fr;
  gap:20px; align-items:start;
}
@media (max-width:640px){ #resultPane{ grid-template-columns:1fr; } }

.deity-col img{ width:100%; height:auto; object-fit:contain; max-height:540px; }

.deity-col img.show{
  opacity:1;
  transform:scale(1);
}

/* 旧ヘッダー画像が残っている場合は強制で非表示 */
.kami-hero { display:none !important; }

/* 2カラムフォーム：モバイル1列 → 幅800px以上で2列。縦位置は上揃え */
.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 800px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

/* 神様画像カラム：初期は非表示（JSで結果が出たら表示） */
#deityCol{ display:none; }
#deityImg{
  width:100%; height:auto; max-height:540px; object-fit:contain;
  opacity:0; transition: opacity 10s ease;   /* ← ここを 5s に変更 */
}
#deityImg.show{ opacity:1; }
#resultText {
  white-space: pre-wrap;
  line-height: 1.7;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  min-height: 200px;
  flex: 1;             /* ← 横幅いっぱいに広げる */
}

.result-pane{display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:16px}
@media (max-width:720px){.result-pane{grid-template-columns:1fr}}

/*.deity-col{width:180px}
#deityImg{display:block;width:100%;height:auto;opacity:1}*/
.result-text{min-height:220px}

/* 結果パネルがスクロールで来たとき、上に 80px の余白を確保 */
#resultPane{ scroll-margin-top: 80px; }

/* ===== 左サイド壁紙（base.jpg） ========================= */
/* 幅や余白はここで調整できます */
:root{
  --wall-w: 240px;      /* 画像帯の幅（お好みで 220～280px など） */
  --wall-gap: 24px;     /* 壁紙と本文の間隔 */
}

/* 壁紙本体：bodyに has-wallpaper が付いている時だけ出す */
body.has-wallpaper::before{
  content:"";
  position: fixed;
  inset: 0 auto 0 0;               /* 左固定・全高 */
  width: var(--wall-w);
  background: #f7f7f7 url('/assets/bg/base.jpg') no-repeat center top;
  background-size: cover ;         /* 横長にならず、全体が収まる contain cover*/
  border-radius: 12px;              /* 角を少し丸く */
  /*box-shadow: 0 0 0 1px #eee inset, 6px 0 16px -8px rgba(0,0,0,.15);*/
  z-index: 0;
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0  2px  8px rgba(0,0,0,.10),
    0  0 10px rgba(0,0,0,.06);   /* ぼかし縁 */
}

/* 本文側は、壁紙の幅＋余白ぶんだけ右へオフセット */
.wrap{
  position: relative;
  z-index: 1;                       /* 壁紙より手前に */
  margin-left: calc(var(--wall-w) + var(--wall-gap));
}

/* スマホでは壁紙を隠して本文をフル幅に戻す */
@media (max-width: 900px){
  body.has-wallpaper::before{ display:none; }
  .wrap{ margin-left: 0; }
}
/* ======================================================== */

/* ===== 左サイド壁紙（可変オフセット版） =================== */
:root{
  --wall-w:    240px;   /* 壁紙の幅 */
  --wall-gap:   20px;   /* 壁紙と本文の間隔（0～/負数で重ねも可） */
  --wall-left:  40px;   /* 画面の左端からどれだけ右へ寄せるか */
}

/* 壁紙本体 */
body.has-wallpaper::before{
  content:"";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--wall-left);                 /* ← ここで“右に寄せる” */
  width: var(--wall-w);
  background: #f7f7f7 url('/assets/bg/base.jpg') no-repeat center top;
  background-size: cover;
  border-radius: 12px;
  z-index: 0;
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0  2px  8px rgba(0,0,0,.10),
    0  0 10px rgba(0,0,0,.06);   /* ぼかし縁 */
}

/* 本文は「左オフセット＋壁紙幅＋間隔」ぶんだけ右へ */
.wrap{
  position: relative;
  z-index: 1;
  margin-left: calc(var(--wall-left) + var(--wall-w) + var(--wall-gap));
}

/* カードの中でボタン行を右下へ寄せる */
.bank-actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end; /* ←右寄せのキモ */
  align-items: center;
  gap: .75rem;
}
/* スマホでは中央寄せにする場合（任意） */
@media (max-width: 520px){
  .bank-actions{ justify-content: center; }
}
/* 1カラムで中央にカードを置く */
.grid.onecol{ display:block; }
.grid.onecol > .card{ max-width:620px; margin:0 auto; }