@charset "UTF-8";

/* pages/credit.css
 * 担当範囲はこのファイルだけで編集。414px基準・既存の縮小式を維持。
 * 色は 店舗側 presentation/theme.css。条件・優先度は表示維持のため残しています。
 */


:where(body[data-page="credit"]) #item_photos2:where(.ui-main *) {
  width: 100%;
}

@media screen and (max-width: 413px) {
  :where(body[data-page="credit"]) #item_photos2:where(.ui-main *) {
    width: 100%;
  }
}

:where(body[data-page="credit"]) .cardtion:where(.ui-main *) {
  width: 380px;
  padding: 10px;
  margin: 10px 0 0 5px;
  font-size: 12px;
  line-height: 17px;
}

:where(body[data-page="credit"]) .cardtion span:where(.ui-main *) {
  font-size: 14px;
}

:where(body[data-page="credit"]) #card:where(.ui-main *) {
  margin: 5px 0 0 0;
}

:where(body[data-page="credit"]) .card_com:where(.ui-main *) {
  font-size: 12px;
  padding: 10px;
  line-height: 18px;
  margin: 0 0 0 6px;
  border-left: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
  border-right: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
  border-bottom: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
}

:where(body[data-page="credit"]) .midashi_p:where(.ui-main *) {
  width: 400px;
  margin: 15px 0 0 6px;
  padding: 0;
}

:where(body[data-page="credit"]) .midashi_p p:where(.ui-main *) {
  font-size: 15px;
  letter-spacing: 1px;
}

:where(body[data-page="credit"]) .midashi_p p span:where(.ui-main *) {
  font-size: 12px;
  font-weight: bold;
}

@media screen and (max-width: 413px) {
  :where(body[data-page="credit"]) .cardtion:where(.ui-main *) {
    width: clamp(293.7198px, 91.7874vw, 380px);
    padding: clamp(7.7295px, 2.4155vw, 10px);
    margin: clamp(7.7295px, 2.4155vw, 10px) 0 0 clamp(3.8647px, 1.2077vw, 5px);
    font-size: clamp(10.8px, calc(6.7149px + 1.2766vw), 12px);
    color: var(--ui-sp-main-card-text-variant-4, var(--ui-sp-card-text-variant-4));
    border: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
    line-height: clamp(15.3px, calc(9.5128px + 1.8085vw), 17px);
  }

  :where(body[data-page="credit"]) .cardtion span:where(.ui-main *) {
    font-size: clamp(12.6px, calc(7.834px + 1.4894vw), 14px);
    color: var(--ui-sp-main-card-text-variant-5, var(--ui-sp-card-text-variant-5));
    border-bottom: 1px solid var(--ui-sp-main-card-border-variant-8, var(--ui-sp-card-border-variant-8));
  }

  :where(body[data-page="credit"]) #card:where(.ui-main *) {
    width: clamp(193.2367px, 60.3865vw, 250px);
    height: clamp(39.4203px, 12.3188vw, 51px);
    margin: clamp(3.8647px, 1.2077vw, 5px) 0 0 0;
  }

  :where(body[data-page="credit"]) .card_com:where(.ui-main *) {
    font-size: clamp(10.8px, calc(6.7149px + 1.2766vw), 12px);
    color: var(--ui-sp-main-card-text-variant-4, var(--ui-sp-card-text-variant-4));
    width: clamp(293.7198px, 91.7874vw, 380px);
    padding: clamp(7.7295px, 2.4155vw, 10px);
    line-height: clamp(16.2px, calc(10.0723px + 1.9149vw), 18px);
    margin: 0 0 0 clamp(4.6377px, 1.4493vw, 6px);
    background: var(--ui-sp-main-card-bg-variant-6, var(--ui-sp-card-bg-variant-6));
    border-left: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
    border-right: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
    border-bottom: 1px solid var(--ui-sp-main-card-border-variant-7, var(--ui-sp-card-border-variant-7));
  }

  :where(body[data-page="credit"]) .card_com span:where(.ui-main *) {
    color: var(--ui-sp-main-card-text-variant-6, var(--ui-sp-card-text-variant-6));
  }

  :where(body[data-page="credit"]) .midashi_p:where(.ui-main *) {
    width: clamp(309.1787px, 96.6184vw, 400px);
    height: clamp(15.4589px, 4.8309vw, 20px);
    border: 1px solid var(--ui-sp-main-heading-border-variant-8, var(--ui-sp-heading-border-variant-8));
    margin: clamp(11.5942px, 3.6232vw, 15px) 0 0 clamp(4.6377px, 1.4493vw, 6px);
    padding: 0;
    background: var(--ui-sp-main-heading-bg-variant-9, var(--ui-sp-heading-bg-variant-9));
  }

  :where(body[data-page="credit"]) .midashi_p p:where(.ui-main *) {
    font-size: clamp(13.5px, calc(8.3936px + 1.5957vw), 15px);
    color: var(--ui-sp-main-heading-text-variant-2, var(--ui-sp-heading-text-variant-2));
    line-height: clamp(20.7px, calc(12.8702px + 2.4468vw), 23px);
    letter-spacing: clamp(0.9px, calc(0.5596px + 0.1064vw), 1px);
    padding: 0 0 clamp(7.7295px, 2.4155vw, 10px) clamp(3.8647px, 1.2077vw, 5px);
    margin: 0;
  }

  :where(body[data-page="credit"]) .midashi_p p span:where(.ui-main *) {
    font-size: clamp(10.8px, calc(6.7149px + 1.2766vw), 12px);
    font-weight: bold;
  }
}

