body {
  background: #FFFFFF;
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container { width: 100%; max-width: 600px; box-sizing: border-box; text-align: center; }
.hidden { display: none !important; }
.page-wrapper { position: relative; padding: 0 1cm; margin: 0; box-sizing: border-box; }
.page-wrapper::before, .page-wrapper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1cm;
  background-image: url('店内メイン7.jpg'); background-size: cover; background-position: center; z-index: 1;
}
.page-wrapper::before { left: 0; }
.page-wrapper::after { right: 0; }
.page-wrapper > * { position: relative; z-index: 2; }
.page-wrapper img { width: 100%; height: auto; display: block; margin: 0; padding: 0; border: none; }
.content-area { background-color: #FFFFFF; padding: 0; display: flex; flex-direction: column; align-items: center; }
.push-button {
  display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; margin: 10px 0;
  background-color: #FFEB3B; color: #008000; font-size: 1.2rem; font-weight: bold; border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.3); cursor: pointer; border: 2px solid #008000; text-align: center;
}

/* 2ページ目キャスト紹介部分 */
.cast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; padding: 18px 0; box-sizing: border-box; }
.cast-card { border: 4px solid transparent; background: transparent; padding: 0; margin: 0; cursor: pointer; border-radius: 8px; overflow: hidden; transition: .2s ease; }
.cast-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.cast-card:hover { transform: translateY(-3px); filter: brightness(1.06); }
.cast-card.selected { border-color: #ff1493; box-shadow: 0 0 16px rgba(255,20,147,.75); transform: scale(1.03); }
.selected-text { font-size: 18px; font-weight: bold; color: #d60068; margin: 4px 0 14px; }

/* 3ページ目 生年月日入力 */
.birthday-panel { background: #ffdf5f; padding: 18px; box-sizing: border-box; text-align: left; }
.birthday-title {
  display: inline-block;
  background: #fff4c7;
  padding: 10px 22px;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  font-size: 28pt;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 14px;
}
.birthday-row { display: grid; grid-template-columns: 1fr auto .8fr auto .8fr auto; gap: 10px; align-items: center; }
.birthday-row select {
  width: 100%;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  font-size: 28pt;
  font-weight: bold;
  padding: 6px 4px;
  border: none;
  background: #eee;
  text-align: center;
  min-height: 54px;
}
.birthday-row span {
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  font-size: 28pt;
  line-height: 1;
  font-weight: bold;
}
.birthday-note {
  margin-top: 18px;
  background: #fff4c7;
  padding: 14px 16px;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  font-weight: 800;
  line-height: 1.55;
}
.birthday-note .note-big { font-size: 28pt; font-weight: 900; }
.birthday-note .note-small { font-size: 18pt; font-weight: 800; }

/* 4ページ目・5ページ目 結果 */
.result-panel { box-sizing: border-box; padding: 10px 10px 16px; background: linear-gradient(#fffdf2, #ffe9a6); text-align: center; }
.result-title { display: none; }
.flip-score { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 2px 0 4px; }
.flip-score span {
  display: inline-flex; justify-content: center; align-items: center;
  width: clamp(48px, 13vw, 76px);
  height: clamp(58px, 16vw, 90px);
  background: #202020;
  color: #00c853;
  border: 4px solid #00c853;
  border-radius: 10px;
  font-size: clamp(42px, 11vw, 68px);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 12px rgba(0,200,83,.55);
  position: relative;
}
.flip-score span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0,0,0,.65); }
.flip-score em { color: #00c853; font-size: clamp(24px, 6vw, 38px); font-weight: 900; font-style: normal; }
.result-panel h2, .result-panel p { display: none; }

.selected-cast-profile {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 14px;
  align-items: center;
  box-sizing: border-box;
  padding: 16px 14px;
  background: #fff8df;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
}
.selected-cast-photo {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.selected-cast-photo img {
  width: 100%;
  height: clamp(210px, 52vw, 300px);
  object-fit: cover;
  object-position: top center;
}
.selected-cast-info {
  text-align: left;
  color: #111;
}
.selected-cast-info p {
  margin: 0 0 10px;
  line-height: 1.25;
}
.selected-cast-info span {
  display: inline-block;
  min-width: 5.2em;
  font-size: clamp(13px, 3.4vw, 18px);
  font-weight: 900;
}
.selected-cast-info strong {
  font-weight: 900;
}
#castProfileName { font-size: clamp(24px, 6vw, 36px); }
#castProfileStyle, #castProfileBirthday { font-size: clamp(13px, 3.4vw, 18px); }
.personality-panel { padding-top: 8px; }
.sexual-panel { padding-top: 10px; }

.map-link { display: block; position: relative; z-index: 10; cursor: pointer; }
@media (max-width: 520px) {
  .page-wrapper { padding: 0 14px; }
  .page-wrapper::before, .page-wrapper::after { width: 14px; }
  .cast-grid { gap: 6px; padding: 10px 0; }
  .push-button { width: 112px; height: 112px; font-size: 1rem; }
  .birthday-panel { padding: 10px; }
  .birthday-title { font-size: 28pt; padding: 8px 16px; }
  .birthday-row { gap: 6px; }
  .birthday-row select, .birthday-row span { font-size: 28pt; }
  .birthday-note .note-big { font-size: 28pt; }
  .birthday-note .note-small { font-size: 18pt; }
  .selected-cast-profile { gap: 8px; padding: 12px 8px; }
  .selected-cast-info span { min-width: 4.8em; }
}


/* 2026-04-28 追加修正：3ページ目文字サイズ・4/5ページ目フリップスコア調整 */
.birthday-title {
  font-size: 28px !important;
  line-height: 1.15;
}
.birthday-row select,
.birthday-row span {
  font-size: 28px !important;
  min-height: 42px !important;
}
.birthday-note .note-big {
  font-size: 28px !important;
}
.birthday-note .note-small {
  font-size: 18px !important;
}
.selected-cast-info p:first-child span,
#castProfileName {
  font-size: clamp(30px, 7.2vw, 44px) !important;
  line-height: 1.1;
}
.selected-cast-info p:nth-child(2) span,
.selected-cast-info p:nth-child(3) span {
  font-size: clamp(11px, 2.8vw, 15px) !important;
}
#castProfileStyle,
#castProfileBirthday {
  font-size: clamp(12px, 3vw, 16px) !important;
  line-height: 1.15;
}
.result-panel {
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}
.flip-score {
  gap: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.flip-score span {
  width: clamp(42px, 11vw, 66px) !important;
  height: clamp(46px, 12vw, 70px) !important;
  color: #00a000 !important;
  border-color: #00a000 !important;
  font-size: clamp(36px, 9.5vw, 58px) !important;
  box-shadow: 0 0 10px rgba(0,160,0,.5) !important;
}
.flip-score em {
  color: #00a000 !important;
  font-size: clamp(20px, 5vw, 32px) !important;
}
.selected-cast-photo img {
  object-fit: cover;
  object-position: top center;
}

/* 2026-04-29 追加修正：4ページ目画像・プロフィール余白・解説文・明るい緑スコア */
.selected-cast-profile {
  grid-template-columns: 40% 1fr !important;
  gap: 8px !important;
  padding: 14px 10px !important;
}
.selected-cast-photo img {
  height: clamp(220px, 58vw, 330px) !important;
  object-fit: cover !important;
  object-position: top center !important;
}
.selected-cast-info p {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 0 8px !important;
  white-space: nowrap !important;
}
.selected-cast-info span {
  min-width: 3.3em !important;
  flex: 0 0 auto !important;
  letter-spacing: -0.02em !important;
}
.selected-cast-info strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.selected-cast-info p:first-child span {
  font-size: clamp(15px, 3.6vw, 20px) !important;
}
#castProfileName {
  font-size: clamp(26px, 6.4vw, 38px) !important;
  letter-spacing: -0.06em !important;
  line-height: 1.05 !important;
}
.selected-cast-info p:nth-child(2) span,
.selected-cast-info p:nth-child(3) span,
#castProfileStyle,
#castProfileBirthday {
  font-size: clamp(11px, 2.8vw, 15px) !important;
  line-height: 1.1 !important;
}
.cast-description-panel,
.compatibility-text-panel {
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe8a8 100%);
  padding: 18px 16px;
  text-align: left;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  color: #111;
}
.cast-description-panel h3 {
  margin: 0 0 8px;
  text-align: center;
  color: #e60000;
  font-size: clamp(24px, 6.2vw, 38px);
  line-height: 1.2;
  font-weight: 900;
}
.cast-description-panel p,
.compatibility-text-panel p {
  margin: 0;
  font-size: clamp(18px, 4.4vw, 28px);
  line-height: 1.65;
  font-weight: 700;
  word-break: normal;
  overflow-wrap: anywhere;
}
.compatibility-text-panel {
  padding-top: 16px;
  padding-bottom: 22px;
}
.result-panel {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}
.flip-score {
  gap: 6px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.flip-score span {
  width: clamp(50px, 13vw, 78px) !important;
  height: clamp(56px, 14.5vw, 88px) !important;
  color: #32CD32 !important;
  border-color: #32CD32 !important;
  font-size: clamp(44px, 11.5vw, 72px) !important;
  line-height: 1 !important;
  box-shadow: 0 0 13px rgba(50,205,50,.65) !important;
}
.flip-score em {
  color: #32CD32 !important;
  font-size: clamp(24px, 6vw, 38px) !important;
  line-height: 1 !important;
}
@media (max-width: 520px) {
  .selected-cast-profile { grid-template-columns: 39% 1fr !important; gap: 6px !important; padding: 10px 7px !important; }
  .selected-cast-info span { min-width: 3.1em !important; }
  #castProfileName { font-size: clamp(24px, 6.2vw, 34px) !important; }
  .cast-description-panel, .compatibility-text-panel { padding: 14px 12px; }
  .cast-description-panel p, .compatibility-text-panel p { font-size: clamp(17px, 4.5vw, 24px); }
}

/* 2026-04-29 追加修正：一言タイトル・相性タイトル・5ページ性相性解説 */
.cast-description-panel h3 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 0 10px !important;
  white-space: nowrap !important;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif !important;
  color: #e60000 !important;
  line-height: 1.15 !important;
}
.desc-title-main {
  font-size: clamp(28px, 7.2vw, 36px) !important;
  font-weight: 900 !important;
}
.desc-title-suffix {
  font-size: clamp(17px, 4.4vw, 22px) !important;
  font-weight: 900 !important;
}
.cast-description-panel p {
  font-size: clamp(17px, 4.1vw, 24px) !important;
  line-height: 1.62 !important;
  font-weight: 700 !important;
}
.compatibility-title {
  text-align: center;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
  color: #e60000;
  line-height: 1.35;
  margin: 0 0 12px;
  font-weight: 900;
}
.compat-title-main {
  font-size: clamp(28px, 7.2vw, 36px);
}
.compat-title-small {
  font-size: clamp(16px, 4vw, 20px);
}
.compat-title-you,
.compat-title-cast {
  font-size: clamp(22px, 5.8vw, 28px);
}
.compatibility-text-panel p {
  font-size: clamp(17px, 4.1vw, 24px) !important;
  line-height: 1.62 !important;
  font-weight: 700 !important;
}
.flip-score span {
  width: clamp(58px, 15vw, 92px) !important;
  height: clamp(66px, 17vw, 104px) !important;
  color: #32CD32 !important;
  border-color: #32CD32 !important;
  font-size: clamp(52px, 13.8vw, 86px) !important;
  line-height: 1 !important;
  box-shadow: 0 0 14px rgba(50,205,50,.7) !important;
}
.flip-score em {
  color: #32CD32 !important;
  font-size: clamp(26px, 6.8vw, 42px) !important;
}
.sexual-explanation-panel {
  margin-top: 14px;
  text-align: center;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif;
}
.sexual-explanation-panel h2 {
  display: block !important;
  margin: 10px 0 12px !important;
  color: #e60000 !important;
  font-size: clamp(28px, 7.2vw, 36px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}
.sexual-bullets {
  color: #FF66CC;
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.45;
  font-weight: 900;
  text-align: left;
  display: inline-block;
  margin: 0 auto 12px;
}
.sexual-bullets div {
  margin: 4px 0;
}
.sexual-explanation-panel p {
  display: block !important;
  color: #111 !important;
  font-size: clamp(17px, 4.4vw, 22px) !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
  text-align: left;
  margin: 0 !important;
}
@media (max-width: 520px) {
  .desc-title-main, .compat-title-main { font-size: 32px !important; }
  .desc-title-suffix { font-size: 20px !important; }
  .compat-title-small { font-size: 18px !important; }
  .compat-title-you, .compat-title-cast { font-size: 25px !important; }
  .sexual-explanation-panel h2 { font-size: 32px !important; }
  .sexual-bullets { font-size: 23px !important; }
  .sexual-explanation-panel p { font-size: 19px !important; }
  .flip-score span {
    width: clamp(50px, 15.5vw, 76px) !important;
    height: clamp(58px, 18vw, 88px) !important;
    font-size: clamp(45px, 14vw, 70px) !important;
  }
}

/* 2026-04-29 追加修正：4ページ目 相性タイトルをスマホで1行表示しやすく調整 */
.compatibility-title {
  text-align: center !important;
  line-height: 1.28 !important;
  margin: 0 0 10px !important;
  white-space: nowrap !important;
  letter-spacing: -0.04em !important;
}

.compat-title-main,
.compat-title-small,
.compat-title-you,
.compat-title-cast {
  font-size: clamp(17px, 4.4vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.04em !important;
}

@media (max-width: 430px) {
  .compatibility-title {
    line-height: 1.25 !important;
    margin-bottom: 9px !important;
    letter-spacing: -0.06em !important;
  }

  .compat-title-main,
  .compat-title-small,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(15px, 4.15vw, 18px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.06em !important;
  }
}

@media (max-width: 360px) {
  .compat-title-main,
  .compat-title-small,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(14px, 3.95vw, 16px) !important;
    letter-spacing: -0.07em !important;
  }
}

/* 2026-04-29 追加修正：相性タイトルは主役文字を大きく維持し、補助文字だけ小さくして1行に収める */
.compatibility-title {
  text-align: center !important;
  line-height: 1.22 !important;
  margin: 0 auto 10px !important;
  white-space: nowrap !important;
  letter-spacing: -0.08em !important;
  transform: scaleX(0.92) !important;
  transform-origin: center center !important;
  width: 108% !important;
  margin-left: -4% !important;
}

/* 『天真爛漫』・「あなた」・「れいか」は大きいまま */
.compat-title-main,
.compat-title-you,
.compat-title-cast {
  font-size: clamp(24px, 6.4vw, 34px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.08em !important;
}

/* 「タイプの」「にとって」「さんは」だけ小さくする */
.compat-title-small {
  font-size: clamp(13px, 3.25vw, 18px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.08em !important;
}

@media (max-width: 430px) {
  .compatibility-title {
    line-height: 1.18 !important;
    letter-spacing: -0.13em !important;
    transform: scaleX(0.84) !important;
    width: 119% !important;
    margin-left: -9.5% !important;
  }
  .compat-title-main,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(22px, 6.05vw, 28px) !important;
    letter-spacing: -0.13em !important;
  }
  .compat-title-small {
    font-size: clamp(11px, 2.95vw, 15px) !important;
    letter-spacing: -0.13em !important;
  }
}

@media (max-width: 360px) {
  .compatibility-title {
    transform: scaleX(0.78) !important;
    width: 128% !important;
    margin-left: -14% !important;
    letter-spacing: -0.16em !important;
  }
  .compat-title-main,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(20px, 5.8vw, 24px) !important;
    letter-spacing: -0.16em !important;
  }
  .compat-title-small {
    font-size: clamp(10px, 2.75vw, 13px) !important;
    letter-spacing: -0.16em !important;
  }
}

/* 2026-04-29 追加修正：リーダータイプに近い大きさを保ちつつ、スマホ1行に収める黄金サイズ */
.compatibility-title {
  text-align: center !important;
  line-height: 1.16 !important;
  margin: 0 auto 10px !important;
  white-space: nowrap !important;
  letter-spacing: -0.105em !important;
  transform: scaleX(0.88) !important;
  transform-origin: center center !important;
  width: 114% !important;
  margin-left: -7% !important;
}

/* 主役文字：『天真爛漫』・「あなた」・「れいか」は大きく見せる */
.compat-title-main,
.compat-title-you,
.compat-title-cast {
  font-size: clamp(26px, 6.9vw, 36px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.105em !important;
}

/* 補助文字：タイプの・にとって・さんは は小さくして全体を収める */
.compat-title-small {
  font-size: clamp(12px, 3.05vw, 16px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.105em !important;
}

@media (max-width: 430px) {
  .compatibility-title {
    line-height: 1.12 !important;
    letter-spacing: -0.15em !important;
    transform: scaleX(0.80) !important;
    width: 125% !important;
    margin-left: -12.5% !important;
  }

  .compat-title-main,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(24px, 6.55vw, 30px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.15em !important;
  }

  .compat-title-small {
    font-size: clamp(10px, 2.7vw, 13px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.15em !important;
  }
}

@media (max-width: 360px) {
  .compatibility-title {
    transform: scaleX(0.74) !important;
    width: 135% !important;
    margin-left: -17.5% !important;
    letter-spacing: -0.18em !important;
  }

  .compat-title-main,
  .compat-title-you,
  .compat-title-cast {
    font-size: clamp(22px, 6.35vw, 26px) !important;
    letter-spacing: -0.18em !important;
  }

  .compat-title-small {
    font-size: clamp(9px, 2.55vw, 11px) !important;
    letter-spacing: -0.18em !important;
  }
}

/* 2026-04-29 追加修正：相性タイトル1行目の凝縮感を緩和し、余白を活かして自然に横へ広げる */
.compatibility-title {
  text-align: center !important;
  line-height: 1.18 !important;
  margin: 0 auto 10px !important;
  white-space: nowrap !important;
  transform-origin: center center !important;
}

/* 1行目：『天真爛漫』タイプの「あなた」 を自然に広げる */
.compatibility-title .compat-title-main,
.compatibility-title .compat-title-you {
  font-size: clamp(26px, 6.9vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.045em !important;
}

/* 補助文字は小さめ維持。ただし詰まりすぎない字間に調整 */
.compatibility-title .compat-title-small {
  font-size: clamp(12px, 3.05vw, 16px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.035em !important;
}

/* 2行目の「れいか」は大きめ維持。位置は既存の中央配置を維持 */
.compatibility-title .compat-title-cast {
  font-size: clamp(26px, 6.9vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.045em !important;
}

@media (max-width: 430px) {
  .compatibility-title {
    line-height: 1.14 !important;
    transform: scaleX(0.93) !important;
    width: 108% !important;
    margin-left: -4% !important;
    letter-spacing: 0 !important;
  }

  .compatibility-title .compat-title-main,
  .compatibility-title .compat-title-you,
  .compatibility-title .compat-title-cast {
    font-size: clamp(23px, 6.4vw, 30px) !important;
    letter-spacing: -0.06em !important;
    line-height: 1.12 !important;
  }

  .compatibility-title .compat-title-small {
    font-size: clamp(10px, 2.75vw, 13px) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 360px) {
  .compatibility-title {
    transform: scaleX(0.88) !important;
    width: 114% !important;
    margin-left: -7% !important;
  }

  .compatibility-title .compat-title-main,
  .compatibility-title .compat-title-you,
  .compatibility-title .compat-title-cast {
    font-size: clamp(21px, 6.15vw, 26px) !important;
    letter-spacing: -0.075em !important;
  }

  .compatibility-title .compat-title-small {
    font-size: clamp(9px, 2.55vw, 11px) !important;
    letter-spacing: -0.06em !important;
  }
}

/* 2026-04-29 追加修正：補助文字をメイン文字の約半分にし、「れいか」の括弧も同サイズに揃える */
.compatibility-title {
  text-align: center !important;
  line-height: 1.18 !important;
  margin: 0 auto 10px !important;
  white-space: nowrap !important;
  transform-origin: center center !important;
}

/* メイン文字：『天真爛漫』・「あなた」・「れいか」 */
.compatibility-title .compat-title-main,
.compatibility-title .compat-title-you,
.compatibility-title .compat-title-cast {
  font-size: clamp(26px, 6.9vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.045em !important;
}

/* 補助文字：「タイプの」「にとって」「さんは」 */
.compatibility-title .compat-title-small {
  font-size: clamp(13px, 3.45vw, 18px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: -0.03em !important;
  vertical-align: baseline !important;
}

@media (max-width: 430px) {
  .compatibility-title {
    line-height: 1.14 !important;
    transform: scaleX(0.93) !important;
    width: 108% !important;
    margin-left: -4% !important;
    letter-spacing: 0 !important;
  }

  .compatibility-title .compat-title-main,
  .compatibility-title .compat-title-you,
  .compatibility-title .compat-title-cast {
    font-size: clamp(23px, 6.4vw, 30px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.055em !important;
  }

  .compatibility-title .compat-title-small {
    font-size: clamp(12px, 3.2vw, 15px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 360px) {
  .compatibility-title {
    transform: scaleX(0.88) !important;
    width: 114% !important;
    margin-left: -7% !important;
  }

  .compatibility-title .compat-title-main,
  .compatibility-title .compat-title-you,
  .compatibility-title .compat-title-cast {
    font-size: clamp(21px, 6.15vw, 26px) !important;
    letter-spacing: -0.07em !important;
  }

  .compatibility-title .compat-title-small {
    font-size: clamp(11px, 3.05vw, 13px) !important;
    letter-spacing: -0.05em !important;
  }
}


/* 2026-04-29 追加修正：4ページ目・5ページ目 キャスト写真を丸型フレームで中央表示 */
.selected-cast-profile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 20px 14px 18px !important;
  background: linear-gradient(180deg, #fff8df 0%, #ffe9b8 100%) !important;
  text-align: center !important;
}

.selected-cast-photo,
.sexual-cast-photo {
  width: clamp(210px, 62vw, 330px) !important;
  height: clamp(210px, 62vw, 330px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: 7px !important;
  background:
    radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 4px rgba(255, 246, 190, .95),
    0 0 0 8px rgba(166, 110, 28, .65),
    0 10px 22px rgba(80, 45, 0, .28) !important;
  box-sizing: border-box !important;
}

.selected-cast-photo img,
.sexual-cast-photo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.selected-cast-info {
  width: min(92%, 360px) !important;
  margin: 0 auto !important;
  text-align: left !important;
  color: #111 !important;
}

.selected-cast-info p {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  white-space: nowrap !important;
}

.selected-cast-info span {
  min-width: 4.8em !important;
  flex: 0 0 auto !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.selected-cast-info strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.sexual-cast-photo-section {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 12px 8px;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe8a8 100%);
  text-align: center;
}

.sexual-panel {
  padding-top: 8px !important;
}

@media (max-width: 520px) {
  .selected-cast-profile {
    padding: 16px 10px 14px !important;
    gap: 12px !important;
  }

  .selected-cast-photo,
  .sexual-cast-photo {
    width: clamp(200px, 68vw, 280px) !important;
    height: clamp(200px, 68vw, 280px) !important;
    padding: 6px !important;
  }

  .selected-cast-info {
    width: min(94%, 330px) !important;
  }

  .selected-cast-info p {
    gap: 6px !important;
    margin-bottom: 7px !important;
  }
}


/* 2026-04-29 FIX：4ページ目・5ページ目 キャスト写真を確実に丸型フレームへ上書き */
#page4 .selected-cast-profile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  padding: 22px 12px 18px !important;
  background: linear-gradient(180deg, #fff8df 0%, #ffe8ad 100%) !important;
  text-align: center !important;
}

#page4 .selected-cast-photo,
#page5 .sexual-cast-photo,
#page5 .selected-cast-photo.sexual-cast-photo {
  display: block !important;
  width: clamp(220px, 66vw, 340px) !important;
  height: clamp(220px, 66vw, 340px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 340px !important;
  max-height: 340px !important;
  min-width: 220px !important;
  min-height: 220px !important;
  margin: 0 auto !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background:
    radial-gradient(circle at center, #fff9da 0%, #f6d98d 48%, #a96f1c 100%) !important;
  border: 5px solid #8b5a14 !important;
  box-shadow:
    0 0 0 4px #fff1b8,
    0 0 0 9px rgba(139, 90, 20, .55),
    0 12px 24px rgba(70, 38, 0, .28) !important;
}

#page4 .selected-cast-photo img#selectedCastImage,
#page5 .sexual-cast-photo img#selectedSexualCastImage,
#page5 img#selectedSexualCastImage {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 9999px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#page4 .selected-cast-info {
  width: min(92%, 360px) !important;
  margin: 4px auto 0 !important;
  text-align: left !important;
  display: block !important;
}

#page4 .selected-cast-info p {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  white-space: nowrap !important;
}

#page5 .sexual-cast-photo-section {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px 12px 8px !important;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe8a8 100%) !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  #page4 .selected-cast-photo,
  #page5 .sexual-cast-photo,
  #page5 .selected-cast-photo.sexual-cast-photo {
    width: clamp(205px, 70vw, 285px) !important;
    height: clamp(205px, 70vw, 285px) !important;
    min-width: 205px !important;
    min-height: 205px !important;
    padding: 7px !important;
  }

  #page4 .selected-cast-profile {
    padding: 18px 10px 14px !important;
  }

  #page4 .selected-cast-info {
    width: min(94%, 330px) !important;
  }
}


/* 2026-04-29 追加修正：個人性格.csv の <blue>...</blue> 指定部分をピンク表示 */
#page4 #castDescriptionText .csv-highlight,
#page4 .cast-description-panel #castDescriptionText .csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}


/* 2026-04-30 修正：キャスト紹介文・相性説明文の <blue>...</blue> 強調色 */
#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page4 .cast-description-panel .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}


/* 4ページ目背景修正 再出力 */
#page4 .selected-cast-profile { background:#FFFFFF !important; }

#page4 .cast-description-panel,
#page4 .personality-panel{
  width: calc(100% - 34px) !important;
  margin: 14px auto !important;
  padding: 18px !important;
  background:#F1FFE9 !important;
  border:8px solid #FFFFFF !important;
}

@media(max-width:520px){
  #page4 .cast-description-panel,
  #page4 .personality-panel{
    width: calc(100% - 22px) !important;
    margin:10px auto !important;
    border-width:6px !important;
  }
}


/* =========================================================
   2026-04-30 修正：4ページ目・5ページ目 背景デザイン・文字色統一
========================================================= */

#page4 .selected-cast-profile {
  background: #FFFFFF !important;
}

#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page4 .personality-panel,
#page5 .sexual-cast-photo-section,
#page5 .sexual-panel,
#page5 .sexual-explanation-panel {
  width: calc(100% - 34px) !important;
  margin: 14px auto !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  background: #F1FFE9 !important;
  border: 8px solid #FFFFFF !important;
  box-shadow: none !important;
}

#page5 .sexual-cast-photo-section,
#page5 .sexual-panel {
  text-align: center !important;
}

#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-explanation-panel {
  text-align: left !important;
}

#page4 .personality-panel .flip-score,
#page5 .sexual-panel .flip-score {
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page5 #sexualMessage .csv-highlight,
#page5 #sexualBullets .csv-highlight,
#page4 .cast-description-panel .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight,
#page5 .sexual-explanation-panel .csv-highlight,
#page5 .sexual-bullets .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  #page4 .cast-description-panel,
  #page4 .compatibility-text-panel,
  #page4 .personality-panel,
  #page5 .sexual-cast-photo-section,
  #page5 .sexual-panel,
  #page5 .sexual-explanation-panel {
    width: calc(100% - 22px) !important;
    margin: 10px auto !important;
    padding: 14px 12px !important;
    border-width: 6px !important;
  }
}




/* 3ページ目の内部ラベル・注意書きは白寄りで読みやすく */
#page3 .birthday-title,
#page3 .birthday-note {
  background: rgba(255, 255, 255, 0.72) !important;
}

/* 4ページ目プロフィール部分は白背景 */
#page4 .selected-cast-profile {
  background: #FFFFFF !important;
}

