@charset "UTF-8";
:root {
  --textmain: rgba(24, 27, 53, 1);
  --textsub: rgba(126, 126, 126, 1);
  --white: rgba(255, 255, 255, 1);
  --bg-secondary: rgba(207, 216, 255, 1);
  --bg-main: rgba(244, 246, 250, 1);
  /*--button-primary: rgba(58, 80, 245, 1);
  --button-secondary: rgba(105, 133, 255, 1);*/
  --button-primary: #E85298;
  --button-secondary: #F2858E;
  --link-color-blue: rgba(6, 49, 205, 1);
  /*
  --chat-bg: rgba(221, 232, 255, 1);
  */
  --chat-bg: #FCE5F0;
  --action: rgba(252, 36, 79, 1);
  --error: rgba(249, 58, 107, 1);
  --placeholder: rgba(157, 157, 157, 1);
  --shimayellow: rgba(255, 225, 0, 1);
  --bgmain: rgba(244, 246, 250, 1);
  --color-font-black3a3a3a: rgba(58, 58, 58, 1);
  /*
  --b-primary: rgba(58, 80, 245, 1);
  */
  --b-primary:#E85298;
  --background-color:#F7F4ED;
  --action-base-font-family: "Noto Sans JP", Helvetica;
  --font-family: "Noto Sans JP", Helvetica;
  --base-font-style: normal;
  --amedium-font-size: 14px;
  --amedium-font-weight: 400;
  --action-base-font-weight: 700;
  --action-base-font-size: 16px;
  --action-base-letter-spacing: 0px;
  --action-base-line-height: 120.00000476837158%;
  --action-base-font-style: normal;
  --action-medium-font-family: "Noto Sans JP", Helvetica;
  --action-medium-font-weight: 700;
  --action-medium-font-size: 14px;
  --action-medium-letter-spacing: 0px;
  --action-medium-line-height: 120.00000476837158%;
  --action-medium-font-style: normal;
  --action-caption-font-family: "Noto Sans JP", Helvetica;
  --action-caption-font-weight: 400;
  --action-caption-font-size: 12px;
  --action-caption-letter-spacing: 0px;
  --action-caption-line-height: 129.99999523162842%;
  --action-caption-font-style: normal;
  --chat-base-font-family: "Noto Sans JP", Helvetica;
  --chat-base-font-weight: 700;
  --chat-base-font-size: 14px;
  --chat-base-letter-spacing: 0px;
  --chat-base-line-height: 129.99999523162842%;
  --chat-base-font-style: normal;
  --caption-font-family: "Noto Sans JP", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 12px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 129.99999523162842%;
  --caption-font-style: normal;
  --textfield-font-family: "Noto Sans JP", Helvetica;
  --textfield-font-weight: 400;
  --textfield-font-size: 16px;
  --textfield-letter-spacing: 0px;
  --textfield-line-height: 24px;
  --textfield-font-style: normal;
  --title-04-16-r-font-family: "Noto Sans JP", Helvetica;
  --title-04-16-r-font-weight: 400;
  --title-04-16-r-font-size: 16px;
  --title-04-16-r-letter-spacing: 0px;
  --title-04-16-r-line-height: 24px;
  --title-04-16-r-font-style: normal;
  --action-primary-m-font-family: "Noto Sans JP", Helvetica;
  --action-primary-m-font-weight: 700;
  --action-primary-m-font-size: 16px;
  --action-primary-m-letter-spacing: 0.64px;
  --action-primary-m-line-height: 150%;
  --action-primary-m-font-style: normal;
  --title-06-14-r-font-family: "Noto Sans JP", Helvetica;
  --title-06-14-r-font-weight: 400;
  --title-06-14-r-font-size: 14px;
  --title-06-14-r-letter-spacing: 0px;
  --title-06-14-r-line-height: 22px;
  --title-06-14-r-font-style: normal;
  --kotya-accent: rgba(255, 255, 0, 1);
  --primitive-color-color-white: rgba(255, 255, 255, 1);
  --color-ink-text-100: var(--color-alias-ink-alias-850);
  --color-mono-800: var(--color-alias-mono-alias-300);
  --color-stlike-red-10: rgba(249, 58, 107, 0.1);
  --color-function-primary-inverted: var(--color-alias-royalred-400);
  --color-action-secondary: var(--color-alias-royalred-100);
  --color-alias-ink-alias-100: rgba(237, 239, 244, 1);
  --color-alias-mono-alias-800: rgba(69, 69, 69, 1);
  --color-alias-ink-alias-850: rgba(24, 27, 53, 1);
  --color-alias-mono-alias-300: rgba(157, 157, 157, 1);
  --color-alias-blue-800: rgba(6, 49, 205, 1);
  --color-alias-royalblue-100: rgba(221, 232, 255, 1);
  --responsive-left-right-20-20-block-m: 20px;
  --color-alias-royal-blue-500: rgba(85, 105, 254, 1);
  --color-alias-royal-blue-400: rgba(105, 133, 255, 1);
  --common-radius-button-1000: 1000px;
  --color-alias-royalred-100: #FCE5F0;
  --color-alias-royalred-400: #F2858E;
  --color-alias-red-800: #E85298;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-color-mode="stlike-dark">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-color-mode="stlike-dark"] {
  --color-ink-text-100: var(--color-alias-ink-alias-100);
  --color-mono-800: var(--color-alias-mono-alias-800);
  --color-stlike-red-10: rgba(255, 105, 131, 0.1);
  --color-function-primary-inverted: var(--color-alias-royal-blue-500);
  --color-action-secondary: var(--color-alias-blue-800);
}

[data-color-mode="stlike-bright"] {
  --color-ink-text-100: var(--color-alias-ink-alias-850);
  --color-mono-800: var(--color-alias-mono-alias-300);
  --color-stlike-red-10: rgba(249, 58, 107, 0.1);
  --color-function-primary-inverted: var(--color-alias-royal-blue-400);
  --color-action-secondary: var(--color-alias-royalblue-100);
}

[data-color-mode="everes"] {
  --color-ink-text-100: var(--color-alias-ink-alias-850);
  --color-mono-800: var(--color-alias-mono-alias-300);
  --color-stlike-red-10: rgba(255, 105, 131, 0.1);
  --color-function-primary-inverted: var(--color-alias-royal-blue-400);
  --color-action-secondary: var(--color-alias-royalblue-100);
}

[data-color-mode="study-cast"] {
  --color-ink-text-100: var(--color-alias-ink-alias-850);
  --color-mono-800: var(--color-alias-mono-alias-300);
  --color-stlike-red-10: rgba(255, 105, 131, 0.1);
  --color-function-primary-inverted: var(--color-alias-royal-blue-400);
}