@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&family=Noto+Sans+JP:wght@400;500;700&family=Kapakana&display=swap');

/* ===== Reset (#page-cms scope, specificity 0) ===== */
:where(#page-cms, #page-cms *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(#page-cms img) { display: block; max-width: none; }
:where(#page-cms h1, #page-cms h2, #page-cms h3, #page-cms p, #page-cms b) { font-size: inherit; font-weight: inherit; }

/* ===== Wrapper / scale ===== */
#page-wrap-cms { width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden; }
#page-cms {
  width: 375px; position: relative; transform-origin: top left;
  display: flex; flex-direction: column; align-items: center;
  background: #fdf9ec url(../img/page_bg.jpg) center top / 100% 100% no-repeat;
  color: #000;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  -webkit-text-size-adjust: 100%;
}
#page-cms .serif-cms { font-family: 'Zen Antique', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-weight: 400; }
#page-cms .accent-cms { color: #d15028; }

/* ===== Common parts ===== */
#page-cms .credit-cms { font-size: 6px; line-height: 8px; white-space: nowrap; }
#page-cms .figure-cms { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
#page-cms .figure-center-cms { align-items: center; }
#page-cms .q-cms { font-size: 10px; line-height: 17px; color: #d15028; }
#page-cms .talk-cms { width: 335px; display: flex; flex-direction: column; gap: 8px; }
#page-cms .talk-cms p { font-size: 11px; line-height: 20px; }
#page-cms .talk-cms b { font-weight: 700; color: #d15028; }
#page-cms .line-cms { display: block; }
#page-cms .mix-cms { font-size: 0; }
#page-cms .mix-cms > span { display: inline; }
#page-cms .sub-head-cms { width: 100%; display: flex; gap: 5px; align-items: center; justify-content: center; }
#page-cms .sub-head-cms img { width: 20px; height: 24.138px; flex: none; }
#page-cms .sub-head-cms h3,
#page-cms .sub-head-cms h2 { flex: 1 0 0; min-width: 1px; font-size: 18px; line-height: 20px; }

/* ===== 01 TOP ===== */
#page-cms .top-cms { width: 375px; height: 281px; flex: none; }
#page-cms .top-cms img { width: 375px; height: 281px; }

/* ===== 02 Intro + int01 ===== */
#page-cms .intro-cms {
  position: relative; width: 375px; flex: none; overflow: hidden;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  padding: 0 20px 32px;
}
#page-cms .vintage-cms { width: 507px; height: 12px; flex: none; }
#page-cms .title-cms { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#page-cms .tagline-cms {
  display: flex; gap: 7px; align-items: center; justify-content: center;
  font-size: 14px; line-height: 20px; letter-spacing: .56px; color: #331700; white-space: nowrap;
}
#page-cms .slash-cms { position: relative; width: 7.866px; height: 12.624px; flex: none; }
#page-cms .slash-cms::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: 14px; background: #331700;
  transform: translate(-50%, -50%) rotate(-30deg);
}
#page-cms .slash-r-cms::before { transform: translate(-50%, -50%) rotate(30deg); }
#page-cms .title-logo-cms { width: 332px; height: 221px; }
#page-cms .title-logo-cms img { width: 332px; height: 221px; }

#page-cms .lead-cms { width: 355px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
#page-cms .lead-cms .l15-cms { font-size: 15px; line-height: 23px; }
#page-cms .lead-cms .l20-cms { font-size: 20px; line-height: 30px; color: #d15028; }
#page-cms .lead-cms .l11-cms { font-size: 11px; line-height: 17px; }
#page-cms .lead-cms .sp12-cms { height: 21px; }
#page-cms .lead-cms .sp11-cms { height: 23px; }

#page-cms .cut01-cms { width: 253px; height: 361px; }
#page-cms .cast-cms { width: 343px; display: flex; flex-direction: column; gap: 9px; }
#page-cms .cast-cms img { width: 343px; height: 229px; }
#page-cms .cast-cms p { font-size: 9px; line-height: 13px; color: #4c4c4c; }

#page-cms .int01-cms { width: 100%; display: flex; flex-direction: column; gap: 15px; align-items: center; }
#page-cms .heading-cms { position: relative; width: 346px; height: 47.995px; flex: none; }
#page-cms .heading-cms img { position: absolute; left: 0; top: 0; width: 345.995px; height: 47.995px; }
#page-cms .heading-cms h2 {
  position: absolute; top: 16.67%; right: 9.68%; bottom: 14.57%; left: 7.37%;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
}
#page-cms .heading-cms .h20-cms { font-size: 20px; line-height: normal; }
#page-cms .heading-cms .h18-cms { font-size: 18px; line-height: normal; }
#page-cms .int01-body-cms { width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: center; }
#page-cms .qa-cms { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#page-cms .qa-cms .q-wrap-cms { width: 100%; display: flex; justify-content: center; }
#page-cms .qa-cms .q-wrap-cms .q-cms { width: 328px; }
#page-cms .cut02-cms { width: 335px; height: 188px; }
#page-cms .cut03-cms { width: 180px; height: 267.975px; background: #fff; }