/* スコア・写真部分は中央配置 */
#page4 .personality-panel,
#page5 .sexual-panel,
#page5 .sexual-cast-photo-section {
  text-align: center !important;
}

/* 文章部分は左揃え */
#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-explanation-panel {
  text-align: left !important;
}

/* フリップスコア中央維持 */
#page4 .personality-panel .flip-score,
#page5 .sexual-panel .flip-score {
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

/* CSV強調指定：<blue>...</blue> / 【...】 / ［...］ */
#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page5 #sexualMessage .csv-highlight,
#page5 #sexualBullets .csv-highlight,
#page4 .cast-description-panel .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight,
#page5 .sexual-explanation-panel .csv-highlight,
#page5 .sexual-bullets .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}

/* スマホ最適化 */
@media (max-width: 520px) {
  #page3 .birthday-panel,
  #page4 .cast-description-panel,
  #page4 .personality-panel,
  #page4 .compatibility-text-panel,
  #page5 .sexual-cast-photo-section,
  #page5 .sexual-panel,
  #page5 .sexual-explanation-panel {
    width: calc(100% - 22px) !important;
    margin: 10px auto !important;
    padding: 14px 12px !important;
    border-width: 6px !important;
  }
}


/* =========================================================
   2026-04-30 再々確認済み最終修正：
   3ページ目・4ページ目・5ページ目 背景デザイン / 文字色設定 統一
   ※既存CSSの末尾で強制上書き
========================================================= */

