@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/**
 * A (more) Modern CSS Reset
 * https://piccalil.li/blog/a-more-modern-css-reset/
 */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  /* text-wrap: balance; */
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**
 * Document settings
 */

body {
  background: #FFFFFF;
  color: #000000;
  font: normal 400 14px "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  line-height: 1.4;
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeSpeed;
  min-height: 100dvh;

  /* Footer下部固定用に追加 */
  display: flex;
  flex-direction: column;
}

main {
  /* Footer下部固定用に追加 */
  flex: 1;
}

b,
strong,
.bold {
  font-weight: 700;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

pre {
  white-space: pre;
  overflow-x: auto;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.25em;
}

a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: #2A46DC;
  text-underline-offset: 3px;
}

a:not([class]) {
  color: #2A46DC;
  text-decoration-line: underline;
}

a:hover {
  text-decoration-style: dotted;
}

:target {
  scroll-margin-block: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  background: #FCFCFC;
  border: 1px solid #BEBEBE;
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: 15px;
  line-height: inherit;
  padding: 11px 15px;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: inherit;
  border-color: #000000;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="time"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
textarea:disabled {
  background: none;
  border: 0;
  padding: 0;
  opacity: 1;
}

input[type="color"] {
  padding: 5px;
  height: 40px;
}

input[type="email"],
input[type="url"] {
  direction: ltr;
}

select {
  border: 1px solid #BEBEBE;
  box-sizing: border-box;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 15px;
  line-height: inherit;
  padding: 11px 25px 11px 15px;
  background: #FCFCFC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='7' fill='none'><path d='M0.5 0.5L4.5 6L8.5 0.5' stroke='black' stroke-linejoin='round'/></svg>") no-repeat;
  background-position: right 14px top 50%;
  width: 100%;
}

select:focus {
  border-color: #000000;
}

::placeholder {
  color: #B7B7B7;
}

/*
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {

  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #FFFFFF;
    border: 1px solid #000000;
    position: relative;
    width: 24px;
    height: 24px;
  }

  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled {
    opacity: 0.7;
  }

  input[type="checkbox"] {
    border-radius: 0;
    margin-left: 0;
  }

  input[type="checkbox"]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 7px;
    top: 3px;
    position: absolute;
    width: 9px;
    height: 12px;
    border: 2px solid #FFFFFF;
    border-top: 0;
    border-left: 0;
    transform: rotate(40deg);
  }

  input[type="checkbox"]:checked {
    background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
    border-color: transparent;
  }

  input[type="checkbox"]:checked:after {
    opacity: 1;
  }

  input[type="checkbox"].checkbox_color__creator:checked {
    background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  }

  input[type="radio"] {
    border-radius: 50%;
  }

  input[type="radio"]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
    transform: translate(-50%, -50%);
  }

  input[type="radio"]:checked {
    border-width: 2px;
    border-color: #FE2688;
  }

  input[type="radio"]:checked:after {
    opacity: 1;
  }

  input[type="radio"].radio_color__creator:after {
    background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  }

  input[type="radio"].radio_color__creator:checked {
    border-color: #48E8CE;
  }

}

input[type="checkbox"]+label,
input[type="radio"]+label {
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  padding: 7px 10px 0 3px;
}

.button,
button,
input[type="submit"],
input[type="reset"] {
  background: linear-gradient(90deg, #FE7D4E 0%, #FE1B8F 100%);
  border: none;
  border-radius: 50px;
  color: #FFFFFF;
  display: block;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  padding: 13px 10px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.button:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);
  cursor: inherit;
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

ul[role="list"],
ol[role='list'] {
  padding-inline-start: 0;
}

table {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse;
}

table th {
  font-weight: 700;
}

table td,
table th {
  padding: 10px;
  border: 1px solid;
}

hr {
  border-bottom: none;
  border-top: 1px solid #DDDDDD;
}

/**
 * Header
 */

.header {
  background: #FFFFFF;
  box-shadow: 0px 10px 10px -11px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}

.header_inner {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 40px);
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
}

.header_logo {
  background: center / contain no-repeat url(../img/header_logo.svg);
  width: 77px;
  height: 0;
  padding-top: 26px;
  overflow: hidden;
  display: block;
}

.header_navigation__primary {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 83px;
  background: #FFFFFF;
  box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(13.5914px);
}

.header_navigation__primary > ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-top: 17px;
  display: flex;
  justify-content: center;
}

.header_navigation__primary > ul > li {
  font-size: clamp(0.5rem, -0.167rem + 1.39vw, 0.875rem);
  padding: 0 15px;
  position: relative;
  text-align: center;
}

.header_navigation__primary > ul > li > a {
  text-decoration: none;
}

.header_navigation__primary > ul > li > a::before {
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 2px;
  width: 32px;
  height: 20px;
}

.header_navigation__primary > ul > li > a.header_navigation__home::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.833 16.1703H4.16634C3.70611 16.1703 3.33301 15.8159 3.33301 15.3787V8.25368H0.833008L9.43909 0.821117C9.75692 0.546607 10.2424 0.546607 10.5603 0.821117L19.1663 8.25368H16.6663V15.3787C16.6663 15.8159 16.2933 16.1703 15.833 16.1703ZM4.99967 14.587H14.9997V6.79499L9.99967 2.47681L4.99967 6.79499V14.587ZM6.66634 11.4203H13.333V13.0037H6.66634V11.4203Z" fill="black"/></svg>');
  background-size: 20px auto;
}

.header_navigation__primary > ul > li > a.header_navigation__comics::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6429 16.9964C16.2978 16.9964 17.6393 15.6085 17.6393 13.8964C17.6393 12.1843 16.2978 10.7964 14.6429 10.7964C12.988 10.7964 11.6465 12.1843 11.6465 13.8964C11.6465 15.6085 12.988 16.9964 14.6429 16.9964Z" stroke="black" stroke-width="1.5"/><path d="M17.6738 15.6304L19.7052 17.0314" stroke="black" stroke-width="1.5"/><path d="M0.530273 8.63678L14.0447 5.50967V1.09424H0.530273V8.63678Z" stroke="black" stroke-width="1.5"/><path d="M0.530273 16.3535V11.1256L6.89052 9.57812V16.3286L0.530273 16.3535Z" stroke="black" stroke-width="1.5"/><path d="M14.045 9.48591V7.91504L9.12402 8.98668V16.3557H10.8466" stroke="black" stroke-width="1.5"/></svg>');
  background-size: 20px auto;
}

.header_navigation__primary > ul > li > a.header_navigation__creator::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.59443 9.86238C11.1244 9.86238 12.3647 8.61825 12.3647 7.08353C12.3647 5.54882 11.1244 4.30469 9.59443 4.30469C8.06449 4.30469 6.82422 5.54882 6.82422 7.08353C6.82422 8.61825 8.06449 9.86238 9.59443 9.86238Z" stroke="black" stroke-width="1.5"/><path d="M9.59411 17.0549C14.004 17.0549 17.5789 13.4688 17.5789 9.04526C17.5789 4.62167 14.004 1.03564 9.59411 1.03564C5.18426 1.03564 1.60938 4.62167 1.60938 9.04526C1.60938 13.4688 5.18426 17.0549 9.59411 17.0549Z" stroke="black" stroke-width="1.5"/><path d="M17.0898 13.2954L21.0007 15.9108" stroke="black" stroke-width="1.5" stroke-linecap="round"/><path d="M5.61133 15.5158C5.61133 15.5158 6.14602 11.7202 9.6769 11.7202C13.2078 11.7202 13.5229 15.5158 13.5229 15.5158" stroke="black" stroke-width="1.5"/></svg>');
  background-size: 22px auto;
}

.header_navigation__primary > ul > li > a.header_navigation__matching::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="34" height="20" viewBox="0 0 34 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.88434 10.4953C8.80524 10.4953 10.3624 9.0005 10.3624 7.15658C10.3624 5.31266 8.80524 3.81787 6.88434 3.81787C4.96344 3.81787 3.40625 5.31266 3.40625 7.15658C3.40625 9.0005 4.96344 10.4953 6.88434 10.4953Z" stroke="black" stroke-width="1.5"/><path d="M14.6582 3.80444L12.2031 1.89941" stroke="black" stroke-width="1.5" stroke-linecap="round"/><path d="M17.1133 3.80442V0.680176" stroke="black" stroke-width="1.5" stroke-linecap="round"/><path d="M19.5684 3.80444L22.0235 1.89941" stroke="black" stroke-width="1.5" stroke-linecap="round"/><path d="M0.900652 19.076C0.726339 12.7026 5.03967 12.7726 5.03967 12.7726C5.03967 12.7726 7.73159 12.8079 8.54014 12.7726C9.21267 12.6344 9.83253 12.3222 10.3335 11.8699L14.5197 7.66001C14.5197 7.66001 15.6276 6.84693 16.5049 7.49189C16.7512 7.71246 16.918 8.00252 16.9812 8.32012C17.0445 8.63773 17.0007 8.96642 16.8565 9.25865L13.03 13.0994L10.8858 15.3445V19.076" stroke="black" stroke-width="1.5"/><path d="M27.3433 10.4953C29.2642 10.4953 30.8214 9.0005 30.8214 7.15658C30.8214 5.31266 29.2642 3.81787 27.3433 3.81787C25.4224 3.81787 23.8652 5.31266 23.8652 7.15658C23.8652 9.0005 25.4224 10.4953 27.3433 10.4953Z" stroke="black" stroke-width="1.5"/><path d="M32.9412 19.076C33.1122 12.7026 28.8493 12.7726 28.8493 12.7726C28.8493 12.7726 26.1876 12.8079 25.388 12.7726C24.7217 12.6338 24.1081 12.3215 23.6146 11.8699L19.4764 7.66001C19.4764 7.66001 18.3794 6.84693 17.512 7.49189C17.268 7.71401 17.1029 8.00422 17.0404 8.32135C16.978 8.63847 17.0217 8.96641 17.1643 9.25865L20.9469 13.0994L23.0664 15.3445V19.076" stroke="black" stroke-width="1.5"/></svg>');
  background-size: 33px auto;
}

