/* =========================
   Base
========================= */
:root {
  --bg: #FFEBD1;
  --side-pad: 25px;
  --cta-gap: 25px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body.story-page {
  background: var(--bg);
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 画像のはみ出し防止（スマホ重要） */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   Layout wrapper
   - ページ左右 25px 余白
========================= */
.site-header,
main,
.site-footer {
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

/* =========================
   Header
========================= */
.site-header {
  padding-top: 16px;
}

.header-inner {
  position: fixed;         /* 左上固定 */
  top: 16px;
  left: var(--side-pad);
  width: 180px;            /* 固定幅 */
  z-index: 10;
}

.header-inner .logo {
  display: block;
}

.header-inner img {
  width: 100%;
  height: auto;
}

/* ロゴの下にコンテンツが潜らないように余白（ロゴ高さは仮で調整可） */
main {
  padding-top: 84px;
}

/* =========================
   Hero
========================= */
.mfflp-hero {
  width: 100%;
}

.mfflp-hero-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;          /* 中央 */
}

.mfflp-friend-bg-img {
  width: 100%;
  height: auto;
}

.mfflp-friend-bg-img {
  width: 100%;
  height: auto;
}

.error-headerimg {
  width: 100%;
  height: auto;
}

.error-headerimg {
  width: 100%;
  height: auto;
}

.error-messaageimg {
  width: 100%;
  height: auto;
}

.error-messaageimg {
  width: 100%;
  height: auto;
}

/* =========================
   CTA row
========================= */
.mff-friend-cta {
  display: flex;
  flex-direction: row;
  gap: var(--cta-gap);     /* 画像間 25px */
  margin-top: 20px;
}

.mff-friend-cta a {
  display: block;
  flex: 1 1 0;             /* 2つを同じ幅で並列 */
}

.mff-friend-cta a img {
  width: 100%;             /* 各CTA画像を最大 */
  height: auto;
}


/* =========================
   Footer
========================= */
.site-footer {
  padding-top: 28px;
  padding-bottom: 28px;
}

.site-footer small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}