:where(body[data-page="credit"]) .midashi_p:where(.ui-main *) {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ui-sp-main-heading-border-variant-3, var(--ui-sp-heading-border-variant-3)) !important;
  border-left: 4px solid var(--ui-sp-main-heading-border-variant-2, var(--ui-sp-heading-border-variant-2)) !important;
  border-radius: 3px 3px 0 0 !important;
  background: var(--ui-sp-main-heading-bg, var(--ui-sp-heading-bg)) !important;
  box-shadow: 0 2px 6px var(--ui-sp-main-heading-shadow-variant-2, var(--ui-sp-heading-shadow-variant-2)) !important;
}

:where(body[data-page="credit"]) .midashi_p p:where(.ui-main *) {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1px 8px 0 !important;
  color: var(--ui-sp-main-heading-text-variant-2, var(--ui-sp-heading-text-variant-2)) !important;
  line-height: 1 !important;
}

:where(body[data-page="credit"]) .midashi_p p span:where(.ui-main *) {
  color: var(--ui-sp-main-heading-text-variant-6, var(--ui-sp-heading-text-variant-6)) !important;
}

:where(body[data-page="credit"]) .card_com:where(.ui-main *) {
  background: var(--ui-sp-main-card-bg-variant-4, var(--ui-sp-card-bg-variant-4)) !important;
  color: var(--ui-sp-main-card-text-variant-7, var(--ui-sp-card-text-variant-7)) !important;
  border-color: var(--ui-sp-main-card-border-variant-2, var(--ui-sp-card-border-variant-2)) !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 3px 8px var(--ui-sp-main-card-shadow-variant-3, var(--ui-sp-card-shadow-variant-3)) !important;
}

:where(body[data-page="credit"]) .card_com span:where(.ui-main *) {
  color: var(--ui-sp-main-card-text-variant-8, var(--ui-sp-card-text-variant-8)) !important;
  font-weight: 700 !important;
}

:where(body[data-page="credit"]) .cardtion:where(.ui-main *) {
  box-sizing: border-box !important;
  background: var(--ui-sp-main-card-bg-variant-7, var(--ui-sp-card-bg-variant-7)) !important;
  color: var(--ui-sp-main-card-text-variant-9, var(--ui-sp-card-text-variant-9)) !important;
  border: 1px solid var(--ui-sp-main-card-border-variant-2, var(--ui-sp-card-border-variant-2)) !important;
  border-left: 4px solid var(--ui-sp-main-card-border-variant-9, var(--ui-sp-card-border-variant-9)) !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 8px var(--ui-sp-main-card-shadow-variant-3, var(--ui-sp-card-shadow-variant-3)) !important;
}