.header_navigation__primary > ul > li > a.header_navigation__message::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.1649 14.1636L0.416992 15.0454L1.24986 11.077C0.718346 10.0246 0.416992 8.82228 0.416992 7.54541C0.416992 3.40327 3.58831 0.0454102 7.50033 0.0454102C11.4123 0.0454102 14.5837 3.40327 14.5837 7.54541C14.5837 11.6875 11.4123 15.0454 7.50033 15.0454C6.29439 15.0454 5.15886 14.7264 4.1649 14.1636ZM4.37002 12.5787L4.83294 12.8408C5.64625 13.3013 6.55505 13.5454 7.50033 13.5454C10.63 13.5454 13.167 10.8591 13.167 7.54541C13.167 4.2317 10.63 1.54541 7.50033 1.54541C4.37071 1.54541 1.83366 4.2317 1.83366 7.54541C1.83366 8.54628 2.06421 9.50853 2.49913 10.3697L2.74667 10.8598L2.28286 13.0698L4.37002 12.5787Z" fill="black"/></svg>');
  background-size: 15px auto;
}

.header_navigation__primary > ul > li > a.header_navigation__howto::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15.0454C3.85786 15.0454 0.5 11.6875 0.5 7.54541C0.5 3.40327 3.85786 0.0454102 8 0.0454102C12.1421 0.0454102 15.5 3.40327 15.5 7.54541C15.5 11.6875 12.1421 15.0454 8 15.0454ZM8 13.5454C11.3137 13.5454 14 10.8591 14 7.54541C14 4.2317 11.3137 1.54541 8 1.54541C4.68629 1.54541 2 4.2317 2 7.54541C2 10.8591 4.68629 13.5454 8 13.5454ZM7.25 9.79541H8.75V11.2954H7.25V9.79541ZM8.75 8.56174V9.04541H7.25V7.92041C7.25 7.50619 7.58577 7.17041 8 7.17041C8.6213 7.17041 9.125 6.66671 9.125 6.04541C9.125 5.42409 8.6213 4.92041 8 4.92041C7.45423 4.92041 6.9992 5.30908 6.8966 5.82474L5.42548 5.53051C5.66478 4.3273 6.7265 3.42041 8 3.42041C9.44975 3.42041 10.625 4.59566 10.625 6.04541C10.625 7.23454 9.83428 8.23901 8.75 8.56174Z" fill="black"/></svg>');
  background-size: 16px auto;
}

.header_navigation__primary .badge {
  background: #FC4848;
  border-radius: 100%;
  color: #FFFFFF;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 0;
  right: 10px;
}

.header_navigation__secondary {
  margin-left: auto;
}

.header_navigation__secondary > a {
  display: inline-block;
  font-weight: 700;
  margin-left: 17px;
  text-decoration: none;
}

.header_navigation__secondary > .header_navigation__signup {
  background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
  border-radius: 50px;
  font-size: clamp(0.875rem, 0.653rem + 0.46vw, 1rem);
  color: #FFFFFF;
  padding: 5px 20px;
}

.header_navigation__secondary > .header_navigation__mypage {
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 14px;
  background: center / contain no-repeat url('../img/header_icon_mypage.svg');
  width: 13px;
  height: 0;
  padding-top: 19px;
  overflow: hidden;
  display: inline-block;
}

.header_heading {
  margin-block-start: 0;
  font-size: 18px;
  line-height: 1.4;
  width: calc(100% - 152px);
  text-align: center;
}

.header_heading__mypage {
  width: calc(100% - 24px);
  flex: 1;
}

.header_return {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.292152 11.2128C-0.0973839 10.8188 -0.0973839 10.1822 0.292152 9.78722L9.53714 0.427512C10.0995 -0.142504 11.0144 -0.142504 11.5777 0.427512C12.14 0.997527 12.14 1.92265 11.5777 2.49267L3.66913 10.5005L11.5777 18.5063C12.14 19.0774 12.14 20.0025 11.5777 20.5725C11.0144 21.1425 10.0995 21.1425 9.53714 20.5725L0.292152 11.2128Z" fill="black"/></svg>');
  width: 12px;
  height: 0;
  padding-top: 21px;
  overflow: hidden;
  display: inline-block;
}

/**
 * Footer
 */

.footer {
  background: #1B1B1B;
  padding-bottom: 83px;
}

.footer_inner {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 0;
}

