@charset "UTF-8";

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


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

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

:where(body[data-page="event"]) .eventbg:where(.ui-main *) {
  background: var(--ui-sp-base-bg-variant-4);
}

:where(body[data-page="event"]) #event_box:where(.ui-main *) {
  width: 380px;
  margin: 0 0 0 5px;
  padding: 15px 0 0 0;
}

:where(body[data-page="event"]) #under_br2:where(.ui-main *) {
  width: 380px;
  margin: 0 0 0 12px;
  padding: 0;
  box-shadow: 1px 1px 2px 1px var(--ui-sp-base-shadow-variant-14);
}

:where(body[data-page="event"]) .event_un_box:where(.ui-main *) {
  width: 378px;
  border: 1px solid var(--ui-sp-event-period-border, var(--ui-sp-base-border-variant-30));
  margin: 10px 0 0 12px;
}

:where(body[data-page="event"]) .box_bg:where(.ui-main *) {
  height: 20px;
  margin: 0;
  padding: 0;
}

:where(body[data-page="event"]) .box_bg span:where(.ui-main *) {
  font-size: 13px;
  font-weight: bold;
  color: var(--ui-sp-base-text-variant-3);
  position: relative;
  top: 10px;
}

:where(body[data-page="event"]) .bunn:where(.ui-main *) {
  font-size: 14px;
  color: var(--ui-sp-base-text-variant-26);
  margin: 0;
  padding: 10px 10px;
  line-height: 20px;
  background: var(--ui-sp-base-bg);
}

@media screen and (max-width: 413px) {
  :where(body[data-page="event"]) .eventbg:where(.ui-main *) {
    background: var(--ui-sp-base-bg-variant-4);
  }

  :where(body[data-page="event"]) #event_box:where(.ui-main *) {
    width: clamp(293.7198px, 91.7874vw, 380px);
    margin: 0 0 0 clamp(3.8647px, 1.2077vw, 5px);
    padding: clamp(11.5942px, 3.6232vw, 15px) 0 0 0;
  }

  :where(body[data-page="event"]) #under_br2:where(.ui-main *) {
    width: clamp(293.7198px, 91.7874vw, 380px);
    margin: 0 0 0 clamp(9.2754px, 2.8986vw, 12px);
    padding: 0;
    box-shadow: 1px 1px 2px 1px var(--ui-sp-base-shadow-variant-14);
  }

  :where(body[data-page="event"]) .event_un_box:where(.ui-main *) {
    width: clamp(292.1739px, 91.3043vw, 378px);
    margin: clamp(7.7295px, 2.4155vw, 10px) 0 0 clamp(9.2754px, 2.8986vw, 12px);
  }

  :where(body[data-page="event"]) .box_bg:where(.ui-main *) {
      height: clamp(15.4589px, 4.8309vw, 20px);
    margin: 0;
    padding: 0;
  }

  :where(body[data-page="event"]) .box_bg span:where(.ui-main *) {
    font-size: clamp(11.7px, calc(7.2745px + 1.383vw), 13px);
    font-weight: bold;
    color: var(--ui-sp-base-text-variant-3);
    position: relative;
    top: clamp(7.7295px, 2.4155vw, 10px);
  }

  :where(body[data-page="event"]) .bunn:where(.ui-main *) {
    font-size: clamp(10.8213px, 3.3816vw, 14px);
    color: var(--ui-sp-base-text-variant-26);
    margin: 0;
    padding: clamp(7.7295px, 2.4155vw, 10px) clamp(7.7295px, 2.4155vw, 10px);
    line-height: clamp(15.4589px, 4.8309vw, 20px);
    background: var(--ui-sp-base-bg);
  }
}

:where(body[data-page="event"]) .event-period-label:where(.ui-main *) {
  font-weight: 700;
  margin-right: 4px;
}

@media screen and (max-width:413px) {
  :where(body[data-page="event"]) .event-period-label:where(.ui-main *) {
    margin-right: clamp(3.0918px,.9662vw,4px);
  }
}

body:where([data-page="event"]).natural-theme.natural-sp .eventbg #event_box:where(.ui-main *) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

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

:where(body[data-page="event"]) .line_c:where(.ui-main *) {
  background: 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-base-border-variant-27);
  border-right: 1px solid var(--ui-sp-base-border-variant-27);
  border-bottom: 1px solid var(--ui-sp-base-border-variant-27);
  position: relative;
  top: -17px;
}

@media screen and (max-width: 413px) {
  :where(body[data-page="event"]) .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-base-border-variant-27);
    border-right: 1px solid var(--ui-sp-base-border-variant-27);
    border-top: 1px solid var(--ui-sp-base-border-variant-27);
    background: var(--ui-sp-base-bg-variant-41);
  }

  :where(body[data-page="event"]) .line_c:where(.ui-main *) {
    background: 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-base-border-variant-27);
    border-right: 1px solid var(--ui-sp-base-border-variant-27);
    border-bottom: 1px solid var(--ui-sp-base-border-variant-27);
    position: relative;
    top: clamp(-17px, -4.1063vw, -13.1401px);
  }
}

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

body:where([data-page="event"]).natural-theme.natural-sp .box_bg:where(.ui-main *) {
  background: var(--ui-sp-event-period-background, linear-gradient(100deg, var(--ui-sp-base-bg-variant-33) 0%, var(--ui-sp-base-bg-variant-34) 58%, var(--ui-sp-base-bg-variant-35) 100%)) !important;
  border-color: var(--ui-sp-base-border-variant-4) !important;
  box-shadow: inset 0 1px var(--ui-sp-base-shadow-variant-11), 0 2px 5px var(--ui-sp-base-shadow-variant-12) !important;
}

body:where([data-page="event"]).natural-theme.natural-sp .box_bg:where(.ui-main *),
body:where([data-page="event"]).natural-theme.natural-sp .box_bg span:where(.ui-main *) {
  color: var(--ui-sp-event-period-foreground, var(--ui-sp-base-text-variant-5)) !important;
}

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

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

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

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

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

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

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

:where(body[data-page="event"]) .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-message-border);
  background: var(--ui-sp-message-bg);
  color: var(--ui-sp-message-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

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

@media screen and (max-width:413px) {
  :where(body[data-page="event"]) .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);
  }
}

:where(body[data-page="event"]) .ui-event-video:where(.ui-main *) {
  display: block !important;
  margin-bottom: 15px !important;
}