:where(body[data-page="credit"]) .cardtion span:where(.ui-main *) {
  display: inline-block !important;
  color: var(--ui-sp-main-card-text, var(--ui-sp-card-text)) !important;
  border-bottom: 1px solid var(--ui-sp-main-card-border-variant-10, var(--ui-sp-card-border-variant-10)) !important;
  font-weight: 800 !important;
}

:where(body[data-page="credit"]) #card:where(.ui-main *) {
  border: 0 !important;
  background: var(--ui-sp-main-card-bg-variant-6, var(--ui-sp-card-bg-variant-6)) !important;
  border-radius: 3px !important;
}

@media screen and (max-width:413px) {
  :where(body[data-page="credit"]) .midashi_p:where(.ui-main *) {
    height: clamp(21.6425px,6.7633vw,28px) !important;
  }
}

:where(body[data-page="credit"]) .card_com:where(.ui-main *) {
  width: 400px !important;
  margin-left: 6px !important;
  box-sizing: border-box !important;
}

@media screen and (max-width:413px) {
  :where(body[data-page="credit"]) .card_com:where(.ui-main *) {
    width: clamp(309.1787px,96.6184vw,400px) !important;
    margin-left: clamp(4.6377px,1.4493vw,6px) !important;
  }
}

:where(body[data-page="credit"]) #card:where(.ui-main *) {
  width: 250px !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

@media screen and (max-width:413px) {
  :where(body[data-page="credit"]) #card:where(.ui-main *) {
    width: clamp(193.2367px,60.3865vw,250px) !important;
    height: auto !important;
  }
}

:where(body[data-page="credit"]) .line_q:where(.ui-main *) {
  width: 363px;
  height: 5px;
  margin: 0 0 0 5px;
  padding: 0;
  border-left: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  border-right: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  border-top: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  background: var(--ui-sp-main-base-bg-variant-41, var(--ui-sp-base-bg-variant-41));
}

:where(body[data-page="credit"]) .line_c:where(.ui-main *) {
  background: var(--ui-sp-main-base-bg-variant-41, var(--ui-sp-base-bg-variant-41));
  height: 20px;
  width: 363px;
  margin: 0 0 20px 5px;
  padding: 0;
  border-left: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  border-right: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  border-bottom: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
  position: relative;
  top: -17px;
}

@media screen and (max-width: 413px) {
  :where(body[data-page="credit"]) .line_q:where(.ui-main *) {
    width: clamp(280.5797px, 87.6812vw, 363px);
    height: clamp(3.8647px, 1.2077vw, 5px);
    margin: 0 0 0 clamp(3.8647px, 1.2077vw, 5px);
    padding: 0;
    border-left: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    border-right: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    border-top: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    background: var(--ui-sp-main-base-bg-variant-41, var(--ui-sp-base-bg-variant-41));
  }

  :where(body[data-page="credit"]) .line_c:where(.ui-main *) {
    background: var(--ui-sp-main-base-bg-variant-41, var(--ui-sp-base-bg-variant-41));
    height: clamp(15.4589px, 4.8309vw, 20px);
    width: clamp(280.5797px, 87.6812vw, 363px);
    margin: 0 0 clamp(15.4589px, 4.8309vw, 20px) clamp(3.8647px, 1.2077vw, 5px);
    padding: 0;
    border-left: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    border-right: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    border-bottom: 1px solid var(--ui-sp-main-base-border-variant-27, var(--ui-sp-base-border-variant-27));
    position: relative;
    top: clamp(-17px, -4.1063vw, -13.1401px);
  }
}