#page3 .birthday-panel,
#page4 .cast-description-panel,
#page4 .personality-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-cast-photo-section,
#page5 .sexual-panel,
#page5 .sexual-explanation-panel {
  width: calc(100% - 34px) !important;
  margin: 14px auto !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  background: #F1FFE9 !important;
  background-image: none !important;
  border: 8px solid #FFFFFF !important;
  box-shadow: none !important;
}

#page3 .birthday-title,
#page3 .birthday-note {
  background: rgba(255, 255, 255, 0.72) !important;
}

#page4 .selected-cast-profile {
  background: #FFFFFF !important;
}

#page4 .personality-panel,
#page5 .sexual-panel,
#page5 .sexual-cast-photo-section {
  text-align: center !important;
}

#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-explanation-panel {
  text-align: left !important;
}

#page4 .personality-panel .flip-score,
#page5 .sexual-panel .flip-score {
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page5 #sexualMessage .csv-highlight,
#page5 #sexualBullets .csv-highlight,
#page4 .cast-description-panel .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight,
#page5 .sexual-explanation-panel .csv-highlight,
#page5 .sexual-bullets .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  #page3 .birthday-panel,
  #page4 .cast-description-panel,
  #page4 .personality-panel,
  #page4 .compatibility-text-panel,
  #page5 .sexual-cast-photo-section,
  #page5 .sexual-panel,
  #page5 .sexual-explanation-panel {
    width: calc(100% - 22px) !important;
    margin: 10px auto !important;
    padding: 14px 12px !important;
    border-width: 6px !important;
  }
}


/* =========================================================
   2026-04-30 再修正：1→2遷移復旧後の背景・文字色統一
========================================================= */
#page3 .birthday-panel,
#page4 .cast-description-panel,
#page4 .personality-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-cast-photo-section,
#page5 .sexual-panel,
#page5 .sexual-explanation-panel {
  width: calc(100% - 34px) !important;
  margin: 14px auto !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  background: #F1FFE9 !important;
  background-image: none !important;
  border: 8px solid #FFFFFF !important;
  box-shadow: none !important;
}

#page3 .birthday-title,
#page3 .birthday-note {
  background: rgba(255, 255, 255, 0.72) !important;
}

#page4 .selected-cast-profile {
  background: #FFFFFF !important;
}

#page4 .personality-panel,
#page5 .sexual-panel,
#page5 .sexual-cast-photo-section {
  text-align: center !important;
}

#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-explanation-panel {
  text-align: left !important;
}

#page4 .personality-panel .flip-score,
#page5 .sexual-panel .flip-score {
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page5 #sexualMessage .csv-highlight,
#page5 #sexualBullets .csv-highlight,
#page4 .cast-description-panel .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight,
#page5 .sexual-explanation-panel .csv-highlight,
#page5 .sexual-bullets .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  #page3 .birthday-panel,
  #page4 .cast-description-panel,
  #page4 .personality-panel,
  #page4 .compatibility-text-panel,
  #page5 .sexual-cast-photo-section,
  #page5 .sexual-panel,
  #page5 .sexual-explanation-panel {
    width: calc(100% - 22px) !important;
    margin: 10px auto !important;
    padding: 14px 12px !important;
    border-width: 6px !important;
  }
}


/* =========================================================
   2026-04-30 追加修正：
   4ページ目・5ページ目 解説文エリアを二重背景化
   外側：sample2.jpg / 内側：薄い緑背景
========================================================= */

/* 4ページ目：キャスト個人説明・2人の相性説明 */
/* 5ページ目：性の相性の解説文 */
#page4 .cast-description-panel,
#page4 .compatibility-text-panel,
#page5 .sexual-explanation-panel {
  position: relative !important;
  width: calc(100% - 34px) !important;
  margin: 14px auto !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;

  /* 外側背景：添付sample画像 */
  background-image: url('sample2.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* 外側背景を見せるための余白 */
  border: none !important;
  box-shadow: none !important;
}

/* 薄い緑の内側背景を作る */
#page4 .cast-description-panel::before,
#page4 .compatibility-text-panel::before,
#page5 .sexual-explanation-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  background: #F1FFE9 !important;
  opacity: 0.92 !important;
  z-index: 0 !important;
}

/* 文字を内側背景より前面に出す */
#page4 .cast-description-panel > *,
#page4 .compatibility-text-panel > *,
#page5 .sexual-explanation-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 5ページ目：性の相性解説文の白枠は取り除く */
#page5 .sexual-explanation-panel {
  border: none !important;
}

/* 4ページ目のスコアや5ページ目の写真・スコアは従来の薄緑ボックスを維持 */
#page4 .personality-panel,
#page5 .sexual-cast-photo-section,
#page5 .sexual-panel {
  background: #F1FFE9 !important;
  background-image: none !important;
  border: 8px solid #FFFFFF !important;
  box-shadow: none !important;
}

/* CSV強調色は維持 */
#page4 #castDescriptionText .csv-highlight,
#page4 #compatibilityText .csv-highlight,
#page5 #sexualMessage .csv-highlight,
#page5 #sexualBullets .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  #page4 .cast-description-panel,
  #page4 .compatibility-text-panel,
  #page5 .sexual-explanation-panel {
    width: calc(100% - 22px) !important;
    margin: 10px auto !important;
    padding: 14px 12px !important;
  }

  #page4 .cast-description-panel::before,
  #page4 .compatibility-text-panel::before,
  #page5 .sexual-explanation-panel::before {
    inset: 10px !important;
  }
}


/* 2026-04-30 最終修正：4ページ目 キャスト×ゲスト相性説明文の色付き文字 */
#page4 #compatibilityText .csv-highlight,
#page4 .compatibility-text-panel .csv-highlight,
#compatibilityText .csv-highlight,
.csv-highlight {
  color: #FF3399 !important;
  font-weight: 900 !important;
}


/* 2026-04-30 修正：すべてのPUSHボタンを淡いパステル黄緑に変更 */
.push-button {
  background-color: #DFF7B8 !important;
  color: #2F7D32 !important;
  border-color: #8BC34A !important;
  box-shadow: 0 4px 8px rgba(139, 195, 74, 0.35) !important;
}

/* 2026-04-30 追加：3ページ目 生年月日カラー変更 */
.birthday-panel,
.birthday-title,
.birthday-row span,
.birthday-row select,
.birthday-note,
.birthday-note .note-big,
.birthday-note .note-small {
  color: #833C0B !important;
}

.birthday-row select option {
  color: #833C0B;
}


/* 1ページ目画像クリック用演出 */
#page1 img[onclick] {
  transition: 0.2s;
}
#page1 img[onclick]:active {
  transform: scale(0.97);
  opacity: 0.9;
}