.footer_navigation {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer_navigation > li {
  font-size: 12px;
  color: #FFFFFF;
  padding: 0 10px;
  margin: 4px 0;
}

.footer_navigation > li:not(:first-child) {
  border-left: 1px solid #595959;
}

.footer_navigation > li > a {
  color: inherit;
  text-decoration: none;
}

.footer_copyright {
  font-size: 10px;
  color: #9F9F9F;
  margin-top: 5px;
  text-align: center;
}

/**
 * Main Breadcrumb
 */

.main_breadcrumb {
  display: none;
}

/**
 * Main Navigation
 */

.main_navigation__secondary {
  display: none;
}

/**
 * Main Contents
 */

.main_container {
  margin-right: auto;
  margin-left: auto;
  width: calc(100% - 40px);
  padding-top: 16px;
}

.main_container_maxw__sm {
  max-width: 1100px;
}

.main_container_maxw__md {
  max-width: 1140px;
}

.main_container__heading {
  margin-top: 25px;
}

.main_container__heading_2 {
  margin-top: 25px;
  margin-bottom: 20px;
}

/* View styles */

.view_sp {
  display: block;
}

.view_pc {
  display: none;
}

/* Padding styles */

.pt_0 {
  padding-top: 0 !important;
}

.pb_0 {
  padding-bottom: 0 !important;
}

.pl_0 {
  padding-left: 0 !important;
}

.pl_10 {
  padding-left: 10px !important;
}

.pl_20 {
  padding-left: 20px !important;
}

.pr_0 {
  padding-right: 0 !important;
}

/* Margin styles */

.mt_0 {
  margin-top: 0 !important;
}

.mt_10 {
  margin-top: 10px !important;
}

.mt_20 {
  margin-top: 20px !important;
}

.mt_30 {
  margin-top: 30px !important;
}

.mt_40 {
  margin-top: 40px !important;
}

.mt_50 {
  margin-top: 50px !important;
}

.mb_0 {
  margin-bottom: 0 !important;
}

.mb_10 {
  margin-bottom: 10px !important;
}

.mb_20 {
  margin-bottom: 20px !important;
}

.mb_30 {
  margin-bottom: 30px !important;
}

.mb_40 {
  margin-bottom: 40px !important;
}

.mb_50 {
  margin-bottom: 50px !important;
}

.ml_0 {
  margin-left: 0 !important;
}

.mr_0 {
  margin-right: 0 !important;
}

/* gap styles */

.gap_10 {
  gap: 10px !important; 
}

/* Heading styles */

.heading_1 {
  /* min768:18px max1200:23px */
  font-size: clamp(1.125rem, 0.569rem + 1.16vw, 1.438rem);
}

.heading_2 {
  /* min768:23px max1200:20px */
  font-size: clamp(1.25rem, 0.917rem + 0.69vw, 1.438rem);
}

.heading_3 {
  font-size: 18px;
}

.heading_4 {
  /* min768:16px max1200:20px */
  font-size: clamp(1rem, 0.556rem + 0.93vw, 1.25rem);
}

.heading_5 {
  /* min768:15px max1200:16px */
  font-size: clamp(0.938rem, 0.826rem + 0.23vw, 1rem);
}

/* Text Align styles */

.text_left {
  text-align: left;
}

.text_right {
  text-align: right;
}

.text_center {
  text-align: center;
}

/* Color styles */

.bg_gray {
  background: #B2B2B2 !important;
}

/* Form styles */

.fieldset {
  background: #FFFFFF;
  border: 0;
  padding: 0;
  max-width: 480px;
  margin: 0 auto;
}

.fieldset_maxw_lg {
  max-width: 580px;
}

.fieldset > .form_item:not(:first-child) {
  margin-top: 20px;
}

.form_item {
  margin-bottom: 20px;
}

.form_label {
  font-size: 16px;
  margin-bottom: 6px;
}

.form_field__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.form_field__group_flex {
  display: flex;
  align-items: center;
  gap: 20px;
}

.form_field > p {
  margin-top: 5px;
}

.form_field__radio {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  padding: 11px 4px;
  margin-top: 10px;
}

.form_field__checkbox {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  padding: 11px 8px;
  margin-top: 10px;
}

.form_field__checkbox input[type="checkbox"] {
  margin-right: 8px;
}

.form_description {
  background: #F8F8F8;
  border: 1px solid #DCDCDC;
  font-size: 12px;
  line-height: 1.3;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.form_scroll {
  background: #FFFFFF;
  border: 1px solid #000000;
  padding: 13px 20px;
  margin-bottom: 10px;
  height: 150px;
  overflow-y: auto;
}

.form_scroll__title {
  font-size: 16px;
}

.asterisk {
  color: #E00000;
}

input[type="text"].error_field,
input[type="email"].error_field,
input[type="url"].error_field,
input[type="password"].error_field,
input[type="search"].error_field,
input[type="number"].error_field,
input[type="tel"].error_field,
input[type="date"].error_field,
input[type="month"].error_field,
input[type="week"].error_field,
input[type="time"].error_field,
input[type="datetime"].error_field,
input[type="datetime-local"].error_field,
input[type="color"].error_field,
textarea.error_field {
  border-width: 2px;
  border-color: #FF531C;
}

.error_text {
  color: #FF531C;
}

.button_group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.button_bg__gray {
  background: #B2B2B2;
}

.button_bg__creator {
  background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
}

.button_bg__reader {
  background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
}

.button_bg__business {
  background: linear-gradient(90deg, #F8F53B 0%, #FFA93D 100%);
}

.button_sm {
  display: inline-block;
  width: auto;
  padding: 8px 20px;
  white-space: nowrap;
}

.button_maxw__sm {
  max-width: 165px;
}

.button_maxw__md {
  max-width: 230px;
}

.link_group {
  margin-top: 25px;
  margin-bottom: 25px;
  text-align: center;
}

.link_group > *:not(:first-child) {
  margin-top: 20px;
}

/* Tab styles */

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px -10px;
}

.tab > li {
  padding: 10px;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab > li:not(.is_active) .button {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  color: #AAAAAA;
  font-weight: 700;
}

.js_tab__content:not(.is_show) {
  display: none;
}

/* confirm styles */

.confirm {
  background: rgba(0, 0, 0, 0.65);
  position: fixed;
  top: 0;
	left: 0;
	width: 100%;
  height: 100%;
  z-index: 100;
  /* display: none; */
}

.confirm_window {
  background: #FFFFFF;
  border-radius: 10px;
  position: fixed;
  width: 90%;
  max-width: 333px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

.confirm_close {
  background: center / contain no-repeat url(../img/confirm_icon_close.svg);
  display: inline-block;
  width: 37px;
  height: 0;
  padding-top: 37px;
  overflow: hidden;
  position: absolute;
  top: -10px;
  right: -13px;
}

.confirm_inner {
  padding: 35px 20px 20px;
}

.confirm_inner p {
  font-size: 18px;
}

.confirm_button_group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* alert styles */

.alert {
  background: #000000;
  border: 1px solid #000000;
  border-radius: 3px;
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 50px);
  padding: 12px 20px;
  z-index: 100;
  max-width: 340px;
  /* display: none; */
}

.alert a {
  display: block;
  color: #FFFFFF;
  text-decoration-line: none;
}

.alert a::after {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.646447" y1="10.0903" x2="9.87533" y2="0.861409" stroke="white"/><line x1="9.69588" y1="10.7817" x2="0.631793" y2="0.893619" stroke="white"/></svg>');
  content: "";
  width: 11px;
  height: 12px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* Section styles */

.section {
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #DDDDDD;
}

.section > h2 {
  margin-block-start: 0;
}

.section > p {
  margin-top: 1.2em;
  word-break: break-all;
}

.section th,
.section td {
  word-break: break-all;
}

/* Table styles */

.table_fixed {
  table-layout: fixed;
}

/**
 * signup page
 * mypage> work > detailpage
 */

.form_scroll__privacy .section:first-child,
.form_scroll__terms .section:first-child {
  padding-top: 0;
}

.form_scroll__privacy .section,
.form_scroll__terms .section,
.form_scroll__guide .section {
  margin-right: 0;
  margin-left: 0;
}

.form_scroll__privacy .section .heading_4,
.form_scroll__terms .section .heading_4,
.form_scroll__guide .section .heading_4 {
  font-size: 16px;
}

/**
 * comics page
 */

.comics_list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -8px;
}

.comics_list > li {
  width: calc(100% / 3);
  padding: 8px;
}

.comics_list > li a {
  color: inherit;
  text-decoration-line: none;
}

.comics_list__thumbnail img {
  width: 100%;
  height: auto;
}

.comics_list__title {
  font-weight: 700;
  font-size: clamp(0.688rem, 0.354rem + 0.69vw, 0.875rem);
  margin-top: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.comics_list__author_name,
.comics_list__artist_name {
  margin-top: 5px;
  color: #BBBBBB;
  font-size: clamp(0.688rem, 0.576rem + 0.23vw, 0.75rem);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.comics_detail__header {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 20px;
  margin: 14px 0 30px;
}

.comics_detail__thumbnail > img {
  width: 100%;
  height: auto;
}

.comics_detail__thumbnail .img {
  outline: 1px solid #D3D3D3;
}

.comics_detail__title {
  margin-block-start: 0;
  font-size: clamp(1.125rem, 0.347rem + 1.62vw, 1.563rem);
}

.comics_detail__author_name,
.comics_detail__artist_name,
.comics_detail__genre {
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
}

.comics_detail__author_name a ,
.comics_detail__artist_name a {
  color: inherit;
  text-decoration-line: none;
}

.comics_detail__author_name {
  margin-top: 15px;
}

.comics_detail__artist_name,
.comics_detail__genre {
  margin-block-start: 0;
}

.comics_detail__synopsis {
  font-size: clamp(0.688rem, 0.354rem + 0.69vw, 0.875rem);
  margin-top: 10px;
}

.comics_detail__list > li {
  position: relative;
}

.comics_detail__list > li::before {
  border-top: 1px solid #D3D3D3;
  content: "";
  position: absolute;
  left: -20px;
  width: calc(100% + 40px);
}

.comics_detail__list > li::before {
  top: 0;
}

.comics_detail__list > li > a {
  display: grid;
  grid-template-columns: 55px 1fr;
  column-gap: 20px;
  padding: 20px 0;
  color: inherit;
  text-decoration-line: none;
}

.comics_detail__list-thumbnail > img {
  width: 100%;
  height: auto;
}

.comics_detail__list-thumbnail .img {
  outline: 1px solid #D3D3D3;
}

.comics_detail__list-title {
  margin-top: 3px;
  font-size: 16px;
}

.comics_detail__list-date {
  font-size: 12px;
  color: #958E8E;
  margin-top: 13px;
}

.comics_viewer__header {
  background: #000000;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

.comics_viewer__header-title {
  margin-block-start: 0;
  font-size: clamp(0.875rem, 0.431rem + 0.93vw, 1.125rem);
  width: 45%;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.comics_viewer__header > a {
  color: inherit;
  text-decoration: none;
}

.comics_viewer__header > a > img {
  display: inline-block;
  vertical-align: middle;
}

.comics_viewer__header-return > img {
  margin-right: 5px;
  margin-top: -2px;
}

.comics_viewer__header-share > img {
  margin-left: 5px;
  margin-top: -5px;
}

.comics_viewer__main {
  background: #F4F4F4;
  min-height: 100dvh;
}

.comics_viewer__page-end {
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

.comics_viewer__page-end .comics_end__button {
  display: flex;
  flex-wrap: wrap;
  margin: -47px  auto 0;
  max-width: 390px;
  width: calc(100% - 20px);
}

.comics_viewer__page-end .comics_end__button > li {
  width: 50%;
  padding: 15px 10px;
}

.comics_viewer__page-end .comics_end__button > li:last-child {
  width: 100%;
  padding-top: 33px;
}

.comics_viewer__page-end .comics_end__button > li > a:not(.comics_end__button__prev) > span::before {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-top: -3px;
  vertical-align: middle;
  margin-right: 11px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__like > span::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5583 6.26764H16.6251C17.4996 6.26764 18.2084 6.97652 18.2084 7.85095V9.51693C18.2084 9.72371 18.1679 9.92852 18.0892 10.1198L15.6395 16.0691C15.5173 16.3657 15.2282 16.5593 14.9074 16.5593H1.58341C1.14619 16.5593 0.791748 16.2048 0.791748 15.7676V7.85095C0.791748 7.41374 1.14619 7.0593 1.58341 7.0593H4.33987C4.59711 7.0593 4.8383 6.93432 4.98664 6.72417L9.30391 0.608031C9.41672 0.448218 9.62936 0.394774 9.80432 0.482257L11.2405 1.20032C12.073 1.6166 12.503 2.55677 12.2734 3.45882L11.5583 6.26764ZM5.54175 8.31605V14.9759H14.3772L16.6251 9.51693V7.85095H11.5583C10.5254 7.85095 9.76909 6.87797 10.0238 5.87701L10.739 3.0682C10.7849 2.88779 10.6989 2.69975 10.5323 2.6165L10.009 2.3548L6.28018 7.63726C6.08234 7.91752 5.82945 8.14727 5.54175 8.31605ZM3.95842 8.64261H2.37508V14.9759H3.95842V8.64261Z" fill="white"/></svg>');
  background-size: 19px 17px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__share > span::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0.831543L10.8967 5.22824L9.89497 6.22995L7.20833 3.54334V10.3333H5.79167V3.54334L3.10504 6.22995L2.1033 5.22824L6.5 0.831543ZM0.125 11.7499V8.91659H1.54167V11.7499C1.54167 12.1411 1.8588 12.4583 2.25 12.4583H10.75C11.1412 12.4583 11.4583 12.1411 11.4583 11.7499V8.91659H12.875V11.7499C12.875 12.9236 11.9236 13.8749 10.75 13.8749H2.25C1.0764 13.8749 0.125 12.9236 0.125 11.7499Z" fill="white"/></svg>');
  background-size: 13px 14px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__next > span {
  margin-right: 8px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__next > span::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.17043 6.94124C-0.0568099 6.69734 -0.0568099 6.30329 0.17043 6.05876L5.56358 0.26465C5.89162 -0.0882167 6.42535 -0.0882167 6.75397 0.26465C7.08201 0.617517 7.08201 1.19021 6.75397 1.54308L2.14042 6.50032L6.75397 11.4563C7.08201 11.8098 7.08201 12.3825 6.75397 12.7354C6.42535 13.0882 5.89162 13.0882 5.56358 12.7354L0.17043 6.94124Z" fill="white"/></svg>');
  background-size: 7px 13px;
  margin-right: 6px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__prev > span {
  margin-left: 8px;
}

.comics_viewer__page-end .comics_end__button > li > a.comics_end__button__prev > span::after {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 13px;
  background-image: url('data:image/svg+xml;utf8,<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.82957 6.05876C7.05681 6.30266 7.05681 6.69671 6.82957 6.94124L1.43642 12.7354C1.10838 13.0882 0.574654 13.0882 0.246031 12.7354C-0.0820103 12.3825 -0.0820104 11.8098 0.246031 11.4569L4.85958 6.49968L0.24603 1.54371C-0.0820113 1.19021 -0.0820114 0.617516 0.24603 0.26465C0.574653 -0.0882172 1.10837 -0.0882172 1.43642 0.26465L6.82957 6.05876Z" fill="white"/></svg>');
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-top: -3px;
  vertical-align: middle;
  margin-left: 6px;
}

.comics_viewer__footer {
  background: #000000;
  color: #FFFFFF;
  padding: 18px 25px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.comics_viewer__footer-bar {
  width: 100%;
  padding-right: 48px;
  position: relative;
  margin-bottom: 20px;
}

.comics_viewer__footer-bar .comics_bar__base {
  background: #E2E2E2;
  border-radius: 10px;
  height: 4px;
  width: 100%;
  position: relative;
}

.comics_viewer__footer-bar .comics_bar__track {
  background: #8F8F8F;
  border-radius: 10px;
  height: 4px;
  position: absolute;
  right: 0;
}

.comics_viewer__footer-bar .comics_bar__count {
  position: absolute;
  top: -6px;
  right: 0;
  font-size: 12px;
  font-weight: 700;
}

.comics_viewer__footer-navigation {
  display: flex;
  justify-content: flex-end;
}

.comics_viewer__footer-navigation > a {
  font-size: clamp(0.75rem, 0.306rem + 0.93vw, 1rem);
  margin-left: 17px;
}

.comics_viewer__footer-navigation > a.comics_navigation__next::before,
.comics_viewer__footer-navigation > a.comics_navigation-prev::after {
  content: "";
  background: left center / contain no-repeat url(../img/comics_icon_arrow.svg);
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-top: -2px;
  vertical-align: middle;
}

.comics_viewer__footer-navigation > a.comics_navigation__next::before {
  margin-right: 14px;
}

.comics_viewer__footer-navigation > a.comics_navigation-prev::after {
  padding-left: 20px;
  transform: rotate(180deg);
}

/**
 * creator page
 */

.creator_list__header {
  display: flex;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 10px;
}

.creator_list__header > h1 {
  margin-block-start: 0;
}

.creator_list__header-sort {
  background-color: transparent;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom-color: #DDDDDD;
  width: auto;
  margin-left: auto;
  padding: 0 15px 0 0;
  background-position: right 0 top 50%;
  max-width: 114px;
}

.creator_list__header-search {
  margin-left: 20px;
  cursor: pointer;
}

.creator_list__search {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: .3s;
  overflow: hidden;
}

.creator_list__search.is-open {
  opacity: 1;
  visibility: visible;
  height: auto;
}

.creator_list__search_inner {
  background: #F8F8F8;
  border: 1px solid #DDDDDD;
  padding: 20px 20px 0;
  margin-top: 22px;
  margin-bottom: 6px;
}

.creator_list__search .search_item {
  margin-bottom: 18px;
}

.creator_list__search .search_label {
  font-size: 16px;
  margin-bottom: 5px;
}

.creator_list__search .search_field__group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.creator_list__search .button_group {
  max-width: 280px;
  margin-right: auto;
  margin-left: auto;
}

.creator_list {
  margin-block-start: 0;
  margin-block-end: 0;
}

.creator_list > li {
  border-bottom: 1px solid #E2E2E2;
}

.creator_list > li > a {
  color: inherit;
  text-decoration-line: none;
  display: grid;
  align-items: center;
  grid-template-columns: 60px 1fr;
  column-gap: 25px;
  padding: 15px 0;
  position: relative;
}

.creator_list__thumbnail > img {
  border-radius: 100%;
  width: 100%;
  height: auto;
}

.creator_list__name {
  margin-block-start: 0;
  font-size: 14px;
  padding-right: 45px;
  word-break: break-word;
}

.creator_list__name.lock {
  background: #4F4F4F;
  color: #FFFFFF;
  display: inline-block;
  font-size: 8px;
  font-weight: 400;
  padding: 2px 2px 2px 15px;
  margin-right: 45px;
  margin-bottom: 6px;
  position: relative;
}

.creator_list__name.lock::before {
  content: "";
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.00004 9.11287C2.69885 9.11287 0.833374 7.24737 0.833374 4.94621C0.833374 2.64502 2.69885 0.779541 5.00004 0.779541C7.30121 0.779541 9.16671 2.64502 9.16671 4.94621C9.16671 7.24737 7.30121 9.11287 5.00004 9.11287ZM5.00004 8.27954C6.841 8.27954 8.33337 6.78717 8.33337 4.94621C8.33337 3.10526 6.841 1.61287 5.00004 1.61287C3.15909 1.61287 1.66671 3.10526 1.66671 4.94621C1.66671 6.78717 3.15909 8.27954 5.00004 8.27954ZM4.58337 5.27621C4.21546 5.11546 3.95837 4.74837 3.95837 4.32121C3.95837 3.74591 4.42475 3.27954 5.00004 3.27954C5.57533 3.27954 6.04171 3.74591 6.04171 4.32121C6.04171 4.74837 5.78462 5.11546 5.41671 5.27621V6.61287H4.58337V5.27621Z" fill="white"/></svg>');
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  position: absolute;
  left: 2px;
  top: 2px;
}

.creator_list__profiles {
  margin-top: 6px;
  font-size: 12px;
}

.creator_list__comment {
  margin-top: 4px;
  font-size: clamp(0.625rem, 0.403rem + 0.46vw, 0.75rem);
}

.creator_list__role {
  margin-top: 6px;
  font-size: clamp(0.625rem, 0.403rem + 0.46vw, 0.75rem);
}

.label_role {
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  display: inline-block;
  padding: 0 4px 1px;
  margin-right: 5px;
  margin-bottom: 4px;
}

.label_role:first-child {
  margin-left: 4px;
}

.creator_list__status {
  margin-block-start: 0;
  background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  border-radius: 3px;
  display: inline-block;
  font-size: clamp(0.625rem, 0.181rem + 0.93vw, 0.875rem);
  color: #FFFFFF;
  padding: 1px 5px 2px;
  position: absolute;
  top: 19px;
  right: 0;
}

.creator_profile__header {
  display: grid;
  grid-template-columns: 98px 1fr;
  grid-template-areas:
        "creator_thumbnail creator_content"
        "creator_message creator_message"
        "creator_button creator_button";
  column-gap: 20px;
  margin: 14px 0 30px;
  position: relative;
}

.creator_profile__header::after {
  border-bottom: 1px solid #E3E3E3;
  content: "";
  display: block;
  width: calc(100% + 40px);
  position: absolute;
  left: -20px;
  bottom: 0;
}

.creator_profile__thumbnail {
  grid-area: creator_thumbnail;
}

.creator_profile__thumbnail > img {
  border-radius: 100%;
  width: 100%;
  max-width: 264px;
  margin: 0 auto;
  height: auto;
}

.creator_profile__content {
  grid-area: creator_content;
  position: relative;
}

.creator_profile__name {
  margin-block-start: 0;
  font-size: clamp(1.125rem, 0.347rem + 1.62vw, 1.563rem);
  /* padding-right: 40px; */
}

.creator_profile__name.lock {
  background: #4F4F4F;
  color: #FFFFFF;
  display: inline-block;
  font-size: clamp(0.5rem, 0.056rem + 0.93vw, 0.75rem);
  font-weight: 400;
  padding: 4px 6px 4px 15px;
  margin-bottom: 9px;
  position: relative;
}

.creator_profile__name.lock::before {
  content: "";
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.00004 9.11287C2.69885 9.11287 0.833374 7.24737 0.833374 4.94621C0.833374 2.64502 2.69885 0.779541 5.00004 0.779541C7.30121 0.779541 9.16671 2.64502 9.16671 4.94621C9.16671 7.24737 7.30121 9.11287 5.00004 9.11287ZM5.00004 8.27954C6.841 8.27954 8.33337 6.78717 8.33337 4.94621C8.33337 3.10526 6.841 1.61287 5.00004 1.61287C3.15909 1.61287 1.66671 3.10526 1.66671 4.94621C1.66671 6.78717 3.15909 8.27954 5.00004 8.27954ZM4.58337 5.27621C4.21546 5.11546 3.95837 4.74837 3.95837 4.32121C3.95837 3.74591 4.42475 3.27954 5.00004 3.27954C5.57533 3.27954 6.04171 3.74591 6.04171 4.32121C6.04171 4.74837 5.78462 5.11546 5.41671 5.27621V6.61287H4.58337V5.27621Z" fill="white"/></svg>');
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  position: absolute;
  top: 4px;
  left: 6px;
}

.creator_profile__profiles {
  margin-top: 9px;
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
}

.creator_profile__comment {
  margin-top: 4px;
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
}

.creator_profile__genre {
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
  margin-top: 5px;
}

.creator_profile__portfolio {
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
  margin-top: 7px;
}

.creator_profile__portfolio::before {
  content: "";
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.32349 10.3332H4.49015V4.6665H7.32349C8.88827 4.6665 10.1568 5.93503 10.1568 7.49984C10.1568 9.06462 8.88827 10.3332 7.32349 10.3332ZM5.90682 6.08317V8.9165H7.32349C8.10591 8.9165 8.74015 8.28226 8.74015 7.49984C8.74015 6.71741 8.10591 6.08317 7.32349 6.08317H5.90682ZM9.44849 1.83317H2.36515V13.1665H12.2818V4.6665H9.44849V1.83317ZM0.948486 1.11903C0.948486 0.731039 1.26546 0.416504 1.65576 0.416504H10.1568L13.6983 3.95817L13.6985 13.8695C13.6985 14.2636 13.3833 14.5832 12.9948 14.5832H1.65214C1.26352 14.5832 0.948486 14.2607 0.948486 13.8806V1.11903Z" fill="black"/></svg>');
  display: inline-block;
  width: 14px;
  height: 15px;
  margin-right: 8px;
  vertical-align: middle;
}

.creator_profile__role {
  margin-top: 12px;
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
}

.creator_profile__status {
  margin-block-start: 0;
  background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  border-radius: 3px;
  display: inline-block;
  font-size: clamp(0.625rem, 0.181rem + 0.93vw, 0.875rem);
  color: #FFFFFF;
  padding: 1px 5px 2px;
  margin-top: 9px;
}

.creator_profile__message {
  grid-area: creator_message;
  background: #F8F8F8;
  border: 1px solid #DCDCDC;
  font-size: 12px;
  padding: 18px;
  margin-top: 20px;
}

.creator_profile__button {
  grid-area: creator_button;
  margin-top: 30px;
  margin-bottom: 30px;
}

/**
 * matching page
 */

.matching_list__date {
  font-size: clamp(0.625rem, 0.403rem + 0.46vw, 0.75rem);
  margin-top: 5px;
}

.label_new {
  background: #FF1B83;
  border-radius: 3px;
  color: #FFFFFF;
  display: inline-block;
  font-size: clamp(0.625rem, 0.181rem + 0.93vw, 0.875rem);
  padding: 3px 5px;
  margin-right: 10px;
}

/**
 * message page
 */

.message_list__date {
  font-size: clamp(0.625rem, 0.403rem + 0.46vw, 0.75rem);
  margin-top: 8px;
}

.message_list__date > span {
  display: block;
}

.message_list__excerpt {
  font-size: 12px;
  margin-top: 4px;
}

.message_view__header {
  background: #FFFFFF;
  box-shadow: 0px 10px 10px -11px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  position: absolute;
  top: 0;
  width: 100%;
}

.message_view__header_contact {
  padding-top: 19px;
  padding-bottom: 19px;
  justify-content: center;
}

.message_view__header_creator {
  display: grid;
  align-items: center;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  width: 55%;
}

.message_view__header_creator > img {
  border-radius: 100%;
}

.message_view__header_creator > h1,
.message_view__header_contact > h1 {
  margin-block-start: 0;
  font-size: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.message_view__header_button {
  padding-top: 9px;
  padding-bottom: 9px;
  max-width: 137px;
  margin-right: 0;
}

.message_view__main {
  padding-top: 60px;
  padding-bottom: 80px;
  height: 100%;
  overflow-y: auto;
}

.message_view__main > section {
  margin: 30px auto;
  width: calc(100% - 40px);
}

.message_view__date {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

.message_view__list > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 18px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.message_view__list > li .message_view__list_icon {
  text-align: center;
}

.message_view__list > li .message_view__list_icon img {
  border-radius: 100%;
  width: 100%;
  height: auto;
}

.message_view__list > li .message_view__list_time {
  font-size: 9px;
  margin-top: 10px;
}

.message_view__list > li .message_view__list_text {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0px 6px 6px 6px;
  font-size: 13px;
  padding: 14px 17px;
  word-break: break-all;
}

.message_view__list > li.message_from .message_view__list_text {
  border-radius: 0px 6px 6px 6px;
}

.message_view__list > li.message_to {
  direction: rtl;
}

.message_view__list > li.message_to .message_view__list_text {
  background: #90EE90;
  border-radius: 6px 0px 6px 6px;
}

.message_view__footer {
  background: #FFFFFF;
  border-top: 1px solid #D2D2D2;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 34px 1fr 30px;
  column-gap: 18px;
  padding: 0 30px;
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
}

.message_view__footer_file {
  text-align: center;
}

.message_view__footer_file label {
  display: inline-block;
  cursor: pointer;
}

.message_view__footer_file input[type="file"] {
  display: none;
}

.message_view__footer_textarea {
  resize: none;
  background: #F2F2F2;
  border: 1px solid #E2DFDF;
  border-radius: 5px;
}

.message_view__footer_send {
  text-align: center;
}

.message_view__footer_send button {
  background: none;
  padding: 0;
  width: auto;
}

#modal_overlay {
  background: rgba(0, 0, 0, 0.65);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}

#modal_window {
  background: #FFFFFF;
  border-radius: 10px;
  position: fixed;
  width: 90vw;
  max-width: 390px;
  max-height: 825px;
  height: 85vh;
  z-index: 101;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#modal_window > .modal_close {
  background: center / contain no-repeat url(../img/confirm_icon_close.svg);
  display: inline-block;
  width: 37px;
  height: 0;
  padding-top: 37px;
  overflow: hidden;
  position: absolute;
  top: -10px;
  right: -13px;
  z-index: 102;
}

#content_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

/**
 * howto page
 */

.howto_list {
  padding-bottom: 35px;
  margin-bottom: 30px;
  position: relative;
}

.howto_list::after {
  border-top: 1px solid #DDDDDD;
  content: "";
  width: calc(100% + 40px);
  position: absolute;
  left: -20px;
  bottom: 0;
}

.howto_list > li {
  position: relative;
  padding-left: 35px;
  margin-top: 20px;
}

.howto_list > li::before,
.howto_list > li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.howto_list > li::before {
  background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  border-radius: 100%;
  width: 21px;
  height: 21px;
  left: 0;
}

.howto_list > li::after {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.88439L6.64706 10.4229L13 1.42285" stroke="white" stroke-width="2"/></svg>');
  width: 12px;
  height: 9px;
  left: 4px;
}

.howto_item {
  padding-bottom: 40px;
}

.howto_item dl dt {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
}

.howto_item dl dt > .howto_item__step {
  display: inline-block;
  background: linear-gradient(90deg, #20DFED 0%, #93F999 100%);
  border-radius: 50px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 1px 8px;
  margin-right: 10px;
  position: relative;
}

.howto_item dl:not(:last-child) dt > .howto_item__step::after {
  content: "";
  background: linear-gradient(270deg, #54EAC6 18.75%, #5FEDBE 93.75%);
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 8px;
  height: 8px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transform: rotate(90deg);
}

.howto_item dl dd {
  margin-top: 15px;
  margin-left: 70px;
}

.label_status {
  border: 1px solid #DDDDDD;
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  padding: 4px 9px;
  margin-left: 10px;
}

.howto_bottom {
  background: #FFFFFF;
  box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(13.5914px);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 15px;
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
}

.howto_content__reader .howto_list > li::before {
  background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
}

.howto_content__reader .howto_item dl dt > .howto_item__step {
  background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
}

.howto_content__reader .howto_item dl:not(:last-child) dt > .howto_item__step::after {
  background: linear-gradient(270deg, #FE4F6D 18.75%, #FE4473 93.75%);
}

/**
* mypage
*/

.mypage_item__thumbnail {
  margin-top: 15px;
}

.mypage_item__thumbnail img {
  border-radius: 100%;
  margin-right: auto;
  margin-left: auto;
}

.mypage_item__name {
  font-weight: 400;
  text-align: center;
  margin-bottom: 35px;
}

.mypage_list {
  margin: 30px -20px 0;
}

.mypage_list > li > a {
  color: inherit;
  text-decoration-line: none;
  border-bottom: 1px solid #DDDDDD;
  display: block;
  padding: 20px;
  position: relative;
}

.mypage_list > li > a::before {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.78088 6.99087C9.07304 7.2723 9.07304 7.72697 8.78088 8.00912L1.84682 14.6946C1.42506 15.1018 0.738841 15.1018 0.316325 14.6946C-0.105442 14.2875 -0.105442 13.6267 0.316325 13.2195L6.24803 7.49963L0.316324 1.78121C-0.105443 1.37332 -0.105443 0.712519 0.316324 0.305365C0.73884 -0.101789 1.42505 -0.101789 1.84682 0.305365L8.78088 6.99087Z" fill="black"/></svg>');
  content: "";
  width: 9px;
  height: 15px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/**
* mypage > creator regist page
*/

.mypage_creator_form_field__photo {
  text-align: center;
}

.mypage_creator_form_field__photo label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.mypage_creator_form_field__photo label::after {
  background: center / contain no-repeat url(../img/form_icon_photo.svg);
  content: "";
  width: 29px;
  height: 29px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.mypage_creator_form_field__photo input[type="file"] {
  display: none;
}

.mypage_creator_form_field__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mypage_creator_form_field__file a {
  margin-right: 20px;
  word-break: break-all;
}

.mypage_creator_form_field__file label {
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

.mypage_creator_form_field__file input[type="file"] {
  display: none;
}

/**
* mypage > setting page
*/

.mypage_setting_main_container {
  padding-top: 0;
}

.mypage_setting_list {
  margin-top: 0;
}

/**
* mypage > block page
*/

.mypage_block_list {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -10px 0;
}

.mypage_block_list > li {
  width: calc(100% / 3);
  padding: 10px 10px 20px;
}

.mypage_block__thumbnail img {
  border-radius: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 80px;
  width: 100%;
  height: auto;
}

.mypage_block__name {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.mypage_block_button {
  padding: 8px;
}

/**
* mypage > status page
*/

.mypage_status_main {
  padding-bottom: 30px;
}

.mypage_status__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 20px;
}

.mypage_status__header_title {
  font-size: 16px;
}

.mypage_status__header_plan {
  font-weight: 700;
  font-size: 20px;
}

.mypage_status__body {
  background: #F8F8F8;
  border: 1px solid #DDDDDD;
  text-align: center;
  padding: 27px;
}

.mypage_status__body > p {
  margin-block-start: 0;
  font-size: 16px;
}

.mypage_status__body_price > span {
  font-size: 35px;
}

.mypage_status__body_button {
  margin-top: 18px;
  margin-bottom: 18px;
}

.mypage_status_news {
  margin-top: 48px;
}

.mypage_status_news_list {
  margin-block-start: 0;
}

.news_list > li {
  display: grid;
  align-items: start;
  grid-template-columns: 90px 1fr;
  column-gap: 10px;
  padding: 16px 0;
}

.news_list > li:not(:last-child) {
  border-bottom: 1px solid #E7E7E7;
}

.news_list > li > p {
  margin-block-start: 0;
}

.news_list > li > p > time {
  font-weight: 500;
  color: #979797;
  line-height: 1;
}

.news_list > li > p > a {
  color: inherit;
  text-decoration-line: none;
  font-weight: 400;
  font-size: 12px;
}

/**
* mypage > work page
*/

.work_list {
  margin-top: 30px;
}

.work_list_note {
  background: #F8F8F8;
  border: 1px solid #DCDCDC;
  position: relative;
  padding: 18px 46px;
  margin-top: 13px;
}

.work_list_note::before {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 13.25C3.04822 13.25 0.25 10.4517 0.25 7C0.25 3.54822 3.04822 0.75 6.5 0.75C9.95175 0.75 12.75 3.54822 12.75 7C12.75 10.4517 9.95175 13.25 6.5 13.25ZM6.5 12C9.26144 12 11.5 9.76144 11.5 7C11.5 4.23857 9.26144 2 6.5 2C3.73857 2 1.5 4.23857 1.5 7C1.5 9.76144 3.73857 12 6.5 12ZM5.875 8.875H7.125V10.125H5.875V8.875ZM5.875 3.875H7.125V7.625H5.875V3.875Z" fill="black"/></svg>');
  content: "";
  width: 13px;
  height: 14px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.work_list > li {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 20px;
  border-bottom: 1px solid #DDDDDD;
  padding-bottom: 20px;
}

.work_list > li:not(:first-child) {
  padding-top: 20px;
}

.work_list__thumbnail > img {
  width: 100%;
  height: auto;
}

.work_list__title {
  margin-block-start: 0;
  font-size: 18px;
}

.work_list__genre {
  margin-top: 14px;
  font-size: clamp(0.75rem, 0.528rem + 0.46vw, 0.875rem);
}

.work_list__date {
  font-size: 12px;
}

.work_list__date > span {
  display: block;
}

.work_list_count {
  margin-top: 7px;
}

.work_list_count > .count_like,
.work_list_count > .count_share {
  font-size: 12px;
  margin-right: 18px;
}

.work_list_count > .count_like::before,
.work_list_count > .count_share::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  margin-right: 4px;
  margin-top: -4px;
  vertical-align: middle;
}

.work_list_count > .count_like::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.89076 5.92273H14.5455C15.3488 5.92273 16 6.5824 16 7.39613V8.94648C16 9.13891 15.9628 9.3295 15.8905 9.50749L13.64 15.0438C13.5278 15.3199 13.2622 15.5 12.9675 15.5H0.727273C0.325615 15.5 0 15.1702 0 14.7633V7.39613C0 6.98928 0.325615 6.65944 0.727273 6.65944H3.25952C3.49583 6.65944 3.7174 6.54314 3.85368 6.34757L7.81978 0.655967C7.92342 0.507248 8.11876 0.457513 8.27949 0.538924L9.59884 1.20714C10.3636 1.59453 10.7586 2.46944 10.5477 3.30888L9.89076 5.92273ZM4.36364 7.82895V14.0266H12.4804L14.5455 8.94648V7.39613H9.89076C8.94189 7.39613 8.24713 6.4907 8.48116 5.55922L9.13811 2.94537C9.18029 2.77748 9.10131 2.6025 8.94829 2.52502L8.46749 2.28149L5.042 7.19728C4.86025 7.45809 4.62793 7.67189 4.36364 7.82895ZM2.90909 8.13285H1.45455V14.0266H2.90909V8.13285Z" fill="black"/></svg>');
  width: 16px;
  height: 16px;
}

.work_list_count > .count_share::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 0L10.1381 4.04499L9.19527 4.96657L6.66667 2.49487V8.74164H5.33333V2.49487L2.80474 4.96657L1.86193 4.04499L6 0ZM0 10.045V7.4383H1.33333V10.045C1.33333 10.4049 1.63181 10.6967 2 10.6967H10C10.3682 10.6967 10.6667 10.4049 10.6667 10.045V7.4383H12V10.045C12 11.1247 11.1046 12 10 12H2C0.895433 12 0 11.1247 0 10.045Z" fill="black"/></svg>');
  width: 12px;
  height: 12px;
}

.work_list_button {
  margin-top: 10px;
}

.work_list_button > .button {
  display: inline-block;
  width: auto;
  font-size: 12px;
  padding: 7px 10px;
  margin-right: 7px;
  margin-bottom: 7px;
}

.work_form_field__thumbnail {
  text-align: center;
}

.work_form_field__thumbnail label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.work_form_field__thumbnail label::after {
  background: center / contain no-repeat url(../img/form_icon_photo.svg);
  content: "";
  width: 29px;
  height: 29px;
  position: absolute;
  right: -8px;
  bottom: -8px;
}

.work_form_field__thumbnail input[type="file"] {
  display: none;
}

.work_form_field__manuscript input[type="file"] {
  display: none;
}

.work_fild_note {
  background: #F8F8F8;
  border: 1px solid #DCDCDC;
  padding: 20px;
}

.work_fild_note > li {
  padding-left: 45px;
  position: relative;
}

.work_fild_note > li:not(:first-child) {
  margin-top: 5px;
}

.work_fild_note > li::before {
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 13.25C3.04822 13.25 0.25 10.4517 0.25 7C0.25 3.54822 3.04822 0.75 6.5 0.75C9.95175 0.75 12.75 3.54822 12.75 7C12.75 10.4517 9.95175 13.25 6.5 13.25ZM6.5 12C9.26144 12 11.5 9.76144 11.5 7C11.5 4.23857 9.26144 2 6.5 2C3.73857 2 1.5 4.23857 1.5 7C1.5 9.76144 3.73857 12 6.5 12ZM5.875 8.875H7.125V10.125H5.875V8.875ZM5.875 3.875H7.125V7.625H5.875V3.875Z" fill="black"/></svg>');
  content: "";
  width: 13px;
  height: 14px;
  position: absolute;
  left: 20px;
  top: 2px;
}

.work_regist_subtitle {
  margin-top: 25px;
  padding-top: 26px;
  position: relative;
}

.work_regist_subtitle::before {
  border-top: 1px solid #DDDDDD;
  content: "";
  width: calc(100% + 40px);
  position: absolute;
  top: 0;
  left: -20px;
}

/**
* help page
*/

.help_page_list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px -10px 0;
}

.help_page_list > li {
  padding: 6px 10px;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
* plan page
*/

.plan_note {
  color: #717171;
  max-width: 285px;
  margin: 42px auto 30px;
  text-align: center;
}

.plan_section {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}

.plan_section:not(:last-of-type)::after {
  content: "";
  border-bottom: 1px solid #DDDDDD;
  position: absolute;
  left: -20px;
  bottom: 0;
  width: calc(100% + 40px);
}

.plan_list > li {
  margin-top: 20px;
  padding-left: 75px;
  position: relative;
}

.plan_list__img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plan_list__title {
  font-size: 16px;
  font-weight: 700;
}

.plan_bottom {
  background: #FFFFFF;
  box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(13.5914px);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 15px;
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
}

/**
* news detail page
*/

.news_detail__header {
  margin-top: 25px;
}

.news_detail__header_title {
  font-size: clamp(1.25rem, 0.917rem + 0.69vw, 1.438rem);
}

.news_detail__header_date {
  font-size: 12px;
  color: #6D6D6D;
}

.news_detail__content {
  margin-top: 40px;
  margin-bottom: 30px;
}

/**
* home page
*/

.campaign_banner__swiper {
  overflow: hidden;
  position: relative;
  padding-top: 20px;
  padding-bottom: 15px;
}

.campaign_banner__swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.campaign_banner__swiper .swiper-slide img {
  width: 100%;
  height: auto;
}

.campaign_banner__swiper .swiper-pagination {
  bottom: -3px;
}

.campaign_banner__swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 8px !important;
  opacity: 1;
  background: #D9D9D9;
  transform: matrix(1, 0, 0, -1, 0, 0);
}

.campaign_banner__swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #777676;
}

.home_mv img {
  width: 100%;
}

.home_mv_button {
  display: none;
}

.home_campaign_banner .campaign_banner__swiper {
  padding-top: 10px;
}

.home_main_container {
  padding-top: 5px;
}

.home_comics,
.home_creator,
.home_recommend {
  position: relative;
  margin-top: 25px;
  margin-bottom: 25px;
}

.home_comics__link,
.home_creator__link {
  position: absolute;
  top: 3px;
  right: 0;
}

.home_comics__list {
  flex-wrap: nowrap;
  overflow-y: auto;
}

.home_comics__list > li {
  min-width: calc(100% / 3.4);
}

.home_creator_list > li:nth-child(n+5) {
  display: none;
}

.home_news__list {
  margin-top: 0;
}

/**
* mypage > settlement page
*/

.mypage_settlement__cart {
  background: #F8F8F8;
  border: 1px solid #DDDDDD;
  padding: 5px 20px 20px;
  margin: 20px 0 65px;
}

.mypage_settlement__cart-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
}

.mypage_settlement__cart-items:not(:first-child) {
  border-top: 1px solid #DDDDDD;
}

.mypage_settlement__cart-item {
  width: 48%;
}

.mypage_settlement__cart-item:last-child {
  text-align: right;
}

.mypage_settlement__cart-items.coupon .mypage_settlement__cart-item:first-child {
  width: 68%;
}

.mypage_settlement__cart-items.coupon .mypage_settlement__cart-item:last-child {
  width: 28%;
}

.card_list {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.card_list > li img {
 height: auto;
}

/**
* Media query
*/

@media screen and (min-width: 768px) {

  /* Document settings */

  .fieldset {
    padding: 25px 50px;
  }
  
  /* Header */

  .header_inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header_logo {
    width: 108px;
    padding-top: 36px;
  }

  .header_navigation__primary {
    position: relative;
    box-shadow: none;
    width: auto;
    height: auto;
    margin-left: auto;
  }

  .header_navigation__primary > ul {
    padding-top: 0;
  }

  .header_navigation__primary > ul > li > a::before {
    content: none;
  }

  .header_navigation__secondary {
    margin-left: 13px;
  }

  .header_navigation__secondary::before {
    content: "";
    border-left: 1px solid #DDDDDD;
    display: inline-block;
    height: 19px;
    margin-right: 13px;
    margin-top: -4px;
    vertical-align: middle;
  }

  .header_navigation__secondary > .header_navigation__mypage {
    margin-right: 12px;
  }

  .header_heading {
    display: none;
  }

  /* Footer */

  .footer {
    padding-bottom: 0;
  }

  /* Main Breadcrumb */

  .main_breadcrumb {
    display: block;
    background: #FFFFFF;
    border-bottom: 1px solid #ECECEC;
  }

  .main_breadcrumb__inner {
    max-width: 1390px;
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 50px);
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .main_breadcrumb__list {
    margin-block-start: 0;
    margin-block-end: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .main_breadcrumb__list > li {
    padding-right: 10px;
  }

  .main_breadcrumb__list > li:not(:first-child)::before {
    content: "";
    background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.75L7 6.75L1 11.25" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
    display: inline-block;
    width: 9px;
    height: 13px;
    margin-right: 10px;
    margin-top: -3px;
    vertical-align: middle;
  }

  .main_breadcrumb__list > li > a {
    color: inherit;
    text-decoration-line: none;
  }

  /* Main Navigation */

  .main_navigation__secondary {
    display: block;
    background: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
  }

  .main_navigation__secondary > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 0;
    max-width: 1048px;
    width: calc(100% - 30px);
  }

  .main_navigation__secondary > ul > li {
    flex-grow: 1;
  }

  .main_navigation__secondary > ul > li > a {
    color: inherit;
    text-decoration-line: none;
    display: block;
    padding: 10px 0;
    position: relative;
    text-align: center;
  }

  .main_navigation__secondary > ul > li > a.is_current::after {
    background: linear-gradient(90deg, #FE7E4E 0%, #FE1892 100%);
    content: "";
    width: 90%;
    height: 2px;
    position: absolute;
    bottom: -10px;
    left: 5%;
  }

  /* Main Contents */

  .main_container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .main_container__heading {
    margin-top: 45px;
  }

  .main_container__heading_2 {
    margin-top: 45px;
    margin-bottom: 50px;
  }
  
  /* View styles */

  .view_sp {
    display: none
  }

  .view_pc {
    display: block;
  }

  /* Text Align styles */

  .text_left__pc {
    text-align: left;
  }
  
  .text_right__pc {
    text-align: right;
  }
  
  .text_center__pc {
    text-align: center;
  }

  /* Color styles */

  .bg_gray_f9__pc {
    background: #F9F9F9;
  }

  .bg_gray_f2__pc {
    background: #F2F2F2;
  }

  /* Form styles */

  .form_field__radio {
    background: none;
    border: none;
    padding: 0;
    margin: 10px 6px;
    display: inline-block;
  }

  .form_field__checkbox {
    background: none;
    border: none;
    padding: 0;
    margin: 4px 8px;
    display: inline-block;
  }

  .form_description {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .button_group {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .link_group {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* Section styles */

  .section {
    margin: 0 12px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .section:last-child {
    border-bottom: none;
  }


  /* Tab styles */

  .tab {
    margin: 20px auto;
  }

  .tab > li {
    width: calc(100% / 6);
  }

  /* signup page */

  .signup .heading_1 {
    margin-bottom: 50px;
  }

  /* signin page */

  .signin .heading_1 {
    margin-bottom: 50px;
  }

  /* comics page */

  .comics_list_main_container {
    background: #FFFFFF;
    max-width: 1380px;
    margin: 40px auto;
    padding: 3px 20px 20px;
   }

  .comics_list {
    margin: 7px -15px;
  }

  .comics_list > li {
    width: calc(100% / 7);
    padding: 12px 15px;
  }

  .comics_list__title {
    white-space: inherit;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .comics_detail_main_container {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    padding-top: 65px;
    padding-bottom: 65px;
    position: relative;
  }

  .comics_detail_main_container::before {
    border-right: 1px solid #DDDDDD;
    content: "";
    height: calc(100% - 80px);
    position: absolute;
    top: 40px;
    left: 59.3%;
  }

  .comics_detail__header {
    width: 57%;
    grid-template-columns: 41.5% 1fr;
    column-gap: 30px;
  }

  .comics_detail__author_name {
    margin-top: 35px;
  }

  .comics_detail__synopsis {
    margin-top: 30px;
  }

  .comics_detail__body {
    width: 35.5%;
  }

  .comics_detail__list {
    margin-block-start: 0;
  }

  .comics_detail__list > li:first-child::before {
    content: none;
  }

  .comics_detail__list > li:last-child::after {
    border-bottom: 1px solid #D3D3D3;
    content: "";
    position: absolute;
    left: -20px;
    width: calc(100% + 40px);
  }

  .comics_detail__list > li:first-child > a {
    padding-top: 14px;
  }

  .comics_viewer__header {
    padding: 18px 23px;
  }

  .comics_viewer__footer {
    padding: 18px 30px;
  }

  /* creator page */

  .creator_list_main_container {
    max-width: 1380px;
    padding-top: 20px;
    position: relative;
  }

  .creator_list__header-search {
    margin-left: 32px;
  }

  .creator_list__search {
    position: absolute;
    top: 57px;
    right: 0;
    z-index: 1;
  }

  .creator_list__search_inner {
    background: #F8F8F8;
    border: 1px solid #DDDDDD;
    box-shadow: 0px 0px 20px rgba(85, 85, 85, 0.2);
    max-width: 845px;
    max-height: 496px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-areas: 
      "item_1 item_2"
      "item_3 item_4"
      "item_5 item_5"
      "item_6 item_6"
      "item_7 item_7";
    grid-template-columns: 40% 60%;
    column-gap: 20px;
    padding: 40px 50px;
    margin: 0;
  }

  .creator_list__search_inner .search_item:nth-child(1) {
    grid-area: item_1;
  }

  .creator_list__search_inner .search_item:nth-child(2) {
    grid-area: item_2;
  }

  .creator_list__search_inner .search_item:nth-child(3) {
    grid-area: item_3;
  }

  .creator_list__search_inner .search_item:nth-child(4) {
    grid-area: item_4;
  }

  .creator_list__search_inner .search_item:nth-child(5) {
    grid-area: item_5;
  }

  .creator_list__search_inner .search_item:nth-child(6) {
    grid-area: item_6;
  }

  .creator_list__search .search_item select {
    max-width: 300px;
  }

  .creator_list__search_inner .button_group {
    grid-area: item_7;
    max-width: 350px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .creator_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px -8px;
  }

  .creator_list > li {
    border: none;
    width: calc(100% / 7);
    padding: 8px;
  }

  .creator_list > li > a {
    display: block;
    background: #FFFFFF;
    padding: 22px 19px;
    height: 100%;
  }

  .creator_list__thumbnail > img {
    max-width: 110px;
    margin-right: auto;
    margin-left: auto;
  }

  .creator_list__name {
    padding-right: 0;
    margin-top: 10px;
    text-align: center;
  }

  .creator_list__name.lock {
    display: block;
    padding: 4px 4px 4px 18px;
    text-align: left;
    margin-right: 0;
  }

  .creator_list__name.lock::before {
    top: 4px;
    left: 4px;
  }

  .creator_list__profiles,
  .creator_list__comment,
  .creator_list__role {
    text-align: center;
  }

  .creator_list__role {
    margin-top: 6px;
  }

  .creator_list__status {
    top: 17px;
    right: 8px;
  }

  .creator_profile_main_container {
    max-width: 1090px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    position: relative;
  }

  .creator_profile_main_container::before {
    border-right: 1px solid #DDDDDD;
    content: "";
    height: calc(100% - 80px);
    position: absolute;
    top: 40px;
    left: 46%;
  }

  .creator_profile__header {
    width: 43%;
    display: block;
  }

  .creator_profile__header::after {
    content: none;
  }

  .creator_profile__thumbnail {
    margin-bottom: 48px;
  }

  .creator_profile__name {
    /* padding-right: 53px; */
  }

  .creator_profile__name.lock {
    padding: 6px 6px 6px 25px;
    margin-bottom: 34px;
  }

  .creator_profile__name.lock::before {
    width: 18px;
    height: 18px;
  }

  .creator_profile__profiles {
    margin-top: 34px;
  }

  .creator_profile__comment {
    margin-top: 9px;
  }

  .creator_profile__genre {
    margin-top: 17px;
  }

  .creator_profile__portfolio {
    margin-top: 17px;
  }

  .creator_profile__role {
    margin-top: 19px;
  }

  .creator_profile__message {
    margin-top: 26px;
  }

  .creator_profile__button {
    margin-top: 30px;
    margin-right: 20px;
    margin-left: 20px;
  }

  .creator_profile__body {
    width: 51%;
  }

  .creator_profile__body .comics_list {
    margin-top: -12px;
  }

  .creator_profile__body .comics_list > li {
    width: calc(100% / 3);
  }

  /* matching page */

  .matching_creator_list {
    margin: 30px 18px;
  }

  .matching_creator_list > li {
    margin-bottom: 28px;
  }

  .matching_creator_list > li > a {
    position: relative;
  }

  .matching_creator_list > li > a .label_new {
    position: absolute;
    top: 18px;
    right: 4px;
  }

  .matching_list__date {
    text-align: center;
  }

  /* message page */

  .message_creator_list {
    margin: 25px 18px;
  }

  .message_creator_list > li {
    margin-bottom: 10px;
  }

  .message_creator_list > li > a {
    position: relative;
  }

  .message_creator_list > li > a .label_new {
    position: absolute;
    top: 24px;
    right: 4px;
  }

  .message_list__date,
  .message_list__excerpt {
    text-align: center;
  }

  #modal_window {
    top: inherit;
    left: inherit;
    bottom: 0;
    right: 50px;
    width: 90%;
    height: 90%;
    transform: none
  }

  /* howto page */

  .howto_content__creator,
  .howto_content__reader {
    margin-top: 40px;
  }

  .howto_list {
    margin-block-start: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 26px;
    margin-bottom: 45px;
  }

  .howto_list > li {
    width: 31%;
  }

  .howto_list > li:not(:nth-child(3n)) {
    margin-right: 3.5%;
  }

  .howto_item {
    padding-bottom: 0;
  }

  .howto_item dl {
    margin-top: 30px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
  }

  .howto_item dl > dt {
    margin-top: 0;
    width: 345px;
  }

  .howto_item dl > dd {
    margin-top: 0;
    margin-left: 0;
    flex: 1;
  }

  .howto_bottom {
    box-shadow: none;
    position: inherit;
    margin-top: 44px;
  }

  /* mypage*/

  .mypage_item__thumbnail {
    margin-top: 30px;
  }

  .mypage_list {
    max-width: 600px;
    margin: 80px auto;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
    row-gap: 35px;
  }

  .mypage_list > li > a {
    border: 1px solid #DDDDDD;
    border-radius: 60px;
  }

  /*　mypage > work page　*/

  .work_list_main_container {
    background: #FFFFFF;
    max-width: 1190px;
    margin-top: 38px;
    margin-bottom: 38px;
    padding: 54px 50px;
  }

  .work_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 47px;
  }

  .work_list > li {
    width: calc(100% / 3);
    padding-top: 0;
    padding-bottom: 34px;
    border-bottom: none;
  }

  .work_list > li:not(:first-child) {
    padding-top: 0;
  }

  .work_regist_subtitle {
    margin-top: 40px;
  }

  /* mypage > status page */

  .mypage_status__header {
    max-width: 335px;
    margin: 57px auto 0;
  }

  .mypage_status__body {
    max-width: 335px;
    margin: 20px auto 0;
  }

  .mypage_status_news{
    margin-top: 65px;
  }

  /* mypage > setting page　*/

  .mypage_setting_list {
    margin-top: 66px;
  }

  /* mypage > block page */

  .mypage_block_list {
    margin: 59px 5px 0;
  }

  /* help page */

  .help_page_list {
    margin-bottom: 28px;
  }

  .help_page_list > li {
    width: calc(100% / 6.27);
  }

  /* plan page */

  .plan_note {
    margin-top: 34px;
    margin-bottom: 10px;
  }

  .plan_section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .plan_list {
    margin-block-start: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .plan_list > li {
    width: 31%;
  }

  .plan_list > li:not(:nth-child(3n)) {
    margin-right: 3.5%;
  }

  .plan_bottom {
    box-shadow: none;
    position: inherit;
    margin-top: 44px;
  }

  /* news detail page */

  .news_detail__header {
    margin-top: 47px;
    text-align: center;
  }

  .news_detail__header_date {
    margin-top: 34px;
  }

  .news_detail__content {
    margin-top: 46px;
  }

  .news_detail__content h2 {
    font-size: 20px;
  }

  /* home page */

  .campaign_banner {
    background: #FFFFFF
  }

  .campaign_banner__swiper {
    padding-top: 35px;
    padding-bottom: 50px;
    max-width: 1355px;
    margin-right: auto;
    margin-left: auto;
  }

  .campaign_banner__swiper .swiper-pagination {
    bottom: 20px;
  }

  .campaign_banner__swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 12px !important;
  }
  
  .home_mv {
    position: relative;
  }

  .home_mv_button {
    display: block;
    background: linear-gradient(90deg, #20DFED 0%, #60A7CF 32.9%, #A06FB0 66.9%, #FF1C83 100%);
    max-width: 263px;
    font-size: 18px;
    position: absolute;
    left: 9.7%;
    top: 49.7%;
    padding: 16px;
  }

  .home_campaign_banner .campaign_banner__swiper {
    max-width: 1280px;
    padding-top: 0;
  }

  .home_main_container {
    background: #F4F4F4;
    width: 100%;
    padding: 13px 30px 0;
  }

  .home_comics,
  .home_recommend {
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 25px;
    max-width: 1380px;
  }

  .home_creator {
    margin: 0 auto 25px;
    padding-top: 25px;
    padding-bottom: 25px;
    max-width: 1380px;
  }

  .home_comics .home_section_inner,
  .home_recommend .home_section_inner {
    background: #FFFFFF;
    padding: 4px 20px 23px;
  }

  .home_comics__link,
  .home_creator__link {
    top: 54px;
    right: 20px;
  }

  .home_creator_list {
    margin-top: 12px;
  }

  .home_creator_list > li:nth-child(n+5) {
    display: block;
  }

  .home_comics__list > li { 
    min-width: calc(100% / 7);
  }

  .home_news {
    background: #FFFFFF;
    margin: 15px -30px 0;
    padding: 12px 30px;
  }

  .home_news .home_section_inner {
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
  }

  .home_news__list {
    margin-bottom: 0;
  }

}

@media screen and (min-width: 768px) and (max-width: 1200px) {

  /* comics page */

  .comics_list > li {
    width: calc(100% / 4);
  }

  /* creator page */

  .creator_list > li {
    width: calc(100% / 4);
  }

  /*　mypage > work page　*/

  .work_list > li {
    width: calc(100% / 2);
  }

}