@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;700&family=Noto+Sans+JP:wght@300;400;700&family=Zen+Old+Mincho:wght@600;700;900&display=swap");

/* ===== reset（#page-cms 配下のみ・詳細度0） ===== */
:where(#page-cms, #page-cms *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(#page-cms) img { display: block; max-width: none; border: 0; }
:where(#page-cms) a { text-decoration: none; color: inherit; }

/* ===== base / scale ===== */
#page-wrap-cms { width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden; }
#page-cms {
  width: 375px; position: relative; transform-origin: top left;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
  color: #000; line-height: 1.5;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

#page-cms .mincho-cms,
#page-cms .intro-body-cms,
#page-cms .camp-main-cms,
#page-cms .camp-body-cms,
#page-cms .badge-txt-cms,
#page-cms .work-ttl-cms,
#page-cms .catch-bar-cms,
#page-cms .free-row-cms { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }

/* letter-spacing utilities（Figma tracking 値） */
#page-cms .ls11-cms { letter-spacing: -1.1px; }
#page-cms .ls13n-cms { letter-spacing: -1.3px; }
#page-cms .ls16-cms { letter-spacing: -1.6px; }
#page-cms .ls24-cms { letter-spacing: -2.4px; }
#page-cms .ls32-cms { letter-spacing: -3.2px; }

/* ===== button ===== */
#page-cms .btn-cms { display: flex; transition: opacity .2s ease, transform .2s ease; cursor: pointer; text-decoration: none; }
#page-cms .btn-cms:hover { opacity: .8; transform: translateY(-2px); }

/* ===== decoration（絶対配置・Figma bbox 基準） ===== */
#page-cms .deco-cms { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#page-cms .deco-cms img { flex: none; }

/* ===== hero ===== */
#page-cms .hero-cms { position: relative; width: 375px; height: 281px; }
#page-cms .hero-cms img { width: 375px; height: 281px; }

/* ===== introduction ===== */
#page-cms .intro-sec-cms { position: relative; width: 375px; height: 773px; background: #eb2f64; z-index: 1; }
#page-cms .intro-frame-cms { position: absolute; left: 16px; top: 42px; width: 343px; height: 504.33px; }
#page-cms .intro-inner-cms { position: absolute; left: 0; top: 0; width: 375px; height: 568px; }
#page-cms .intro-ttl-cms img { position: absolute; left: 96.03px; top: 84.34px; width: 184px; height: 17px; }
#page-cms .intro-body-cms {
  position: absolute; left: 36px; top: 129px; width: 303px;
  font-weight: 700; font-size: 11px; line-height: 2; text-align: center; color: #000;
}
#page-cms .intro-body-cms p + p { margin-top: 22px; }
#page-cms .intro-strong-cms { font-weight: 900; }

#page-cms .profile-bg-cms {
  position: absolute; left: 0; top: 568px; width: 375px; height: 205px;
  background: linear-gradient(to bottom, #eb2f64 0%, #f4f7e4 74.519%);
}
#page-cms .profile-inner-cms { position: absolute; left: 0; top: 568px; width: 375px; height: 205px; }
#page-cms .profile-ttl-cms img { position: absolute; left: 135.65px; top: 4.34px; width: 105px; height: 18px; }
#page-cms .profile-body-cms {
  position: absolute; left: 20px; top: 41px; width: 335px;
  font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 300; font-size: 11px; line-height: 1.5; text-align: center; color: #000;
}
#page-cms .profile-body-cms p + p { margin-top: 16.5px; }

#page-cms .bara1-cms { left: 317px; top: 420px; width: 76px; height: 66px; filter: blur(3px); z-index: 2; }
#page-cms .bara1-cms img { width: 76px; height: 66px; }
#page-cms .bara3-cms { left: -17px; top: 189px; width: 87.34px; height: 42.43px; filter: blur(4px); z-index: 2; }
#page-cms .bara3-cms img { width: 87.34px; height: 42.43px; }
#page-cms .bara4-cms { left: -6px; top: 583px; width: 66px; height: 65px; z-index: 2; }
#page-cms .bara4-cms img { width: 66px; height: 65px; }
#page-cms .bara2-cms { left: 299.04px; top: -2px; width: 101.86px; height: 88.87px; z-index: 2; }
#page-cms .bara2-cms img { width: 87.86px; height: 51.55px; transform: rotate(30.34deg); }

/* ===== special campaign ===== */
#page-cms .camp-sec-cms { position: relative; width: 375px; height: 241px; background: #eb2f64; z-index: 3; }
#page-cms .camp-inner-cms { position: absolute; left: 0; top: 0; width: 375px; height: 241px; z-index: 2; }
#page-cms .camp-ttl-cms { position: absolute; left: 0; top: 48.04px; width: 375px; height: 65px; font-weight: 900; }
#page-cms .camp-ttl-cms img { position: absolute; left: 63.83px; top: 0; width: 248px; height: 18px; }
#page-cms .camp-main-cms {
  position: absolute; left: 0; top: 24.96px; width: 375px;
  font-weight: 900; font-size: 40px; line-height: 1; color: #fff; text-align: center; white-space: nowrap;
}
#page-cms .camp-body-cms {
  position: absolute; left: 16px; top: 133px; width: 343px;
  font-weight: 700; font-size: 12px; line-height: 2; letter-spacing: .84px; color: #fff; text-align: center; white-space: nowrap;
}
#page-cms .camp-dash-cms {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 300;
  font-size: 13px; line-height: 1.5; letter-spacing: .91px;
}
#page-cms .kazari-l-cms { left: -173.3px; top: -56px; width: 279.67px; height: 215.79px; z-index: 1; }
#page-cms .kazari-l-cms img { width: 261.23px; height: 189.41px; transform: rotate(-6.03deg); }
#page-cms .kazari-r-cms { left: 294.04px; top: -63.15px; width: 340.26px; height: 221.16px; z-index: 1; }
#page-cms .kazari-r-cms img { width: 319px; height: 180px; transform: rotate(-7.71deg); }