/* 2026-04-30 追加：4ページ目 詳細プロフィール導線・ポップアップ */
.selected-cast-info{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;column-gap:8px!important;text-align:left!important}
.selected-cast-info-lines p,.selected-cast-info p{display:grid!important;grid-template-columns:4.8em minmax(0,1fr)!important;align-items:baseline!important;gap:6px!important;margin:0 0 7px!important;white-space:nowrap!important}
.selected-cast-info-lines span,.selected-cast-info p span{width:4.8em!important;min-width:0!important;font-size:clamp(11px,2.8vw,15px)!important;font-weight:900!important;letter-spacing:-.03em!important}
.selected-cast-info-lines strong,.selected-cast-info p strong{text-align:left!important;font-weight:900!important;letter-spacing:-.04em!important}
.profile-detail-button{appearance:none!important;border:none!important;background:transparent!important;padding:0!important;margin:0!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;color:#833C0B!important;font-family:"BIZ UDPGothic","BIZ UDPゴシック","BIZ UDP Gothic",Meiryo,sans-serif!important}
.profile-detail-button span{display:block!important;font-size:clamp(9px,2.4vw,12px)!important;font-weight:900!important;line-height:1.15!important;text-align:center!important;color:#833C0B!important;white-space:nowrap!important}
.profile-detail-button strong{width:clamp(44px,11vw,58px)!important;height:clamp(44px,11vw,58px)!important;border-radius:50%!important;background:#DFF7B8!important;color:#833C0B!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:clamp(15px,4vw,21px)!important;font-weight:900!important;box-shadow:0 3px 8px rgba(131,60,11,.22)!important;border:2px solid rgba(131,60,11,.22)!important}
.profile-detail-button:active strong{transform:scale(.94)!important}
body.modal-open{overflow:hidden!important}
.cast-profile-modal{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;box-sizing:border-box!important}
.cast-profile-modal.hidden{display:none!important}
.cast-profile-modal-overlay{position:absolute!important;inset:0!important;background:rgba(0,0,0,.62)!important}
.cast-profile-modal-content{position:relative!important;z-index:1!important;width:min(92vw,560px)!important;max-height:88vh!important;overflow-y:auto!important;background:#fff!important;border-radius:12px!important;padding:18px 14px 22px!important;box-sizing:border-box!important;box-shadow:0 12px 34px rgba(0,0,0,.35)!important;color:#222!important}
.cast-profile-modal-close{position:sticky!important;top:0!important;margin-left:auto!important;display:flex!important;width:34px!important;height:34px!important;align-items:center!important;justify-content:center!important;border:none!important;border-radius:50%!important;background:#833C0B!important;color:#fff!important;font-size:24px!important;cursor:pointer!important;z-index:3!important}
.cast-profile-modal-title{text-align:left!important;color:#666!important;font-size:clamp(22px,6vw,34px)!important;letter-spacing:.08em!important;font-weight:500!important;border-bottom:1px dashed #cfcfcf!important;margin:-10px 0 12px!important;padding:0 44px 8px 0!important}
.cast-profile-modal-title span{font-size:clamp(11px,3vw,14px)!important;letter-spacing:0!important;margin-left:8px!important}
.cast-profile-main-photo{width:100%!important;max-height:420px!important;object-fit:cover!important;object-position:top center!important;border-radius:6px!important;margin:0 0 14px!important;display:block!important}
.cast-profile-detail-table{width:100%!important;border-top:1px dashed #d8c8b8!important;margin-top:6px!important}
.cast-profile-detail-row{display:grid!important;grid-template-columns:38% 1fr!important;min-height:40px!important;border-bottom:1px dashed #d8c8b8!important}
.cast-profile-detail-label{background:#F7E9D8!important;padding:10px 8px!important;font-weight:900!important;text-align:center!important;color:#333!important;font-size:clamp(13px,3.4vw,15px)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.cast-profile-detail-value{padding:10px 9px!important;text-align:left!important;color:#222!important;font-size:clamp(13px,3.4vw,15px)!important;line-height:1.45!important;display:flex!important;align-items:center!important;word-break:break-word!important}
.cast-profile-sns,.cast-profile-video{margin-top:16px!important;padding:14px!important;border:2px solid #e7d9cc!important;background:#fafafa!important;text-align:left!important}
.cast-profile-section-title{display:inline-block!important;background:#111!important;color:#fff!important;border-radius:999px!important;padding:4px 14px!important;font-weight:900!important;font-size:13px!important;margin:-26px 0 10px!important;position:relative!important}
.cast-profile-sns a{display:block!important;color:#833C0B!important;text-decoration:none!important;font-weight:900!important;padding:8px 0!important;border-bottom:1px dashed #ddd!important}
.cast-profile-video iframe{width:100%!important;aspect-ratio:16/9!important;height:auto!important;border:none!important;border-radius:8px!important;display:block!important;background:#000!important}
@media(max-width:520px){.selected-cast-info{column-gap:5px!important}.selected-cast-info-lines p,.selected-cast-info p{grid-template-columns:4.5em minmax(0,1fr)!important;gap:4px!important}.profile-detail-button span{font-size:9px!important}.profile-detail-button strong{width:44px!important;height:44px!important;font-size:16px!important}.cast-profile-modal{padding:10px!important}.cast-profile-modal-content{width:94vw!important;max-height:90vh!important;padding:14px 10px 18px!important}.cast-profile-detail-row{grid-template-columns:40% 1fr!important}}


/* 2026-04-30 追加修正：3ページ目画像4を診断ボタン化 */
.page3-diagnose-image {
  cursor: pointer !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
.page3-diagnose-image:active {
  transform: scale(0.97) !important;
  opacity: 0.9 !important;
}

/* 2026-04-30 追加修正：4ページ目プロフィール左寄せ＋画像7ボタン */
#page4 .selected-cast-info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(70px, 22vw, 128px) !important;
  align-items: start !important;
  column-gap: 6px !important;
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#page4 .selected-cast-info-lines {
  min-width: 0 !important;
  justify-self: start !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#page4 .selected-cast-info-lines p,
#page4 .selected-cast-info p {
  display: grid !important;
  grid-template-columns: 4.6em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 0 7px !important;
  white-space: nowrap !important;
  justify-content: start !important;
}

#page4 .selected-cast-info-lines span,
#page4 .selected-cast-info p span {
  min-width: 0 !important;
  width: 4.6em !important;
  text-align: left !important;
  font-size: clamp(10px, 2.7vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

#page4 .selected-cast-info-lines strong,
#page4 .selected-cast-info p strong {
  min-width: 0 !important;
  text-align: left !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

.profile-detail-image-button {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: block !important;
  width: clamp(70px, 22vw, 128px) !important;
  align-self: start !important;
  justify-self: end !important;
}

.profile-detail-image-button img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

.profile-detail-image-button:active img {
  transform: scale(0.96) !important;
  opacity: 0.88 !important;
}

/* 詳細プロフィールモーダル */
body.modal-open{overflow:hidden!important}
.cast-profile-modal{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;box-sizing:border-box!important}
.cast-profile-modal.hidden{display:none!important}
.cast-profile-modal-overlay{position:absolute!important;inset:0!important;background:rgba(0,0,0,.62)!important}
.cast-profile-modal-content{position:relative!important;z-index:1!important;width:min(92vw,560px)!important;max-height:88vh!important;overflow-y:auto!important;background:#fff!important;border-radius:12px!important;padding:18px 14px 22px!important;box-sizing:border-box!important;box-shadow:0 12px 34px rgba(0,0,0,.35)!important;color:#222!important}
.cast-profile-modal-close{position:sticky!important;top:0!important;margin-left:auto!important;display:flex!important;width:34px!important;height:34px!important;align-items:center!important;justify-content:center!important;border:none!important;border-radius:50%!important;background:#833C0B!important;color:#fff!important;font-size:24px!important;cursor:pointer!important;z-index:3!important}
.cast-profile-modal-title{text-align:left!important;color:#666!important;font-size:clamp(22px,6vw,34px)!important;letter-spacing:.08em!important;font-weight:500!important;border-bottom:1px dashed #cfcfcf!important;margin:-10px 0 12px!important;padding:0 44px 8px 0!important}
.cast-profile-modal-title span{font-size:clamp(11px,3vw,14px)!important;letter-spacing:0!important;margin-left:8px!important}
.cast-profile-main-photo{width:100%!important;max-height:420px!important;object-fit:cover!important;object-position:top center!important;border-radius:6px!important;margin:0 0 14px!important;display:block!important}
.cast-profile-detail-table{width:100%!important;border-top:1px dashed #d8c8b8!important;margin-top:6px!important}
.cast-profile-detail-row{display:grid!important;grid-template-columns:38% 1fr!important;min-height:40px!important;border-bottom:1px dashed #d8c8b8!important}
.cast-profile-detail-label{background:#F7E9D8!important;padding:10px 8px!important;font-weight:900!important;text-align:center!important;color:#333!important;font-size:clamp(13px,3.4vw,15px)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.cast-profile-detail-value{padding:10px 9px!important;text-align:left!important;color:#222!important;font-size:clamp(13px,3.4vw,15px)!important;line-height:1.45!important;display:flex!important;align-items:center!important;word-break:break-word!important}
.cast-profile-sns,.cast-profile-video{margin-top:16px!important;padding:14px!important;border:2px solid #e7d9cc!important;background:#fafafa!important;text-align:left!important}
.cast-profile-section-title{display:inline-block!important;background:#111!important;color:#fff!important;border-radius:999px!important;padding:4px 14px!important;font-weight:900!important;font-size:13px!important;margin:-26px 0 10px!important;position:relative!important}
.cast-profile-sns a{display:block!important;color:#833C0B!important;text-decoration:none!important;font-weight:900!important;padding:8px 0!important;border-bottom:1px dashed #ddd!important}
.cast-profile-video iframe{width:100%!important;aspect-ratio:16/9!important;height:auto!important;border:none!important;border-radius:8px!important;display:block!important;background:#000!important}

@media(max-width:520px){
  #page4 .selected-cast-info{grid-template-columns:minmax(0,1fr) clamp(64px,21vw,92px)!important;column-gap:4px!important}
  #page4 .selected-cast-info-lines p,#page4 .selected-cast-info p{grid-template-columns:4.4em minmax(0,1fr)!important;gap:3px!important}
  .profile-detail-image-button{width:clamp(64px,21vw,92px)!important}
  .cast-profile-modal{padding:10px!important}
  .cast-profile-modal-content{width:94vw!important;max-height:90vh!important;padding:14px 10px 18px!important}
  .cast-profile-detail-row{grid-template-columns:40% 1fr!important}
}


/* 2026-04-30 追加修正：4ページ目プロフィール全体を中央寄せでバランス調整 */
#page4 .selected-cast-info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(72px, 22vw, 122px) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: clamp(8px, 2.4vw, 16px) !important;
  width: 94% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

#page4 .selected-cast-info-lines {
  justify-self: center !important;
  width: 100% !important;
  max-width: 220px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
}

#page4 .selected-cast-info-lines p,
#page4 .selected-cast-info p {
  display: grid !important;
  grid-template-columns: 4.8em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin: 0 0 7px !important;
  white-space: nowrap !important;
  justify-content: start !important;
}

#page4 .selected-cast-info-lines span,
#page4 .selected-cast-info p span {
  min-width: 0 !important;
  width: 4.8em !important;
  text-align: left !important;
  font-size: clamp(10px, 2.7vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

#page4 .selected-cast-info-lines strong,
#page4 .selected-cast-info p strong {
  min-width: 0 !important;
  text-align: left !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

#page4 .profile-detail-image-button {
  justify-self: center !important;
  align-self: center !important;
  width: clamp(72px, 22vw, 122px) !important;
}

/* 2026-04-30 追加修正：4ページ目画像5を5ページ目へのボタン化 */
.page4-sexual-image {
  cursor: pointer !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

.page4-sexual-image:active {
  transform: scale(0.97) !important;
  opacity: 0.9 !important;
}

@media (max-width: 520px) {
  #page4 .selected-cast-info {
    grid-template-columns: minmax(0, 1fr) clamp(66px, 21vw, 92px) !important;
    width: 98% !important;
    max-width: 320px !important;
    column-gap: 6px !important;
  }

  #page4 .selected-cast-info-lines {
    max-width: 210px !important;
  }

  #page4 .selected-cast-info-lines p,
  #page4 .selected-cast-info p {
    grid-template-columns: 4.6em minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  #page4 .profile-detail-image-button {
    width: clamp(66px, 21vw, 92px) !important;
  }
}


/* =========================================================
   2026-04-30 追加修正：
   4ページ目 相性タイトル
   ・1行目「タイプのあなた」を赤い丸枠で囲む
   ・1行目は左端ぎりぎりから開始
   ・2行目「にとって〜さんは」は中央開始
   ・文章幅をキャストプロフィール説明文と同じ幅に統一
========================================================= */

#page4 .compatibility-text-panel {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  overflow: hidden !important;
}

#page4 .compatibility-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  transform: none !important;
  letter-spacing: normal !important;
}

#page4 .compat-title-line {
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transform: none !important;
  letter-spacing: normal !important;
}

/* 1行目：左端ぎりぎりから開始 */
#page4 .compat-title-line-user {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* 赤い丸枠：線1.5pt相当 */
#page4 .compat-title-user-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 1.5pt solid #e60000 !important;
  border-radius: 999px !important;
  padding: 4px 8px 5px !important;
  box-sizing: border-box !important;
  color: #e60000 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* 2行目：中央あたりから開始 */
#page4 .compat-title-line-cast {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  margin: 0 !important;
  padding-left: 50% !important;
  text-align: left !important;
}

/* 相性タイトル内の文字サイズを自然に統一 */
#page4 .compatibility-title .compat-title-main,
#page4 .compatibility-title .compat-title-you,
#page4 .compatibility-title .compat-title-cast {
  font-size: clamp(21px, 5.2vw, 32px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  transform: none !important;
}

#page4 .compatibility-title .compat-title-small {
  font-size: clamp(11px, 2.9vw, 16px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  transform: none !important;
}

#page4 .compat-title-user-circle .compat-title-main,
#page4 .compat-title-user-circle .compat-title-small,
#page4 .compat-title-user-circle .compat-title-you {
  color: #e60000 !important;
}

/* 本文の幅もプロフィール文章と揃える */
#page4 #compatibilityText {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  #page4 .compatibility-text-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #page4 .compat-title-user-circle {
    padding: 3px 6px 4px !important;
    border-width: 1.5pt !important;
  }

  #page4 .compatibility-title .compat-title-main,
  #page4 .compatibility-title .compat-title-you,
  #page4 .compatibility-title .compat-title-cast {
    font-size: clamp(18px, 4.9vw, 25px) !important;
    letter-spacing: -0.055em !important;
  }

  #page4 .compatibility-title .compat-title-small {
    font-size: clamp(9px, 2.5vw, 12px) !important;
    letter-spacing: -0.04em !important;
  }

  #page4 .compat-title-line-cast {
    padding-left: 50% !important;
  }
}

@media (max-width: 380px) {
  #page4 .compatibility-title .compat-title-main,
  #page4 .compatibility-title .compat-title-you,
  #page4 .compatibility-title .compat-title-cast {
    font-size: clamp(16px, 4.55vw, 21px) !important;
    letter-spacing: -0.075em !important;
  }

  #page4 .compatibility-title .compat-title-small {
    font-size: clamp(8px, 2.3vw, 10px) !important;
    letter-spacing: -0.06em !important;
  }

  #page4 .compat-title-user-circle {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* 2026-04-30 追加修正：4ページ目 詳細プロフィール欄を左端寄せ */
#page4 .selected-cast-info {
  justify-content: start !important;
  justify-items: start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: none !important;
}

#page4 .selected-cast-info-lines {
  justify-self: start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

#page4 .profile-detail-image-button {
  justify-self: start !important;
}

/* 2026-04-30 追加修正：5ページ目 キャスト写真＋と＋ゲスト仮イラスト */
.sexual-pair-photo-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(8px, 2.4vw, 16px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  background: #F1FFE9 !important;
  border: none !important;
}

.sexual-pair-photo {
  width: clamp(108px, 32vw, 178px) !important;
  height: clamp(108px, 32vw, 178px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  justify-self: center !important;
  background: #fff !important;
  border: 5px solid #DFF7B8 !important;
  box-shadow: 0 5px 12px rgba(131, 60, 11, 0.18) !important;
}

.sexual-pair-photo img,
.guest-photo-circle svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.sexual-pair-and {
  color: #833C0B !important;
  font-size: 36pt !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif !important;
  text-align: center !important;
  justify-self: center !important;
}

.sexual-between-image {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 520px) {
  .sexual-pair-photo-section {
    padding: 12px 10px !important;
    gap: 6px !important;
  }

  .sexual-pair-photo {
    width: clamp(92px, 29vw, 130px) !important;
    height: clamp(92px, 29vw, 130px) !important;
    border-width: 4px !important;
  }

  .sexual-pair-and {
    font-size: 36pt !important;
  }
}


/* 2026-04-30 追加修正：5ページ目 キャスト写真・ゲスト男性イラストの大きさと間隔を統一 */
#page5 .sexual-pair-photo-section {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(10px, 3vw, 18px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 14px !important;
}

#page5 .sexual-pair-photo,
#page5 .sexual-cast-photo,
#page5 .guest-photo-circle {
  width: clamp(108px, 30vw, 168px) !important;
  height: clamp(108px, 30vw, 168px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: center !important;
}

#page5 .sexual-cast-photo img,
#page5 .sexual-pair-photo img,
#page5 .guest-photo-circle svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

#page5 .sexual-pair-and {
  width: auto !important;
  min-width: 1.2em !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
  color: #833C0B !important;
  font-size: 36pt !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif !important;
}

/* 2026-04-30 追加修正：5ページ目 ボタン2つを縦に自然配置 */
#page5 .page5-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 0 !important;
}

#page5 .page5-action-buttons .push-button {
  margin: 0 !important;
}

#page5 .page5-back-cast-button,
#page5 .page5-reset-button {
  background-color: #DFF7B8 !important;
  color: #833C0B !important;
  border-color: #8BC34A !important;
  box-shadow: 0 4px 8px rgba(139, 195, 74, 0.35) !important;
}

@media (max-width: 520px) {
  #page5 .sexual-pair-photo-section {
    gap: 6px !important;
    padding: 12px 8px !important;
  }

  #page5 .sexual-pair-photo,
  #page5 .sexual-cast-photo,
  #page5 .guest-photo-circle {
    width: clamp(88px, 28vw, 124px) !important;
    height: clamp(88px, 28vw, 124px) !important;
  }

  #page5 .sexual-pair-and {
    font-size: 36pt !important;
  }
}