body:where([data-page="credit"]).natural-theme.natural-sp .midashi_p:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp .title:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp .titlebar:where(.ui-main *) {
  background: linear-gradient(100deg, var(--ui-sp-main-heading-bg-variant-6, var(--ui-sp-heading-bg-variant-6)) 0%, var(--ui-sp-main-heading-bg-variant-10, var(--ui-sp-heading-bg-variant-10)) 58%, var(--ui-sp-main-heading-bg-variant-8, var(--ui-sp-heading-bg-variant-8)) 100%) !important;
  border-color: var(--ui-sp-main-heading-border-variant-5, var(--ui-sp-heading-border-variant-5)) !important;
  color: var(--ui-sp-main-heading-text-variant-5, var(--ui-sp-heading-text-variant-5)) !important;
  box-shadow: inset 0 1px var(--ui-sp-main-heading-shadow-variant-3, var(--ui-sp-heading-shadow-variant-3)), 0 2px 5px var(--ui-sp-main-heading-shadow-variant-4, var(--ui-sp-heading-shadow-variant-4)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp .midashi_p p:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp .midashi_p p span:where(.ui-main *) {
  color: var(--ui-sp-main-heading-text-variant-5, var(--ui-sp-heading-text-variant-5)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp #movie:where(.ui-main *) {
  background-color: var(--ui-sp-main-video-bg-variant-6, var(--ui-sp-video-bg-variant-6)) !important;
  border-color: var(--ui-sp-main-video-border, var(--ui-sp-video-border)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp .girl_name:where(.ui-main *) {
  color: var(--ui-sp-main-profile-text-variant-12, var(--ui-sp-profile-text-variant-12)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp hr:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp th:where(.ui-main *) {
  border-color: var(--ui-sp-main-base-border-variant-28, var(--ui-sp-base-border-variant-28)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp th:where(.ui-main *) {
  background: var(--ui-sp-main-base-bg-variant-42, var(--ui-sp-base-bg-variant-42)) !important;
  color: var(--ui-sp-main-base-text-variant-5, var(--ui-sp-base-text-variant-5)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp input[type="submit"]:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp .btn:where(.ui-main *),
body:where([data-page="credit"]).natural-theme.natural-sp .button:where(.ui-main *) {
  background: linear-gradient(180deg, var(--ui-sp-main-button-bg, var(--ui-sp-button-bg)), var(--ui-sp-main-button-bg-variant-2, var(--ui-sp-button-bg-variant-2))) !important;
  border-color: var(--ui-sp-main-button-border, var(--ui-sp-button-border)) !important;
  color: var(--ui-sp-main-button-text-variant-4, var(--ui-sp-button-text-variant-4)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp #play li:where(.ui-main *) {
  background: var(--ui-sp-main-base-bg-variant-43, var(--ui-sp-base-bg-variant-43)) !important;
  border-color: var(--ui-sp-main-base-border-variant-29, var(--ui-sp-base-border-variant-29)) !important;
  color: var(--ui-sp-main-base-text-variant-25, var(--ui-sp-base-text-variant-25)) !important;
}

body:where([data-page="credit"]).natural-theme.natural-sp .midashi_p:where(.ui-main *) {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 23px;
}

body:where([data-page="credit"]).natural-theme.natural-sp .midashi_p > p:where(.ui-main *) {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.4;
}

:where(body[data-page="credit"]) #tab03 #kakuicon:where(.ui-main *) {
  display: none !important;
}

:where(body[data-page="credit"]) .natural-empty-message:where(.ui-main *) {
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 10px auto;
  padding: 16px 10px;
  border: 1px solid var(--ui-sp-main-message-border, var(--ui-sp-message-border));
  background: var(--ui-sp-main-message-bg, var(--ui-sp-message-bg));
  color: var(--ui-sp-main-message-text, var(--ui-sp-message-text));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

:where(body[data-page="credit"]) #newface_area .natural-empty-message:where(.ui-main *) {
  float: none !important;
  clear: both !important;
}

@media screen and (max-width:413px) {
  :where(body[data-page="credit"]) .natural-empty-message:where(.ui-main *) {
    width: calc(100% - clamp(15.4589px,4.8309vw,20px));
    margin: clamp(7.7295px,2.4155vw,10px) auto;
    padding: clamp(12.3671px,3.8647vw,16px) clamp(7.7295px,2.4155vw,10px);
    font-size: clamp(10.0483px,3.1401vw,13px);
  }
}