/* ===== works ===== */
#page-cms .works-cms { position: relative; width: 375px; }
#page-cms .work-sec-cms {
  position: relative; width: 375px;
  background: linear-gradient(to bottom, #eb2f64, #f2c28c);
}
#page-cms .work-bg-cms { position: absolute; left: 0; bottom: 0.25px; width: 375px; height: 354px; object-fit: cover; z-index: 0; }
#page-cms .work-card-cms { position: absolute; left: 16px; top: 20px; width: 343px; background: #fff; z-index: 1; }
#page-cms .work-frame-cms {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border: 3px solid #a81414; pointer-events: none; z-index: 3;
}

#page-cms .badge-cms { position: absolute; top: 32px; }
#page-cms .badge-l-cms { left: 20px; width: 303px; height: 41px; }
#page-cms .badge-l-cms img { width: 303px; height: 41px; }
#page-cms .badge-s-cms { left: 48.81px; width: 245.38px; height: 42.43px; }
#page-cms .badge-s-cms img { width: 245.38px; height: 42.43px; }
#page-cms .badge-txt-cms {
  position: absolute; left: 0; top: 30.64%; width: 100%; height: 35.35%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15.283px; line-height: 1; color: #fff; white-space: nowrap;
}

#page-cms .work-ttl-cms {
  position: absolute; left: 0; width: 343px;
  font-weight: 900; line-height: 1; color: #a81414; text-align: center; white-space: nowrap;
}
#page-cms .work-ttl-sm-cms { font-size: 15.569px; }
#page-cms .work-ttl-sm-cms .t-big-cms { font-size: 21.557px; }
#page-cms .work-ttl-sm-cms .t-reg-cms { font-weight: 400; }

#page-cms .catch-cms { position: absolute; left: 20px; width: 303px; }
#page-cms .catch-bar-cms {
  display: block; width: 303px; height: 17px; padding: 0 2px 0 5px; background: #a81414;
  font-weight: 600; font-size: 11px; line-height: 16.667px; letter-spacing: 1px; color: #eff0e6;
  text-align: center; white-space: nowrap;
}
#page-cms .catch-bar-cms + .catch-bar-cms { margin-top: 4px; }

#page-cms .cover-cms { position: absolute; left: 20px; width: 303px; height: 227.25px; object-fit: cover; }

#page-cms .story-cms {
  position: absolute; left: 20px; width: 303px;
  display: flex; flex-direction: column; align-items: center;
  font-size: 10px; line-height: 1.5; color: #000; text-align: center;
}
#page-cms .story-line-cms { display: block; white-space: nowrap; }
#page-cms .story-wrap-cms { display: block; width: 303px; }

#page-cms .divider-cms { position: absolute; left: 80.26px; width: 182.49px; height: 8px; }

#page-cms .free-cms {
  position: absolute; left: 20px; width: 303px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#page-cms .free-label-cms {
  font-weight: 700; font-size: 14px; line-height: 1; color: #a81414; white-space: nowrap; margin-bottom: -6px;
  position: relative; z-index: 1;
}
#page-cms .free-row-cms {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; line-height: 1; color: #a81414; white-space: nowrap;
}
#page-cms .free-num-cms { font-size: 60.903px; }
#page-cms .free-unit-cms { font-size: 40.196px; }
#page-cms .free-free-cms { font-size: 48.723px; }
#page-cms .free-sub-cms { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
#page-cms .free-wait-cms {
  display: block; font-weight: 700; font-size: 14px; line-height: 1; color: #252525; white-space: nowrap; margin-bottom: 4px;
}
#page-cms .free-date-cms {
  display: block; width: max-content; padding: 3px 13px; background: #252525;
  font-weight: 700; font-size: 10px; line-height: 1; color: #fff; white-space: nowrap;
}

#page-cms .read-btn-cms {
  position: absolute; left: 31.5px; width: 280px; height: 45px;
  align-items: center; justify-content: center; gap: 6.49px;
  background: #eb2f64; border: 1px solid #f2c28c; border-radius: 5px;
  font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700; font-size: 15px; line-height: 1; color: #fff; white-space: nowrap; z-index: 4;
}
#page-cms .read-btn-cms img { width: 13.07px; height: 13.07px; transform: rotate(180deg); }

/* 公開前（非活性）：アニメーション・hoverなし */
#page-cms .locked-btn-cms {
  position: absolute; left: 31.5px; width: 280px; height: 45px;
  display: flex; align-items: center; justify-content: center;
  padding: 5.19px 10.38px; background: #939393; border: 0; border-radius: 2px;
  font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700; font-size: 15px; line-height: 1; color: #fff; white-space: nowrap;
  cursor: default; -webkit-appearance: none; appearance: none; opacity: 1; z-index: 4;
}

/* ===== footer ===== */
#page-cms .footer-bar-cms { width: 375px; height: 50px; background: #a81414; }

/* ===== CMSサーバー時刻hook用（最後に置いて他の display 指定より優先） ===== */
#page-cms .hidden-cms { display: none; }