/* =========================================================
   2026-05-01 修正：5ページ目写真バランス・戻る画像・4ページ目タイトル・ポップアップ調整
========================================================= */
#page5 .sexual-pair-photo-section {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(12px, 4vw, 28px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 8px !important;
}
#page5 .sexual-pair-photo,
#page5 .sexual-cast-photo,
#page5 .guest-photo-circle {
  flex: 0 0 clamp(96px, 29vw, 168px) !important;
  width: clamp(96px, 29vw, 168px) !important;
  height: clamp(96px, 29vw, 168px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
#page5 .sexual-cast-photo img,
#page5 .sexual-pair-photo img,
#page5 .guest-photo-circle svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
}
#page5 .sexual-pair-and {
  flex: 0 0 auto !important;
  color: #833C0B !important;
  font-size: 36pt !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif !important;
  text-align: center !important;
  margin: 0 !important;
}
@media (max-width: 420px) {
  #page5 .sexual-pair-photo-section { gap: 8px !important; padding: 12px 4px !important; }
  #page5 .sexual-pair-photo,
  #page5 .sexual-cast-photo,
  #page5 .guest-photo-circle {
    flex-basis: clamp(82px, 27vw, 112px) !important;
    width: clamp(82px, 27vw, 112px) !important;
    height: clamp(82px, 27vw, 112px) !important;
  }
  #page5 .sexual-pair-and { font-size: 36pt !important; }
}
#page5 .page5-action-buttons,
#page5 .page5-reset-button,
#page5 .page5-back-cast-button { display: none !important; }
#page5 .page5-back-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
#page5 .page5-back-image:active { transform: scale(.97) !important; opacity: .9 !important; }
#page4 .compat-title-user-circle { border: none !important; border-radius: 0 !important; padding: 0 !important; color: inherit !important; }
#page4 .compat-title-line-user { display: flex !important; justify-content: center !important; align-items: baseline !important; gap: 0 !important; margin: 0 0 8px !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; }
#page4 .compat-title-space { display: inline !important; white-space: pre !important; }
#page4 .compat-title-line-user .compat-title-main,
#page4 .compat-title-line-user .compat-title-small,
#page4 .compat-title-line-user .compat-title-you { color: #e60000 !important; }
.cast-profile-modal-content { width: min(96vw, 590px) !important; max-height: calc(100vh - 18px) !important; overflow: hidden !important; padding: 8px 8px 10px !important; border-radius: 10px !important; }
.cast-profile-modal-close { width: 28px !important; height: 28px !important; font-size: 20px !important; }
.cast-profile-modal-title { font-size: clamp(18px, 4.6vw, 25px) !important; margin: -4px 0 6px !important; padding: 0 34px 4px 0 !important; line-height: 1.1 !important; }
.cast-profile-main-photo { width: clamp(88px, 24vw, 135px) !important; height: clamp(88px, 24vw, 135px) !important; border-radius: 50% !important; object-fit: cover !important; object-position: top center !important; margin: 0 auto 6px !important; }
.cast-profile-detail-table { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; border-top: 1px dashed #d8c8b8 !important; margin-top: 4px !important; }
.cast-profile-detail-row { display: grid !important; grid-template-columns: 43% 57% !important; min-height: 24px !important; border-bottom: 1px dashed #d8c8b8 !important; }
.cast-profile-detail-label { padding: 4px 3px !important; font-size: clamp(9px, 2.3vw, 12px) !important; line-height: 1.15 !important; }
.cast-profile-detail-value { padding: 4px 4px !important; font-size: clamp(9px, 2.3vw, 12px) !important; line-height: 1.18 !important; }
.cast-profile-sns,.cast-profile-video { margin-top: 6px !important; padding: 6px !important; border-width: 1px !important; }
.cast-profile-section-title { font-size: 10px !important; padding: 2px 9px !important; margin: -16px 0 4px !important; }
.cast-profile-sns a { display: inline-block !important; padding: 3px 10px 3px 0 !important; font-size: 11px !important; border-bottom: none !important; }
.cast-profile-video iframe { aspect-ratio: 16 / 6 !important; max-height: 90px !important; }
@media (max-height: 720px) {
  .cast-profile-main-photo { width: 76px !important; height: 76px !important; }
  .cast-profile-detail-label,.cast-profile-detail-value { font-size: 9px !important; padding: 3px !important; line-height: 1.08 !important; }
  .cast-profile-detail-row { min-height: 20px !important; }
  .cast-profile-video iframe { max-height: 70px !important; }
}
@media (max-width: 430px) {
  .cast-profile-detail-table { grid-template-columns: 1fr !important; }
  .cast-profile-main-photo { width: 82px !important; height: 82px !important; }
  .cast-profile-detail-row { min-height: 21px !important; }
  .cast-profile-video iframe { max-height: 70px !important; }
}


/* =========================================================
   2026-05-01 追加修正：5ページ目写真サイズ統一・更新時1ページ目・動画比率修正
========================================================= */
#page5 .sexual-pair-photo-section {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: clamp(10px, 3vw, 18px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 8px !important;
}
#page5 .sexual-pair-photo,
#page5 .sexual-cast-photo,
#page5 .selected-cast-photo.sexual-cast-photo,
#page5 .guest-photo-circle {
  width: clamp(98px, 28vw, 150px) !important;
  height: clamp(98px, 28vw, 150px) !important;
  min-width: clamp(98px, 28vw, 150px) !important;
  min-height: clamp(98px, 28vw, 150px) !important;
  max-width: clamp(98px, 28vw, 150px) !important;
  max-height: clamp(98px, 28vw, 150px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
}
#page5 .sexual-pair-photo img,
#page5 .sexual-cast-photo img,
#page5 .selected-cast-photo.sexual-cast-photo img,
#page5 #selectedSexualCastImage,
#page5 .guest-photo-circle svg {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#page5 .sexual-pair-and {
  color: #833C0B !important;
  font-size: 36pt !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDP Gothic", Meiryo, sans-serif !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
}
@media (max-width: 520px) {
  #page5 .sexual-pair-photo-section { column-gap: 6px !important; padding: 12px 4px !important; }
  #page5 .sexual-pair-photo,
  #page5 .sexual-cast-photo,
  #page5 .selected-cast-photo.sexual-cast-photo,
  #page5 .guest-photo-circle {
    width: clamp(86px, 27vw, 118px) !important;
    height: clamp(86px, 27vw, 118px) !important;
    min-width: clamp(86px, 27vw, 118px) !important;
    min-height: clamp(86px, 27vw, 118px) !important;
    max-width: clamp(86px, 27vw, 118px) !important;
    max-height: clamp(86px, 27vw, 118px) !important;
  }
}
.cast-profile-video { margin-top: 10px !important; padding: 10px !important; border: 2px solid #e7d9cc !important; background: #fafafa !important; text-align: left !important; }
.cast-profile-video iframe {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 160px !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border: none !important;
  border-radius: 8px !important;
  background: #000 !important;
}
@media (max-width: 520px) { .cast-profile-video iframe { min-height: 150px !important; max-height: none !important; aspect-ratio: 16 / 9 !important; } }
.cast-profile-video iframe[style] { height: auto !important; max-height: none !important; }


/* 2026-05-01 追加修正：4ページ目 相性タイトルを左端から自然配置 */
#page4 .compatibility-text-panel {
  overflow: visible !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#page4 .compatibility-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

#page4 .compat-title-line-user {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: none !important;
}

#page4 .compat-title-line-cast {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 48% !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: none !important;
}

#page4 .compat-title-main,
#page4 .compat-title-you,
#page4 .compat-title-cast {
  font-size: clamp(22px, 6.2vw, 34px) !important;
  letter-spacing: -0.035em !important;
  transform: none !important;
}

#page4 .compat-title-small {
  font-size: clamp(11px, 3vw, 16px) !important;
  letter-spacing: -0.02em !important;
  transform: none !important;
}

#page4 .compat-title-space {
  display: inline-block !important;
  width: .6em !important;
}

/* 2026-05-01 追加修正：3ページ目 注意書きの「翌日の日付をご入力ください。」を1行化 */
.birthday-note .note-next-line {
  display: block !important;
  white-space: nowrap !important;
  margin-left: 1em !important;
}

.birthday-note .note-next-line .note-big,
.birthday-note .note-next-line .note-small {
  display: inline !important;
  white-space: nowrap !important;
}

/* 2026-05-01 追加修正：プロフィールモーダルの動画つぶれ防止・表示調整 */
.cast-profile-modal-content {
  max-height: 96vh !important;
  overflow-y: auto !important;
}

.cast-profile-detail-row {
  min-height: 28px !important;
}

.cast-profile-detail-label,
.cast-profile-detail-value {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: clamp(11px, 2.8vw, 14px) !important;
  line-height: 1.25 !important;
}

.cast-profile-video {
  overflow: visible !important;
  padding-bottom: 12px !important;
}

.cast-profile-video-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 170px !important;
  background: #000 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.cast-profile-video-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

.cast-profile-video iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 170px !important;
  border: 0 !important;
}

.cast-profile-sns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.cast-profile-sns .cast-profile-section-title {
  grid-column: 1 / -1 !important;
}

.cast-profile-sns a {
  text-align: center !important;
  font-size: clamp(11px, 2.8vw, 13px) !important;
  border: 1px solid #e7d9cc !important;
  border-radius: 999px !important;
  padding: 7px 4px !important;
  background: #fff !important;
}

@media (max-width: 520px) {
  #page4 .compatibility-text-panel {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #page4 .compat-title-main,
  #page4 .compat-title-you,
  #page4 .compat-title-cast {
    font-size: clamp(19px, 5.8vw, 27px) !important;
    letter-spacing: -0.055em !important;
  }

  #page4 .compat-title-small {
    font-size: clamp(9px, 2.55vw, 12px) !important;
    letter-spacing: -0.04em !important;
  }

  #page4 .compat-title-line-cast {
    padding-left: 46% !important;
  }

  .birthday-note .note-next-line {
    margin-left: 0.7em !important;
  }

  .cast-profile-video-frame {
    min-height: 150px !important;
  }

  .cast-profile-modal-content {
    max-height: 96vh !important;
  }
}


/* 2026-05-01 追加修正：詳しいプロフィール SNSをアイコン表示 */
.cast-profile-sns-icons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 2px solid #e7d9cc !important;
  padding: 16px 12px 12px !important;
}

.cast-profile-sns-icons .cast-profile-section-title {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

.cast-profile-sns-icons .sns-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.18) !important;
  transition: transform .18s ease, opacity .18s ease !important;
  overflow: hidden !important;
}

.cast-profile-sns-icons .sns-icon:active {
  transform: scale(.94) !important;
  opacity: .86 !important;
}

.cast-profile-sns-icons .sns-icon-mark {
  display: block !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.cast-profile-sns-icons .sns-icon-label {
  display: block !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.cast-profile-sns-icons .sns-icon-instagram {
  color: #ffffff !important;
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 14%, #fd5949 38%, #d6249f 62%, #285AEB 100%) !important;
}

.cast-profile-sns-icons .sns-icon-tiktok {
  color: #ffffff !important;
  background: #111111 !important;
}

.cast-profile-sns-icons .sns-icon-x {
  color: #ffffff !important;
  background: #000000 !important;
}

/* 2026-05-01 追加修正：5ページ目 キャスト・ゲスト写真エリアの背景を白に変更 */
#page5 .sexual-pair-photo-section {
  background: #ffffff !important;
  border: none !important;
}

#page5 .sexual-pair-photo,
#page5 .sexual-cast-photo,
#page5 .guest-photo-circle {
  background: #ffffff !important;
}

@media (max-width: 520px) {
  .cast-profile-sns-icons .sns-icon {
    width: 52px !important;
    height: 52px !important;
  }

  .cast-profile-sns-icons .sns-icon-mark {
    font-size: 22px !important;
  }

  .cast-profile-sns-icons .sns-icon-label {
    font-size: 7px !important;
  }
}


/* 2026-05-01 追加修正：4ページ目 詳しいプロフィールボタンを中央〜右端の横長ボタン化 */
#page4 .selected-cast-info {
  grid-template-columns: minmax(0, 1fr) minmax(50%, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  align-items: center !important;
  column-gap: 8px !important;
}

