/* =========================
   Page Vars
========================= */
:root{
  --bg-hero:#f8f0e3;
  --brand:#c94a37;
  --ink:#2c3e50;
  --paper:#f5f2ee;
  --line:#e0dbd6;
  --text:#333;
  --muted:#666;
}

/* ベース補助（共通CSSに container が無い場合の保険） */
.container{max-width:1000px;margin:0 auto;padding:0 20px}

/* =========================
   Page Head
========================= */
.pagehead{
  background:#fff;
  padding:28px 0 12px;
  border-bottom:1px solid #eee;
}
.breadcrumbs{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:10px;
}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--brand);text-decoration:underline}
.pagetitle{
  font-size:1.6rem;
  font-weight:normal;
  color:var(--ink);
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.pagetitle::after{
  content:"";
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:60px;height:2px;background:var(--ink);
}

/* =========================
   Article Card
========================= */
.article{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 2px 15px rgba(0,0,0,.08),0 0 40px rgba(0,0,0,.03);
  padding:28px 24px;
  margin:28px 0 60px;
  overflow:hidden;
  animation:fadeUp .5s ease-out both;
}
.article::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("/content/images/flower-pattern.webp");
  background-size:300px;background-repeat:repeat;
  opacity:.05;pointer-events:none;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  color:var(--muted);font-size:.92rem;margin-bottom:10px;position:relative;z-index:1;
}
.meta .date{letter-spacing:.03em}
.label-new{
  background:var(--brand);color:#fff;border-radius:4px;
  padding:2px 8px;font-size:.8rem;
}

.article h1{
  font-size:1.4rem;line-height:1.6;font-weight:normal;color:var(--ink);
  margin:6px 0 18px;position:relative;z-index:1;
}

.lead{
  background:#fff;border:1px solid #eee;border-left:4px solid var(--brand);
  border-radius:6px;padding:14px 16px;margin:0 0 18px;position:relative;z-index:1;
}

.article p{position:relative;z-index:1}
.article p + p{margin-top:14px}

.callout{
  background:#fff;border:1px dashed var(--line);
  border-radius:6px;padding:14px 16px;margin-top:18px;position:relative;z-index:1;
}

/* =========================
   Actions
========================= */
.actions{
  display:flex;
  flex-direction: column;     /* ← 縦並びに */
  align-items: flex-start;     /* ← 左寄せ */
  gap:8px;                    /* ← ボタン間の余白 */
  margin:28px 0 40px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:50px;border:none;
  background:var(--brand);color:#fff;font-weight:bold;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.btn.secondary{background:#222}
.btn .arrow{font-weight:normal}

/* =========================
   Footer 微調整（共通に準拠）
========================= */
footer{
  background:#f5f5f5;
  margin-top:40px;padding:40px 20px 20px;border-top:1px solid #ddd;color:var(--muted);
}
footer .container a{color:var(--ink)}
footer .container a:hover{color:var(--brand)}

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  .pagetitle{font-size:1.4rem}
  .article{padding:22px 16px}
  .article h1{font-size:1.25rem}
  .actions{flex-direction:column}
  .btn{width:100%}
}