/* ====== ベース ====== */
:root{ --ink:#222; --muted:#555; --line:#ccc; --paper:#fff; }
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family: tot-shizukardmin-stdn, sans-serif;; line-height:1.8; letter-spacing:.02em; font-size:14px;}
.wrap{max-width:1100px;margin:0 auto;padding:60px 120px 100px}
.h2{border-bottom:1px solid var(--line);font-size:18px;font-weight:700;padding:12px 0;margin:0 0 28px}

/* ====== 見えない額縁 ====== */
.frame{position:relative;}
.frame::before{content:"";position:absolute;inset:0;border:1px solid transparent}

/* ====== グリッド（中央テキスト用に広い“安全地帯”を確保） ====== */
.frame-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows: repeat(26, auto);
  gap:24px;
}

/* 画像：縦横比そのまま（縮小のみ） */
.ph{display:block;width:100%;height:auto;border:1px solid var(--line)}

/* ====== スロット（写真を個別調整可能に） ====== */
.slot{
  /* カスタム変数による調整 */
  --w: 100%;        /* 幅 */
  --scale: 1;       /* スケール */
  --tx: 0px;        /* 横方向移動 */
  --ty: 0px;        /* 縦方向移動 */

  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  transform-origin: top left;
}
.slot.origin-right{ transform-origin: top right; }

.ph-wrap{ width: var(--w); }
.ph-wrap .ph{ width: 100%; height: auto; }

/* ====== 位置指定 ====== */
.slot-a{grid-column:2/7;  grid-row:1/6;}   /* 薬師1 */
.slot-b{grid-column:6/12; grid-row:1/6;}   /* 薬師2 */
.slot-c{grid-column:2/6;  grid-row:19/26;} /* 節分1 */
.slot-d{grid-column:8/12; grid-row:19/26;} /* 節分2 */

/* ====== テキスト領域 ====== */
.center-text{
  grid-column:2/12; grid-row:5/18;
  border:1px solid var(--line); background:var(--paper);
  padding:28px; line-height:1.85;
}
.center-text p{margin:0 0 1.4em 0}

/* ====== モバイル（縦積み） ====== */
@media (max-width:900px){
  .wrap{padding:28px 16px 56px;max-width:none}
  .frame-grid{grid-template-columns:1fr;grid-template-rows:none}
  .slot-a,.slot-b,.slot-c,.slot-d,.center-text{grid-column:1/-1;grid-row:auto;transform:none}
  .center-text{padding:16px}
}

/* ====== モバイル時に02番写真を非表示 ====== */
@media (max-width:900px){
  .slot-b,
  .slot-d {
    display: none;
  }
}