#page4 .profile-detail-image-button {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

#page4 .profile-detail-image-button img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

@media (max-width: 520px) {
  #page4 .selected-cast-info {
    grid-template-columns: minmax(0, 1fr) minmax(48%, 1fr) !important;
    column-gap: 5px !important;
  }
}

/* 2026-05-01 追加修正：ポップアップ内プロフィール項目の自然改行 */
.cast-profile-detail-label {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.cast-profile-detail-label .label-line {
  display: block !important;
  white-space: nowrap !important;
}

.cast-profile-section-title-note {
  display: inline-block !important;
  margin-left: 8px !important;
  color: #833C0B !important;
  font-size: clamp(10px, 2.6vw, 13px) !important;
  font-weight: 900 !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

@media (max-width: 520px) {
  .cast-profile-section-title-note {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    font-size: 11px !important;
  }
}


/* 2026-05-01 追加修正：ポップアップ見出し補足を赤字22ptで横余白に表示 */
.cast-profile-section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.cast-profile-section-title-note {
  display: inline-block !important;
  margin-left: 10px !important;
  color: #e60000 !important;
  background: transparent !important;
  font-size: 22pt !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
}

/* 2026-05-01 追加修正：プロフィール質問項目の幅を広げ、はみ出し防止 */
.cast-profile-detail-row {
  grid-template-columns: 46% 54% !important;
}

.cast-profile-detail-label {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  line-height: 1.22 !important;
  padding: 8px 5px !important;
  font-size: clamp(11px, 3vw, 14px) !important;
  letter-spacing: -0.05em !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.cast-profile-detail-label .label-line {
  display: block !important;
  white-space: nowrap !important;
}

.cast-profile-detail-value {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 520px) {
  .cast-profile-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: normal !important;
    flex-wrap: nowrap !important;
  }

  .cast-profile-section-title-note {
    display: inline-block !important;
    margin-left: 6px !important;
    font-size: 22pt !important;
    line-height: 1.1 !important;
    letter-spacing: -0.08em !important;
    white-space: normal !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 48% 52% !important;
  }

  .cast-profile-detail-label {
    font-size: clamp(10px, 3vw, 12px) !important;
    letter-spacing: -0.07em !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

@media (max-width: 380px) {
  .cast-profile-section-title-note {
    font-size: 18pt !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 50% 50% !important;
  }

  .cast-profile-detail-label {
    font-size: 10px !important;
    letter-spacing: -0.08em !important;
  }
}


/* =========================================================
   2026-05-01 追加修正：
   4ページ目 ポップアップ表示部分 UI調整
   - YouTube/SNS補足を黒ラベルから分離
   - 黒ラベルを一回り大きく
   - 詳細プロフィールボタン縮小
   - 質問項目の改行とはみ出し防止
========================================================= */

/* YouTube / SNS の黒ラベルを大きく */
.cast-profile-section-title {
  display: inline-block !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 0 6px !important;
  white-space: nowrap !important;
}

/* 黒ラベルとは別の余白に赤字16ptで表示 */
.profile-section-note {
  display: block !important;
  color: #e60000 !important;
  background: transparent !important;
  font-size: 16pt !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  text-align: left !important;
  margin: 6px 0 12px !important;
  padding: 0 !important;
  letter-spacing: -0.03em !important;
}

/* 以前の横並び補足が残っていても見え方を整える */
.cast-profile-section-title-note {
  display: block !important;
  color: #e60000 !important;
  background: transparent !important;
  font-size: 16pt !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  margin: 6px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* 詳しいプロフィールはココのボタンを一回り小さくし、名前と重ならないようにする */
#page4 .profile-detail-image-button {
  width: 82% !important;
  max-width: 170px !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  position: static !important;
  transform: none !important;
}

#page4 .profile-detail-image-button img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* 4ページ目プロフィールの左右が詰まりすぎないよう微調整 */
#page4 .selected-cast-info {
  column-gap: 8px !important;
  overflow: visible !important;
}

#page4 .selected-cast-info-lines {
  min-width: 0 !important;
  overflow: visible !important;
}

/* 質問項目の枠内収まり改善 */
.cast-profile-detail-row {
  grid-template-columns: 46% 54% !important;
}

.cast-profile-detail-label {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 7px 4px !important;
  line-height: 1.22 !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  letter-spacing: -0.06em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.cast-profile-detail-label .label-line {
  display: block !important;
  white-space: nowrap !important;
}

.cast-profile-detail-value {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 520px) {
  .cast-profile-section-title {
    font-size: 22px !important;
    padding: 5px 16px !important;
  }

  .profile-section-note,
  .cast-profile-section-title-note {
    font-size: 16pt !important;
    line-height: 1.2 !important;
    letter-spacing: -0.05em !important;
  }

  #page4 .profile-detail-image-button {
    width: 76% !important;
    max-width: 140px !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 48% 52% !important;
  }

  .cast-profile-detail-label {
    font-size: 10px !important;
    letter-spacing: -0.08em !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

@media (max-width: 380px) {
  .cast-profile-section-title {
    font-size: 20px !important;
  }

  .profile-section-note,
  .cast-profile-section-title-note {
    font-size: 14pt !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 50% 50% !important;
  }

  .cast-profile-detail-label {
    font-size: 9.5px !important;
    letter-spacing: -0.09em !important;
  }
}

/* tweak youtube/SNS size smaller */
.cast-profile-section-title{font-size:22px !important;}

/* SNS icons horizontal */
.cast-profile-sns{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:8px;
}
.cast-profile-sns a img{
  width:42px;
  height:42px;
  object-fit:contain;
}


/* =========================================================
   2026-05-01 追加修正：
   4ページ目ポップアップ最終調整
   ・質問「嬉しいプレゼントは？」へ変更
   ・SNS/YouTube補足を赤字14pt
   ・SNS/YouTube黒ラベル18pt
   ・SNSアイコン横一列
   ・詳しいプロフィールボタンを重ならない範囲で大きめ表示
========================================================= */

/* YouTube / SNS 黒ラベル：18pt */
.cast-profile-section-title {
  display: inline-block !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 5px 15px !important;
  font-size: 18pt !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  margin: 0 0 4px !important;
  white-space: nowrap !important;
}

/* SNS / YouTube の赤字補足：ラベルの下に14ptで表示 */
.profile-section-note,
.cast-profile-section-title-note,
.sns-profile-note,
.youtube-profile-note {
  display: block !important;
  color: #e60000 !important;
  background: transparent !important;
  font-size: 14pt !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  text-align: left !important;
  margin: 5px 0 11px !important;
  padding: 0 !important;
  letter-spacing: -0.035em !important;
}

/* SNSアイコンを横一列に配置 */
.cast-profile-sns,
.cast-profile-sns-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.cast-profile-sns .cast-profile-section-title,
.cast-profile-sns-icons .cast-profile-section-title,
.cast-profile-sns .profile-section-note,
.cast-profile-sns-icons .profile-section-note,
.cast-profile-sns .sns-profile-note,
.cast-profile-sns-icons .sns-profile-note {
  flex-basis: 100% !important;
}

.cast-profile-sns,
.cast-profile-sns-icons {
  flex-wrap: wrap !important;
}

.cast-profile-sns .sns-icon,
.cast-profile-sns-icons .sns-icon,
.cast-profile-sns a,
.cast-profile-sns-icons a {
  flex: 0 0 auto !important;
  width: 54px !important;
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
}

.cast-profile-sns .sns-icon-mark,
.cast-profile-sns-icons .sns-icon-mark {
  font-size: 23px !important;
  line-height: 1 !important;
}

/* 詳しいプロフィールはココの画像ボタン：中央まで行かない範囲で大きめ */
#page4 .selected-cast-info {
  grid-template-columns: minmax(0, 1fr) minmax(38%, 46%) !important;
  column-gap: 8px !important;
  align-items: center !important;
  overflow: visible !important;
}

#page4 .profile-detail-image-button {
  width: 100% !important;
  max-width: 210px !important;
  min-width: 118px !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  position: static !important;
  transform: none !important;
}

#page4 .profile-detail-image-button img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* 質問ラベルの枠内収まり調整 */
.cast-profile-detail-row {
  grid-template-columns: 46% 54% !important;
}

.cast-profile-detail-label {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 7px 4px !important;
  line-height: 1.22 !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  letter-spacing: -0.06em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.cast-profile-detail-label .label-line {
  display: block !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .cast-profile-section-title {
    font-size: 18pt !important;
    padding: 4px 14px !important;
  }

  .profile-section-note,
  .cast-profile-section-title-note,
  .sns-profile-note,
  .youtube-profile-note {
    font-size: 14pt !important;
    line-height: 1.18 !important;
  }

  .cast-profile-sns .sns-icon,
  .cast-profile-sns-icons .sns-icon,
  .cast-profile-sns a,
  .cast-profile-sns-icons a {
    width: 50px !important;
    height: 50px !important;
  }

  #page4 .selected-cast-info {
    grid-template-columns: minmax(0, 1fr) minmax(36%, 44%) !important;
    column-gap: 6px !important;
  }

  #page4 .profile-detail-image-button {
    max-width: 168px !important;
    min-width: 104px !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 48% 52% !important;
  }

  .cast-profile-detail-label {
    font-size: 10px !important;
    letter-spacing: -0.08em !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

@media (max-width: 380px) {
  .profile-section-note,
  .cast-profile-section-title-note,
  .sns-profile-note,
  .youtube-profile-note {
    font-size: 12.5pt !important;
  }

  #page4 .profile-detail-image-button {
    max-width: 150px !important;
    min-width: 96px !important;
  }

  .cast-profile-detail-row {
    grid-template-columns: 50% 50% !important;
  }
}

/* YouTube/SNS黒帯統一（中央・横幅フル） */
.cast-profile-section-title{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  background:#000 !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:18px !important;
  padding:8px 0 !important;
}


/* =========================================================
   追加修正：4ページ目ポップアップ Xボタン位置をさらに下げる
========================================================= */
.cast-profile-modal-close {
  top: 34px !important;
  right: 12px !important;
  z-index: 10010 !important;
}

/* =========================================================
   追加修正：ページ遷移前PR動画モーダル
========================================================= */
.transition-video-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.94) !important;
}

.transition-video-modal.hidden {
  display: none !important;
}

.transition-video-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.94) !important;
}

.transition-video-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(100vw, 600px) !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

.transition-pr-video {
  width: 100% !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
  display: block !important;
}

/* =========================================================
   追加修正：4ページ目ポップアップ内の自己紹介動画をローカルMP4で表示
========================================================= */
.cast-profile-video video,
.cast-profile-local-video {
  width: 100% !important;
  height: auto !important;
  max-height: 360px !important;
  display: block !important;
  background: #000 !important;
  border: none !important;
  border-radius: 8px !important;
  object-fit: contain !important;
}

.profile-section-note,
.youtube-profile-note {
  font-size: 14pt !important;
  color: #e60000 !important;
  font-weight: 900 !important;
}

/* =========================================================
   4ページ目：キャスト写真＋「プロフィールはココ」斜め重なり配置
   - 横幅の縦帯に干渉しないよう、ページ内側に収める
   - 写真とボタンを一部重ねる
   - 名前/スタイル/生年月日は左下に枠なしで配置
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-sizing: border-box !important;
  text-align: left !important;
  overflow: visible !important;
}

/* 配置用ステージ：この中に円2つと情報欄を収める */
#page4 .page4-overlap-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(300px, 78vw, 430px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 円①：キャスト写真。左に寄せすぎず、中央左に配置 */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 4 !important;
  top: clamp(4px, 1.2vw, 10px) !important;
  left: clamp(14px, 6.2vw, 46px) !important;
  width: clamp(160px, 42vw, 238px) !important;
  height: clamp(160px, 42vw, 238px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 7px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* 円②：プロフィールはココ。写真の右下へ一部重ねる */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(104px, 28vw, 162px) !important;
  left: clamp(136px, 37vw, 220px) !important;
  right: auto !important;
  width: clamp(160px, 42vw, 238px) !important;
  height: clamp(160px, 42vw, 238px) !important;
  max-width: min(clamp(160px, 42vw, 238px), calc(100% - clamp(136px, 37vw, 220px) - 4px)) !important;
  max-height: clamp(160px, 42vw, 238px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

/* 円内画像 */
#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* □部分：名前/スタイル/生年月日。左下に枠なしで配置 */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 6 !important;
  left: clamp(4px, 2.2vw, 18px) !important;
  bottom: clamp(0px, 1.2vw, 8px) !important;
  display: block !important;
  width: min(48%, 250px) !important;
  max-width: 250px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: left !important;
  color: #111 !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page4 .page4-overlap-info p {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  flex: 0 0 4.5em !important;
  min-width: 4.5em !important;
  width: 4.5em !important;
  font-size: clamp(10px, 2.6vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
}

#page4 .page4-overlap-info strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  text-align: left !important;
  letter-spacing: -0.05em !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(17px, 4.6vw, 27px) !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday {
  font-size: clamp(10px, 2.65vw, 14px) !important;
  line-height: 1.1 !important;
}

/* スマホ幅でも右の縦帯へ干渉させない */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(286px, 84vw, 392px) !important;
  }

  #page4 .page4-overlap-photo-circle,
  #page4 .page4-overlap-coco-circle {
    width: clamp(142px, 42vw, 200px) !important;
    height: clamp(142px, 42vw, 200px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    left: clamp(2px, 2vw, 12px) !important;
    top: 4px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: clamp(92px, 27vw, 132px) !important;
    left: clamp(116px, 35vw, 172px) !important;
    max-width: min(clamp(142px, 42vw, 200px), calc(100% - clamp(116px, 35vw, 172px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    left: 0 !important;
    width: min(50%, 225px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 300px !important;
  }

  #page4 .page4-overlap-photo-circle,
  #page4 .page4-overlap-coco-circle {
    width: 142px !important;
    height: 142px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: 92px !important;
    left: 116px !important;
    max-width: calc(100% - 118px) !important;
  }

  #page4 .page4-overlap-info {
    width: 52% !important;
  }

  #page4 .page4-overlap-info span,
  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 10px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 16px !important;
  }
}

/* =========================================================
   追加微調整：
   ① 4ページ目のキャスト写真＋「プロフィールはココ」を少し右寄せ
   ② 2つの円の重なり部分を増やす
   ③ 1ページ目 画像1-1.jpg 同士の間の動画表示
========================================================= */

#page1 .page1-between-video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: #000 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(300px, 78vw, 430px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
}

