/* ヒトリキカク：昭和レトロの一工夫（トップページだけで読み込む）
 * ヒーローは今のまま、その下の4か所に小さく入れる。
 * 外したいときは index.html の <link rel="stylesheet" href="assets/retro.css"> を消せば元に戻る。
 */
:root{
  --retro-red:#C8392B;      /* 朱肉・ハンコ */
  --retro-cream:#FBF4E2;    /* わら半紙・喫茶店のメニュー */
  --retro-brown:#7A5A3A;    /* 木の枠・コーヒー */
  --retro-navy:#1F3A7A;     /* ホーロー看板の地 */
  --retro-enamel:#F6EFD9;   /* ホーロー看板の白 */
  --retro-yellow:#FFD86B;
}

/* ---------- 1. 新着情報：日めくりとハンコ ---------- */
#news .news-tag{
  background:transparent; color:var(--retro-red);
  border:2px solid var(--retro-red); border-radius:4px;
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(200,57,43,.55);
  font-weight:800; letter-spacing:.18em; padding:3px 8px 3px 10px;
  transform:rotate(-4deg); opacity:.9;
}
/* 日めくり（日付のあるカードだけ）：右上に1枚 */
#news .himekuri{
  float:right; margin:-6px -4px 8px 12px; width:58px;
  background:#fff; border:1px solid #CFC6B4; border-radius:3px;
  box-shadow:0 2px 0 #E7DFCD, 0 4px 0 #F2ECDF;          /* 下に重なった紙 */
  text-align:center; line-height:1.1; position:relative; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
}
#news .himekuri::before{                                   /* 上のとじ穴 */
  content:""; position:absolute; top:3px; left:50%; width:26px; height:5px; margin-left:-13px;
  background:radial-gradient(circle, #8A7F6C 0 2px, transparent 2.5px) 0 0/13px 5px repeat-x;
}
#news .hm-m{ display:block; background:var(--retro-red); color:#fff; font-size:.66rem; font-weight:700; padding:9px 0 3px; letter-spacing:.08em; }
#news .hm-d{ display:block; font-size:1.65rem; font-weight:700; color:#2A2A2A; padding:4px 0 0; }
#news .hm-y{ display:block; font-size:.58rem; color:#8A7F6C; padding:0 0 5px; letter-spacing:.06em; }

/* ---------- 2. 「休む」欄：喫茶店のメニュー ---------- */
.pillar.rest{
  background:
    linear-gradient(var(--retro-cream), var(--retro-cream)) padding-box;
  border-color:#E4D6B8; border-top-color:var(--accent);
}
.pillar.rest .pillar-icon{ background:#F3E6C8; }
.pillar.rest .p-items{
  position:relative; gap:0; padding:26px 14px 10px;
  border:1px solid #CDB894; border-radius:6px;
  box-shadow:inset 0 0 0 4px var(--retro-cream), inset 0 0 0 5px #CDB894;   /* 二重の枠 */
  background:#FFFCF4;
}
.pillar.rest .p-items::before{
  content:"― お品書き ―"; position:absolute; top:7px; left:0; right:0; text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; font-size:.72rem; letter-spacing:.3em; color:var(--retro-brown);
}
.pillar.rest .p-item{
  background:transparent; border:none; border-bottom:1px dotted #B9A47E; border-radius:0;
  padding:11px 4px 10px;
}
.pillar.rest li:last-child .p-item{ border-bottom:none; }
.pillar.rest a.p-item:hover{ box-shadow:none; transform:none; background:rgba(205,184,148,.14); }
.pillar.rest .p-item .p-name{ font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; font-weight:700; color:#3A2E22; }
.pillar.rest .p-item .p-desc{ color:#6B5C48; }

/* ---------- 3. プロフィール：原稿用紙 ---------- */
/* 1マス＝1文字：字の幅1em＋字間0.4em＝マス1.4em、行の高さ2.24em（マス1.4em＋行間0.84em） */
.profile-lead{
  --cell:1.4em; --row:2.24em; --ink-line:rgba(200,57,43,.22); --paper:#FFFDF8;
  font-size:.95rem;
  margin-top:20px; padding:14px 16px 14px;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, var(--ink-line) 0 1px, transparent 1px var(--cell), var(--ink-line) var(--cell) calc(var(--cell) + 1px), transparent calc(var(--cell) + 1px) var(--row)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--cell) + 1px), var(--paper) calc(var(--cell) + 1px) var(--row)),
    repeating-linear-gradient(to right, var(--ink-line) 0 1px, transparent 1px var(--cell));
  /* 字がマスのまん中に来るよう、縦は行の中で .42em 下げ、横は .2em 左へ */
  background-position:0 calc(14px + .42em), 0 calc(14px + .42em), calc(16px - .2em) 0;
  border:1.5px solid rgba(200,57,43,.45);
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(200,57,43,.25);
  position:relative;
}
.profile-lead p{
  margin:0 0 var(--row); max-width:none; font-size:1em;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; color:#3A332C;
  letter-spacing:.4em; line-height:var(--row);
}
.profile-lead p:last-child{ margin-bottom:0; }
.profile-lead::after{
  content:"ヒトリキカク"; position:absolute; right:10px; bottom:-18px;
  font-size:.62rem; letter-spacing:.2em; color:rgba(200,57,43,.6);
}

/* ---------- 4. フッター：ホーロー看板 ---------- */
footer.retro-footer{ padding:40px 0 48px; }
footer.retro-footer .footer-inner{
  width:calc(100% - 56px); max-width:calc(var(--maxw) - 56px); margin:0 auto; padding:20px 30px;
  background:
    radial-gradient(circle at 12px 12px, #C9CED8 0 3px, #7C8494 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #C9CED8 0 3px, #7C8494 3.5px, transparent 4.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #C9CED8 0 3px, #7C8494 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #C9CED8 0 3px, #7C8494 3.5px, transparent 4.5px),
    var(--retro-navy);
  border-radius:12px;
  box-shadow:inset 0 0 0 5px var(--retro-navy), inset 0 0 0 7px var(--retro-enamel), 0 3px 0 #13265A, 0 8px 20px rgba(19,38,90,.25);
}
footer.retro-footer p{
  color:var(--retro-enamel); font-weight:800; font-size:.92rem; letter-spacing:.12em;
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
}
footer.retro-footer .footer-links a{ color:var(--retro-yellow); font-weight:700; }
footer.retro-footer .footer-links a:hover{ color:#fff; }

@media (max-width:560px){
  footer.retro-footer .footer-inner{ width:calc(100% - 32px); padding:20px 24px; }
  #news .himekuri{ width:52px; }
}