/* ===== 03 int02 Sticker book ===== */
#page-cms .int02-cms {
  position: relative; width: 375px; flex: none; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 70px 20px 90px;
  background: url(../img/int02_bg.jpg) left top / 375px 282px repeat;
}
#page-cms .int02-cms::before,
#page-cms .int02-cms::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: #3b7666; z-index: 3; pointer-events: none;
}
#page-cms .int02-cms::before { top: 0; }
#page-cms .int02-cms::after { bottom: 0; }
#page-cms .int02-cms > * { position: relative; z-index: 2; }
#page-cms .int02-cms > .leaf-cms { position: absolute; left: 0; width: 375px; z-index: 1; pointer-events: none; }
#page-cms .int02-cms > .leaf-top-cms { top: 0; height: 106px; }
#page-cms .int02-cms > .leaf-bottom-cms { bottom: 0; height: 108px; }
#page-cms .column-cms { width: 100%; font-family: 'Kapakana', cursive; font-size: 30px; line-height: 33px; text-align: center; }
#page-cms .pills-cms { width: 100%; display: flex; flex-direction: column; gap: 5px; align-items: center; }
#page-cms .pill-cms {
  display: flex; justify-content: center; align-items: center; padding: 2px 0;
  background: #b4d085; color: #fff; font-size: 13px; line-height: 14px; white-space: nowrap; width: max-content;
}
#page-cms .pill-1-cms { width: 161px; }
#page-cms .pill-2-cms { padding-right: 5px; }
#page-cms .choice-cms { width: 100%; text-align: center; }
#page-cms .choice-cms .c23-cms { font-size: 23px; line-height: 25px; }
#page-cms .choice-cms .c20-cms { font-size: 20px; line-height: 22px; }
#page-cms .sticker-cms { width: 351px; height: 262px; flex: none; }
#page-cms .sticker-cms img { width: 351px; height: 262px; }
#page-cms .sticker-cms img.contain-cms { width: 187px; height: 262px; margin: 0 auto; }
#page-cms .divider-cms { position: relative; width: 167px; height: 4.19px; flex: none; }
#page-cms .divider-cms img { position: absolute; left: 0; top: -0.207px; width: 167px; height: 4.604px; }
#page-cms .about-cms { width: 100%; font-size: 11px; line-height: 20px; text-align: center; }
#page-cms .int02-cms .q-cms { letter-spacing: -.3px; }
#page-cms .cut04-cms { width: 295px; height: 196px; }
#page-cms .cut05-cms { width: 295px; height: 197px; }

/* ===== 04 Message ===== */
#page-cms .message-cms { width: 375px; flex: none; padding: 32px 20px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
#page-cms .message-cms .sub-head-cms { width: 335px; }
#page-cms .message-cms .talk-cms p { letter-spacing: -.32px; }
#page-cms .message-cms .sp-cms { height: 20px; }

/* ===== 05 Anime info ===== */
#page-cms .anime-cms { width: 375px; flex: none; background: #d15028; color: #fff; padding: 35px 20px 50px; display: flex; flex-direction: column; align-items: center; }
#page-cms .anime-inner-cms { width: 325px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#page-cms .anime-title-cms { width: 100%; text-align: center; }
#page-cms .anime-title-cms .a23-cms:first-child { white-space: pre-wrap; }
#page-cms .anime-title-cms .a23-cms { font-size: 23px; line-height: 30px; }
#page-cms .anime-title-cms .a20-cms { font-size: 20px; line-height: 26px; }
#page-cms .onair-cms { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#page-cms .onair-main-cms { display: flex; flex-direction: column; gap: 5px; align-items: center; }
#page-cms .onair-main-cms p { font-size: 13px; line-height: 1; font-weight: 700; white-space: pre; }
#page-cms .onair-note-cms { font-size: 10px; line-height: 13px; white-space: nowrap; }

/* ===== 06 Copyright ===== */
#page-cms .copyright-cms { width: 375px; flex: none; padding: 16px 20px; display: flex; flex-direction: column; align-items: center; }
#page-cms .copyright-cms p { height: 19px; font-size: 9px; line-height: 12px; white-space: nowrap; }