#page4 .page4-overlap-photo-circle {
  left: clamp(28px, 8.2vw, 62px) !important;
  top: clamp(4px, 1.2vw, 10px) !important;
  width: clamp(160px, 42vw, 238px) !important;
  height: clamp(160px, 42vw, 238px) !important;
  transform: none !important;
}

#page4 .page4-overlap-coco-circle {
  left: clamp(126px, 34vw, 202px) !important;
  top: clamp(96px, 25.5vw, 150px) !important;
  right: auto !important;
  width: clamp(160px, 42vw, 238px) !important;
  height: clamp(160px, 42vw, 238px) !important;
  max-width: min(clamp(160px, 42vw, 238px), calc(100% - clamp(126px, 34vw, 202px) - 4px)) !important;
  transform: none !important;
}

#page4 .page4-overlap-info {
  left: clamp(4px, 2.2vw, 18px) !important;
  bottom: clamp(0px, 1.2vw, 8px) !important;
}

@media (max-width: 520px) {
  #page4 .page4-overlap-photo-circle {
    left: clamp(14px, 4vw, 26px) !important;
    width: clamp(142px, 42vw, 200px) !important;
    height: clamp(142px, 42vw, 200px) !important;
  }

  #page4 .page4-overlap-coco-circle {
    left: clamp(108px, 32vw, 158px) !important;
    top: clamp(86px, 25vw, 124px) !important;
    width: clamp(142px, 42vw, 200px) !important;
    height: clamp(142px, 42vw, 200px) !important;
    max-width: min(clamp(142px, 42vw, 200px), calc(100% - clamp(108px, 32vw, 158px) - 2px)) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-photo-circle {
    left: 14px !important;
    width: 142px !important;
    height: 142px !important;
  }

  #page4 .page4-overlap-coco-circle {
    left: 108px !important;
    top: 86px !important;
    width: 142px !important;
    height: 142px !important;
    max-width: calc(100% - 110px) !important;
  }
}

/* =========================================================
   4ページ目 最終修正：
   - 写真＋プロフィールボタンを中央寄りに配置
   - 名前/スタイル/生年月日を選んだキャストの隣に配置
   - 既存のデザイン・文字サイズは極力維持
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-align: left !important;
}

/* 写真・ボタン・情報を置く土台 */
#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(260px, 67vw, 365px) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
}

/* キャスト写真：ページ中央寄り、少し左 */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 4 !important;
  top: clamp(12px, 3vw, 22px) !important;
  left: clamp(42px, 13vw, 86px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(126px, 34vw, 188px) !important;
  height: clamp(126px, 34vw, 188px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* プロフィールはココ：写真の右下に重ねつつ中央寄り */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(98px, 26vw, 150px) !important;
  left: clamp(140px, 36vw, 215px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(126px, 34vw, 188px) !important;
  height: clamp(126px, 34vw, 188px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(126px, 34vw, 188px), calc(100% - clamp(140px, 36vw, 215px) - 4px)) !important;
  max-height: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 名前/スタイル/生年月日：キャスト写真＋ボタンの右隣に配置 */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 6 !important;
  left: clamp(270px, 61vw, 335px) !important;
  right: clamp(4px, 1.5vw, 12px) !important;
  top: clamp(145px, 38vw, 205px) !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #111 !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  text-align: left !important;
}

#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 4.2em minmax(0, 1fr) !important;
  align-items: baseline !important;
  justify-content: start !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 4.2em !important;
  min-width: 4.2em !important;
  flex: 0 0 auto !important;
  font-weight: 900 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* 名前が大きくなりすぎてはみ出さないように微調整 */
#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(22px, 5.5vw, 34px) !important;
  letter-spacing: -0.06em !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(10px, 2.65vw, 14px) !important;
}

/* スマホでも赤線イメージに近い配置を維持 */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(245px, 69vw, 325px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: clamp(10px, 2.8vw, 18px) !important;
    left: clamp(32px, 10vw, 54px) !important;
    width: clamp(106px, 31vw, 152px) !important;
    height: clamp(106px, 31vw, 152px) !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: clamp(84px, 24vw, 122px) !important;
    left: clamp(114px, 31vw, 162px) !important;
    width: clamp(106px, 31vw, 152px) !important;
    height: clamp(106px, 31vw, 152px) !important;
    max-width: min(clamp(106px, 31vw, 152px), calc(100% - clamp(114px, 31vw, 162px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    left: clamp(230px, 62vw, 282px) !important;
    right: 2px !important;
    top: clamp(138px, 39vw, 178px) !important;
    text-align: left !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.7em minmax(0, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 7px !important;
  }

  #page4 .page4-overlap-info span {
    width: 3.7em !important;
    min-width: 3.7em !important;
    font-size: clamp(9px, 2.45vw, 12px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(18px, 5.2vw, 26px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(9px, 2.45vw, 12px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 248px !important;
  }

  #page4 .page4-overlap-photo-circle {
    left: 28px !important;
    top: 10px !important;
    width: 106px !important;
    height: 106px !important;
  }

  #page4 .page4-overlap-coco-circle {
    left: 108px !important;
    top: 82px !important;
    width: 106px !important;
    height: 106px !important;
    max-width: calc(100% - 110px) !important;
  }

  #page4 .page4-overlap-info {
    left: 218px !important;
    right: 0 !important;
    top: 142px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.5em minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  #page4 .page4-overlap-info span {
    width: 3.5em !important;
    min-width: 3.5em !important;
    font-size: 9px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 17px !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 9px !important;
  }
}

/* =========================================================
   4ページ目：名前/スタイル/生年月日を「選んだキャスト」文字の横に配置
   - 右の縦枠へ干渉しない
   - 写真＋プロフィールボタンは中央寄りを維持
   - 既存の機能・デザインは変更しない
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-align: left !important;
}

#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(255px, 66vw, 355px) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 写真：中央寄り */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 4 !important;
  top: clamp(12px, 3vw, 22px) !important;
  left: clamp(42px, 13vw, 86px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(126px, 34vw, 188px) !important;
  height: clamp(126px, 34vw, 188px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* プロフィールボタン：写真の右下に重ねる */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(98px, 26vw, 150px) !important;
  left: clamp(140px, 36vw, 215px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(126px, 34vw, 188px) !important;
  height: clamp(126px, 34vw, 188px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(126px, 34vw, 188px), calc(100% - clamp(140px, 36vw, 215px) - 4px)) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 情報：選んだキャスト見出しの横に来る高さへ上げる */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 6 !important;
  left: clamp(270px, 61vw, 335px) !important;
  right: clamp(10px, 3vw, 24px) !important;
  top: clamp(58px, 15vw, 86px) !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #111 !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  text-align: left !important;
}

#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 4.2em minmax(0, 1fr) !important;
  align-items: baseline !important;
  justify-content: start !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 4.2em !important;
  min-width: 4.2em !important;
  font-weight: 900 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(21px, 5.2vw, 32px) !important;
  letter-spacing: -0.07em !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(10px, 2.55vw, 13px) !important;
}

/* スマホ：右枠に干渉しない範囲で見出し横へ配置 */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(236px, 66vw, 305px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: clamp(10px, 2.8vw, 18px) !important;
    left: clamp(30px, 9vw, 50px) !important;
    width: clamp(104px, 30vw, 146px) !important;
    height: clamp(104px, 30vw, 146px) !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: clamp(82px, 23vw, 116px) !important;
    left: clamp(110px, 30vw, 154px) !important;
    width: clamp(104px, 30vw, 146px) !important;
    height: clamp(104px, 30vw, 146px) !important;
    max-width: min(clamp(104px, 30vw, 146px), calc(100% - clamp(110px, 30vw, 154px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    left: clamp(222px, 60vw, 270px) !important;
    right: clamp(4px, 1.8vw, 9px) !important;
    top: clamp(48px, 14vw, 66px) !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.6em minmax(0, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 6px !important;
  }

  #page4 .page4-overlap-info span {
    width: 3.6em !important;
    min-width: 3.6em !important;
    font-size: clamp(8px, 2.25vw, 11px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(16px, 4.7vw, 23px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(8px, 2.25vw, 11px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 232px !important;
  }

  #page4 .page4-overlap-photo-circle {
    left: 26px !important;
    top: 10px !important;
    width: 102px !important;
    height: 102px !important;
  }

  #page4 .page4-overlap-coco-circle {
    left: 104px !important;
    top: 80px !important;
    width: 102px !important;
    height: 102px !important;
    max-width: calc(100% - 106px) !important;
  }

  #page4 .page4-overlap-info {
    left: 208px !important;
    right: 0 !important;
    top: 48px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.4em minmax(0, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 5px !important;
  }

  #page4 .page4-overlap-info span {
    width: 3.4em !important;
    min-width: 3.4em !important;
    font-size: 8px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 15px !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 8px !important;
  }
}

/* =========================================================
   4ページ目：指定配置 最終調整
   左上：キャスト写真
   写真右下：プロフィール「ココ」ボタン
   写真右の離れた位置：名前・スタイル・生年月日
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 8 !important;
}

#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(250px, 66vw, 360px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 左上：キャスト写真 */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 9 !important;
  top: clamp(90px, 23vw, 138px) !important;
  left: clamp(26px, 7.5vw, 48px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(120px, 31vw, 176px) !important;
  height: clamp(120px, 31vw, 176px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* キャスト写真の右下：プロフィール「ココ」ボタン */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 10 !important;
  top: clamp(168px, 43vw, 248px) !important;
  left: clamp(112px, 29vw, 166px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(120px, 31vw, 176px) !important;
  height: clamp(120px, 31vw, 176px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(120px, 31vw, 176px), calc(100% - clamp(112px, 29vw, 166px) - 4px)) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 写真の右側・離れた位置：名前/スタイル/生年月日 */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 20 !important;
  top: clamp(116px, 30vw, 172px) !important;
  left: clamp(270px, 61vw, 330px) !important;
  right: clamp(14px, 4.2vw, 28px) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #111 !important;
  text-align: left !important;
  transform: none !important;
}

/* ラベルと値は左揃え、右枠に干渉しない */
#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 4.1em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 4.1em !important;
  min-width: 4.1em !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  max-width: 100% !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(20px, 5vw, 32px) !important;
  letter-spacing: -0.06em !important;
  line-height: 1.04 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(10px, 2.6vw, 14px) !important;
}

/* スマホ表示 */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(236px, 66vw, 315px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: clamp(86px, 23vw, 126px) !important;
    left: clamp(18px, 5.5vw, 30px) !important;
    width: clamp(100px, 28vw, 140px) !important;
    height: clamp(100px, 28vw, 140px) !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: clamp(154px, 41vw, 218px) !important;
    left: clamp(86px, 24vw, 124px) !important;
    width: clamp(100px, 28vw, 140px) !important;
    height: clamp(100px, 28vw, 140px) !important;
    max-width: min(clamp(100px, 28vw, 140px), calc(100% - clamp(86px, 24vw, 124px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    top: clamp(104px, 28vw, 144px) !important;
    left: clamp(210px, 56vw, 258px) !important;
    right: clamp(6px, 2.5vw, 12px) !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.45em minmax(0, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 5px !important;
  }

  #page4 .page4-overlap-info span {
    width: 3.45em !important;
    min-width: 3.45em !important;
    font-size: clamp(8px, 2.15vw, 10px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(15px, 4.4vw, 22px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(8px, 2.15vw, 10px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-info {
    top: 104px !important;
    left: 202px !important;
    right: 4px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 3.25em minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #page4 .page4-overlap-info span,
  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 7.8px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 14px !important;
  }
}

/* =========================================================
   4ページ目：写真＋プロフィール「ココ」横並び重なり
   下段：名前・スタイル・生年月日
   ※既存HTML/JSは変更せずCSS上書きのみ
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 8 !important;
}

/* 配置全体の土台 */
#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(300px, 78vw, 430px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 上段左：キャスト写真 */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 9 !important;
  top: clamp(58px, 15vw, 92px) !important;
  left: clamp(48px, 14vw, 92px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(138px, 36vw, 205px) !important;
  height: clamp(138px, 36vw, 205px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* 上段右：プロフィール「ココ」ボタン
   写真と横並びにしつつ、中央部分を20〜30%重ねる */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 10 !important;
  top: clamp(58px, 15vw, 92px) !important;
  left: clamp(168px, 42vw, 252px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(138px, 36vw, 205px) !important;
  height: clamp(138px, 36vw, 205px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(138px, 36vw, 205px), calc(100% - clamp(168px, 42vw, 252px) - 6px)) !important;
  max-height: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

/* 円形画像を維持 */
#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 下段：名前・スタイル・生年月日 */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 20 !important;
  top: clamp(220px, 57vw, 318px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(78%, 370px) !important;
  max-width: 370px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #111 !important;
  text-align: left !important;
}

/* ラベルと値を左揃えで整列 */
#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 5em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 5em !important;
  min-width: 5em !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  max-width: 100% !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(24px, 6vw, 36px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(12px, 3vw, 16px) !important;
}

/* スマホ調整 */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(282px, 78vw, 350px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: clamp(54px, 15vw, 74px) !important;
    left: clamp(24px, 7vw, 42px) !important;
    width: clamp(112px, 32vw, 148px) !important;
    height: clamp(112px, 32vw, 148px) !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: clamp(54px, 15vw, 74px) !important;
    left: clamp(124px, 36vw, 170px) !important;
    width: clamp(112px, 32vw, 148px) !important;
    height: clamp(112px, 32vw, 148px) !important;
    max-width: min(clamp(112px, 32vw, 148px), calc(100% - clamp(124px, 36vw, 170px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    top: clamp(190px, 54vw, 248px) !important;
    width: min(82%, 320px) !important;
    max-width: 320px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.6em minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 7px !important;
  }

  #page4 .page4-overlap-info span {
    width: 4.6em !important;
    min-width: 4.6em !important;
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(20px, 5.4vw, 28px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 280px !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: 52px !important;
    left: 22px !important;
    width: 112px !important;
    height: 112px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: 52px !important;
    left: 118px !important;
    width: 112px !important;
    height: 112px !important;
    max-width: calc(100% - 120px) !important;
  }

  #page4 .page4-overlap-info {
    top: 186px !important;
    width: 84% !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.2em minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #page4 .page4-overlap-info span,
  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 10px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 19px !important;
  }
}

/* =========================================================
   4ページ目：全体を1.5cm上へ、写真＋ココボタンを一回り拡大
   - 写真とボタンは横並び・重なり維持
   - 名前/スタイル/生年月日はその下に配置
   - 既存HTML/JSは変更なし
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 8 !important;
}

#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(270px, 70vw, 390px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 写真：前回より1.5cm上＋一回り大きく */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 9 !important;
  top: calc(clamp(58px, 15vw, 92px) - 2cm) !important;
  left: clamp(38px, 11vw, 76px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(155px, 40vw, 225px) !important;
  height: clamp(155px, 40vw, 225px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 7px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* プロフィール「ココ」：前回より1.5cm上＋一回り大きく、写真と横並びで重ねる */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 10 !important;
  top: calc(clamp(58px, 15vw, 92px) - 2cm) !important;
  left: clamp(178px, 44vw, 270px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(155px, 40vw, 225px) !important;
  height: clamp(155px, 40vw, 225px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(155px, 40vw, 225px), calc(100% - clamp(178px, 44vw, 270px) - 6px)) !important;
  max-height: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

/* 円形画像を維持 */
#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 名前/スタイル/生年月日：全体に合わせて1.5cm上へ */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 20 !important;
  top: calc(clamp(220px, 57vw, 318px) - 2cm) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(78%, 380px) !important;
  max-width: 380px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #111 !important;
  text-align: left !important;
}

#page4 .page4-overlap-info .selected-cast-info-lines {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 5em minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 5em !important;
  min-width: 5em !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  max-width: 100% !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(24px, 6vw, 36px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(12px, 3vw, 16px) !important;
}

/* スマホ調整：上げすぎて上部画像に食い込まないよう控えめに上げる */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(260px, 72vw, 330px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: calc(clamp(54px, 15vw, 74px) - 1.15cm) !important;
    left: clamp(18px, 5vw, 34px) !important;
    width: clamp(126px, 35vw, 164px) !important;
    height: clamp(126px, 35vw, 164px) !important;
    padding: 6px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: calc(clamp(54px, 15vw, 74px) - 1.15cm) !important;
    left: clamp(132px, 38vw, 184px) !important;
    width: clamp(126px, 35vw, 164px) !important;
    height: clamp(126px, 35vw, 164px) !important;
    max-width: min(clamp(126px, 35vw, 164px), calc(100% - clamp(132px, 38vw, 184px) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    top: calc(clamp(190px, 54vw, 248px) - 1.15cm) !important;
    width: min(84%, 330px) !important;
    max-width: 330px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.6em minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 7px !important;
  }

  #page4 .page4-overlap-info span {
    width: 4.6em !important;
    min-width: 4.6em !important;
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(20px, 5.4vw, 28px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 260px !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: 14px !important;
    left: 16px !important;
    width: 124px !important;
    height: 124px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: 14px !important;
    left: 124px !important;
    width: 124px !important;
    height: 124px !important;
    max-width: calc(100% - 126px) !important;
  }

  #page4 .page4-overlap-info {
    top: 148px !important;
    width: 86% !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.2em minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #page4 .page4-overlap-info span,
  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 10px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 19px !important;
  }
}

/* =========================================================
   4ページ目：中央揃え＋1cm上げ＋円を一回り拡大＋間隔1cm
   - 写真と「プロフィールはココ」は横並び・重なり維持
   - 名前/スタイル/生年月日は下段で中央揃え
   - 写真/ボタン と 情報欄の間を約1cm空ける
========================================================= */

#page4 .selected-cast-profile.page4-overlap-profile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 8 !important;
}

#page4 .page4-overlap-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(280px, 72vw, 405px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 写真：中央寄せの左円。前回より1cm上＋一回り大きく */
#page4 .page4-overlap-photo-circle {
  position: absolute !important;
  z-index: 9 !important;
  top: calc(clamp(58px, 15vw, 92px) - 2cm) !important;
  left: calc(50% - clamp(135px, 35vw, 202px)) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(155px, 40vw, 225px) !important;
  height: clamp(155px, 40vw, 225px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 7px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at center, #fff8da 0%, #ffe8a5 48%, #b8860b 100%) !important;
  border: 4px solid #8a5a16 !important;
  box-shadow:
    0 0 0 3px rgba(255,246,190,.95),
    0 0 0 6px rgba(166,110,28,.55),
    0 8px 18px rgba(80,45,0,.25) !important;
  transform: none !important;
}

/* プロフィール「ココ」：中央寄せの右円。写真と横並びで20〜30%重ねる */
#page4 .page4-overlap-coco-circle {
  position: absolute !important;
  z-index: 10 !important;
  top: calc(clamp(58px, 15vw, 92px) - 2cm) !important;
  left: calc(50% - clamp(5px, 1.2vw, 8px)) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(155px, 40vw, 225px) !important;
  height: clamp(155px, 40vw, 225px) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: min(clamp(155px, 40vw, 225px), calc(100% - (50% - clamp(5px, 1.2vw, 8px)) - 4px)) !important;
  max-height: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

/* 円形画像維持 */
#page4 .page4-overlap-photo-circle img,
#page4 .page4-overlap-coco-circle img,
#page4 #selectedCastImage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#page4 .page4-overlap-photo-circle img,
#page4 #selectedCastImage {
  object-fit: cover !important;
  object-position: top center !important;
}

#page4 .page4-overlap-coco-circle img {
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 8px 14px rgba(80,45,0,.16)) !important;
}

/* 名前/スタイル/生年月日：下段中央。写真＋ボタンとの間隔を約1cm */
#page4 .page4-overlap-info {
  position: absolute !important;
  z-index: 20 !important;
  top: calc(
    (clamp(58px, 15vw, 92px) - 2cm)
    + clamp(155px, 40vw, 225px)
    + 1cm
  ) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(78%, 385px) !important;
  max-width: 385px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #111 !important;
  text-align: center !important;
}

#page4 .page4-overlap-info .selected-cast-info-lines {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info p {
  display: grid !important;
  grid-template-columns: 5em minmax(0, 1fr) !important;
  align-items: baseline !important;
  justify-content: start !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info span {
  display: inline-block !important;
  width: 5em !important;
  min-width: 5em !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#page4 .page4-overlap-info strong {
  min-width: 0 !important;
  max-width: 100% !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

#page4 .page4-overlap-info #castProfileName {
  font-size: clamp(24px, 6vw, 36px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

#page4 .page4-overlap-info #castProfileStyle,
#page4 .page4-overlap-info #castProfileBirthday,
#page4 .page4-overlap-info span {
  font-size: clamp(12px, 3vw, 16px) !important;
}

/* スマホ調整：中央揃えを維持しつつ、上げすぎを防止 */
@media (max-width: 520px) {
  #page4 .page4-overlap-stage {
    min-height: clamp(270px, 75vw, 345px) !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: calc(clamp(54px, 15vw, 74px) - 0.75cm) !important;
    left: calc(50% - clamp(112px, 31vw, 150px)) !important;
    width: clamp(126px, 35vw, 164px) !important;
    height: clamp(126px, 35vw, 164px) !important;
    padding: 6px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: calc(clamp(54px, 15vw, 74px) - 0.75cm) !important;
    left: calc(50% - clamp(4px, 1vw, 6px)) !important;
    width: clamp(126px, 35vw, 164px) !important;
    height: clamp(126px, 35vw, 164px) !important;
    max-width: min(clamp(126px, 35vw, 164px), calc(100% - (50% - clamp(4px, 1vw, 6px)) - 2px)) !important;
  }

  #page4 .page4-overlap-info {
    top: calc(
      (clamp(54px, 15vw, 74px) - 0.75cm)
      + clamp(126px, 35vw, 164px)
      + 1cm
    ) !important;
    width: min(84%, 335px) !important;
    max-width: 335px !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.6em minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 7px !important;
  }

  #page4 .page4-overlap-info span {
    width: 4.6em !important;
    min-width: 4.6em !important;
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: clamp(20px, 5.4vw, 28px) !important;
  }

  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: clamp(10px, 2.65vw, 13px) !important;
  }
}

@media (max-width: 380px) {
  #page4 .page4-overlap-stage {
    min-height: 270px !important;
  }

  #page4 .page4-overlap-photo-circle {
    top: 26px !important;
    left: calc(50% - 112px) !important;
    width: 126px !important;
    height: 126px !important;
  }

  #page4 .page4-overlap-coco-circle {
    top: 26px !important;
    left: calc(50% - 4px) !important;
    width: 126px !important;
    height: 126px !important;
    max-width: calc(100% - (50% - 4px) - 2px) !important;
  }

  #page4 .page4-overlap-info {
    top: calc(26px + 126px + 1cm) !important;
    width: 86% !important;
  }

  #page4 .page4-overlap-info p {
    grid-template-columns: 4.2em minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #page4 .page4-overlap-info span,
  #page4 .page4-overlap-info #castProfileStyle,
  #page4 .page4-overlap-info #castProfileBirthday {
    font-size: 10px !important;
  }

  #page4 .page4-overlap-info #castProfileName {
    font-size: 19px !important;
  }
}

/* =========================================================
   全スマホ共通：1ページ目 埋め込み動画の横幅崩れ防止
   - iPhone / Safari / Chrome の端末差を吸収
   - 左右の装飾枠内だけで動画を再生
   - 100vw系のはみ出し・動画の内在幅による押し広げを防止
========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.container,
.page-wrapper {
  width: 100% !important;
  max-width: min(600px, 100vw) !important;
  overflow-x: hidden !important;
}

#page1.page-wrapper {
  width: 100% !important;
  max-width: min(600px, 100vw) !important;
  overflow-x: hidden !important;
}

#page1 img,
#page1 video,
#page1 .page1-between-video {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#page1 .page1-between-video {
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  vertical-align: top !important;
}

#page1 .page1-between-video::-webkit-media-controls {
  max-width: 100% !important;
}

@media (max-width: 520px) {
  .page-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page-wrapper::before,
  .page-wrapper::after {
    width: 14px !important;
  }

  #page1 .page1-between-video {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 390px) {
  #page1.page-wrapper,
  #page1 .page1-between-video {
    max-width: 100% !important;
  }
}


/* =========================================================
   2026-05-04 FIX：1ページ目 埋め込み動画の横幅ズレ防止
   - 動画を専用ラッパー内に収める
   - iPhone / Safari / Chrome で動画の実寸幅に引っ張られないようにする
   - 左右装飾枠の内側からはみ出さないようにする
========================================================= */
#page1 {
  overflow-x: hidden !important;
}

#page1 .page1-video-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 0 !important;
  background: #000 !important;
}

#page1 .page1-video-wrapper .page1-between-video {
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  vertical-align: top !important;
  background: #000 !important;
}

@media (max-width: 520px) {
  #page1 .page1-video-wrapper,
  #page1 .page1-video-wrapper .page1-between-video {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   追加修正：ページ遷移時のフルスクリーン動画演出
========================================================= */
.transition-video-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: #000 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.transition-video-overlay .transition-video {
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: contain !important;
  background: #000 !important;
  display: block !important;
}


/* 2026-05-16 FIX：音声付き遷移動画の再生ボタン（ブラウザ制限時のみ表示） */
.transition-video-sound-button {
  position: absolute !important;
  left: 50% !important;
  bottom: 32px !important;
  transform: translateX(-50%) !important;
  z-index: 100000 !important;
  padding: 14px 22px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .72) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.transition-video-sound-button.hidden {
  display: none !important;
}