/*! Copyright (c) 2025 Hayato Nakagawa */
.-inview .Navigation__image,
.-inview .ProfileIllust__image {
  animation: shake 0.8s step-end 0.2s infinite;
}

.NavigationStar__item {
  animation: spinY 5s linear infinite;
}

.Character__line::after {
  animation: spinY 3s linear infinite;
}

.-fadeIn,
.-fadeIn-blur,
.-fadeIn__up,
.-fadeIn__down,
.-fadeIn__left,
.-fadeIn__right {
  opacity: 0;
  scale: 1.1;
  transition: scale 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
}
:where(.-fadeIn,
.-fadeIn-blur,
.-fadeIn__up,
.-fadeIn__down,
.-fadeIn__left,
.-fadeIn__right).-inview, .-inview :where(.-fadeIn,
.-fadeIn-blur,
.-fadeIn__up,
.-fadeIn__down,
.-fadeIn__left,
.-fadeIn__right) {
  opacity: 1;
  scale: 1;
  transition: scale 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
}

@media screen and (max-width: 768px) {
  .-fadeIn__SP,
  .-fadeIn__upSP,
  .-fadeIn__downSP,
  .-fadeIn__leftSP,
  .-fadeIn__rightSP {
    opacity: 0;
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__SP,
  .-fadeIn__upSP,
  .-fadeIn__downSP,
  .-fadeIn__leftSP,
  .-fadeIn__rightSP).-inview, .-inview :where(.-fadeIn__SP,
  .-fadeIn__upSP,
  .-fadeIn__downSP,
  .-fadeIn__leftSP,
  .-fadeIn__rightSP) {
    opacity: 1;
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__upTB,
  .-fadeIn__downTB,
  .-fadeIn__leftTB,
  .-fadeIn__rightTB {
    opacity: 0;
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__upTB,
  .-fadeIn__downTB,
  .-fadeIn__leftTB,
  .-fadeIn__rightTB).-inview, .-inview :where(.-fadeIn__upTB,
  .-fadeIn__downTB,
  .-fadeIn__leftTB,
  .-fadeIn__rightTB) {
    opacity: 1;
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}

.-fadeIn-blur {
  filter: blur(20px);
  opacity: 0;
  transition: filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
}
:where(.-fadeIn-blur).-inview, .-inview :where(.-fadeIn-blur) {
  filter: blur(0);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .-fadeIn-blurSP {
    filter: blur(20px);
    opacity: 0;
    transition: filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn-blurSP).-inview, .-inview :where(.-fadeIn-blurSP) {
    filter: blur(0);
    opacity: 1;
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn-blurTB {
    filter: blur(20px);
    opacity: 0;
    transition: filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s;
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn-blurTB).-inview, .-inview :where(.-fadeIn-blurTB) {
    filter: blur(0);
    opacity: 1;
  }
}

.-fadeIn-blurLeft {
  filter: blur(10px);
  opacity: 0;
  transform: translate(-50px, 0);
  transition: opacity 0.8s ease-in-out 0.4s, filter 0.8s ease-in-out 0.4s, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}
:where(.-fadeIn-blurLeft).-inview, .-inview :where(.-fadeIn-blurLeft) {
  filter: blur(0);
  opacity: 1;
  transform: translate(0, 0);
}

.-fadeIn-blurRight {
  filter: blur(10px);
  opacity: 0;
  transform: translate(50px, 0);
  transition: opacity 0.8s ease-in-out 0.4s, filter 0.8s ease-in-out 0.4s, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}
:where(.-fadeIn-blurRight).-inview, .-inview :where(.-fadeIn-blurRight) {
  filter: blur(0);
  opacity: 1;
  transform: translate(0, 0);
}

.-fadeIn__up {
  transform: translate(0, 50px);
}
:where(.-fadeIn__up).-inview, .-inview :where(.-fadeIn__up) {
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  .-fadeIn__upSP {
    transform: translate(0, 50px);
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__upSP).-inview, .-inview :where(.-fadeIn__upSP) {
    transform: translate(0, 0);
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__upTB {
    transform: translate(0, 50px);
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__upTB).-inview, .-inview :where(.-fadeIn__upTB) {
    transform: translate(0, 0);
  }
}

.-fadeIn__down {
  transform: translate(0, -50px);
}
:where(.-fadeIn__down).-inview, .-inview :where(.-fadeIn__down) {
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  .-fadeIn__downSP {
    transform: translate(0, -50px);
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__downSP).-inview, .-inview :where(.-fadeIn__downSP) {
    transform: translate(0, 0);
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__downTB {
    transform: translate(0, -50px);
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__downTB).-inview, .-inview :where(.-fadeIn__downTB) {
    transform: translate(0, 0);
  }
}

.-fadeIn__left {
  transform: translate(-50px, 0);
}
:where(.-fadeIn__left).-inview, .-inview :where(.-fadeIn__left) {
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  .-fadeIn__leftSP {
    transform: translate(-50px, 0);
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__leftSP).-inview, .-inview :where(.-fadeIn__leftSP) {
    transform: translate(0, 0);
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__leftTB {
    transform: translate(-50px, 0);
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__leftTB).-inview, .-inview :where(.-fadeIn__leftTB) {
    transform: translate(0, 0);
  }
}

.-fadeIn__right {
  transform: translate(50px, 0);
}
:where(.-fadeIn__right).-inview, .-inview :where(.-fadeIn__right) {
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  .-fadeIn__rightSP {
    transform: translate(50px, 0);
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__rightSP).-inview, .-inview :where(.-fadeIn__rightSP) {
    transform: translate(0, 0);
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__rightTB {
    transform: translate(50px, 0);
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__rightTB).-inview, .-inview :where(.-fadeIn__rightTB) {
    transform: translate(0, 0);
  }
}

.-fadeIn__zoom {
  opacity: 0;
  transform: scale(1.2);
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.4s cubic-bezier(0.25, 0.25, 0.75, 0.75) 0.4s !important;
}
:where(.-fadeIn__zoom).-inview, .-inview :where(.-fadeIn__zoom) {
  opacity: 1;
  transform: scale(1);
}

@media screen and (max-width: 768px) {
  .-fadeIn__zoomSP {
    opacity: 0;
    transform: scale(1.2);
    transition: transform 1s ease-out 0.4s, opacity 0.4s ease-out 0.4s !important;
  }
}
@media screen and (max-width: 768px) {
  :where(.-fadeIn__zoomSP).-inview, .-inview :where(.-fadeIn__zoomSP) {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (min-width: 769px) {
  .-fadeIn__zoomTB {
    opacity: 0;
    transform: scale(1.2) !important;
    transform-origin: center;
    transition: transform 1s ease-out 0.4s, opacity 0.4s ease-out 0.4s !important;
  }
}
@media screen and (min-width: 769px) {
  :where(.-fadeIn__zoomTB).-inview, .-inview :where(.-fadeIn__zoomTB) {
    opacity: 1;
    transform: scale(1) !important;
  }
}

.-clip__x {
  clip-path: inset(0 5% 0 5%);
  opacity: 0;
  transition: clip-path 1s ease-out 0.4s, opacity 0.4s ease-out 0.4s !important;
}
:where(.-clip__x).-inview, .-inview :where(.-clip__x) {
  clip-path: inset(0);
  opacity: 1;
}

.-clip__y {
  clip-path: inset(5% 0 5% 0);
  opacity: 0;
  transition: clip-path 1s ease-out 0.4s, opacity 0.4s ease-out 0.4s !important;
}
:where(.-clip__y).-inview, .-inview :where(.-clip__y) {
  clip-path: inset(0);
  opacity: 1;
}

.-clip__left,
.-clip__right {
  contain: paint;
  position: relative;
}
.-clip__left::before,
.-clip__right::before {
  background: #ffeaf1;
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(0);
  transition: transform 1s ease-out 0.4s;
  z-index: 10;
}

.-clip__left.-inview::before,
.-inview .-clip__left::before {
  transform: translateX(100%);
}

.-clip__right.-inview::before,
.-inview .-clip__right::before {
  transform: translateX(-100%);
}

.-delay__lv1 {
  animation-delay: 0.5s !important;
  transition-delay: 0.5s !important;
}

.-delay__lv2 {
  animation-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}

.-delay__lv3 {
  animation-delay: 0.7s !important;
  transition-delay: 0.7s !important;
}

.-delay__lv4 {
  animation-delay: 0.8s !important;
  transition-delay: 0.8s !important;
}

.-delay__lv5 {
  animation-delay: 0.9s !important;
  transition-delay: 0.9s !important;
}

.-delay__lv9 {
  animation-delay: 1.3s !important;
  transition-delay: 1.3s !important;
}

.-delay__lv10 {
  animation-delay: 1.4s !important;
  transition-delay: 1.4s !important;
}

@media screen and (max-width: 768px) {
  .-delay__lv1SP {
    animation-delay: 0.5s !important;
    transition-delay: 0.5s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv2SP {
    animation-delay: 0.6s !important;
    transition-delay: 0.6s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv3SP {
    animation-delay: 0.7s !important;
    transition-delay: 0.7s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv4SP {
    animation-delay: 0.8s !important;
    transition-delay: 0.8s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv5SP {
    animation-delay: 0.9s !important;
    transition-delay: 0.9s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv9SP {
    animation-delay: 1.3s !important;
    transition-delay: 1.3s !important;
  }
}

@media screen and (max-width: 768px) {
  .-delay__lv10SP {
    animation-delay: 1.4s !important;
    transition-delay: 1.4s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv1TB {
    animation-delay: 0.5s !important;
    transition-delay: 0.5s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv2TB {
    animation-delay: 0.6s !important;
    transition-delay: 0.6s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv3TB {
    animation-delay: 0.7s !important;
    transition-delay: 0.7s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv4TB {
    animation-delay: 0.8s !important;
    transition-delay: 0.8s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv5TB {
    animation-delay: 0.9s !important;
    transition-delay: 0.9s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv9TB {
    animation-delay: 1.3s !important;
    transition-delay: 1.3s !important;
  }
}

@media screen and (min-width: 769px) {
  .-delay__lv10TB {
    animation-delay: 1.4s !important;
    transition-delay: 1.4s !important;
  }
}

@keyframes shake {
  0% {
    rotate: -1deg;
  }
  50% {
    rotate: 1deg;
  }
  100% {
    rotate: -1deg;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinY {
  0% {
    rotate: y 0deg;
  }
  33% {
    rotate: y 1turn;
  }
  100% {
    rotate: y 1turn;
  }
}
@keyframes bgScroll-SP {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -71.7948717949vw 71.7948717949vw;
  }
}
@keyframes bgScroll-PC {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -370px 370px;
  }
}
#new-friends .Main {
  /*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model and set borders */
  /* ============================================ */
}
#new-friends .Main *,
#new-friends .Main ::before,
#new-friends .Main ::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}
#new-friends .Main {
  /**
   * Render the `main` element consistently in IE.
   */
}
#new-friends .Main main {
  display: block;
}
#new-friends .Main {
  /* Vertical rhythm */
  /* ============================================ */
}
#new-friends .Main p,
#new-friends .Main table,
#new-friends .Main blockquote,
#new-friends .Main address,
#new-friends .Main pre,
#new-friends .Main iframe,
#new-friends .Main form,
#new-friends .Main figure,
#new-friends .Main dl {
  margin: 0;
}
#new-friends .Main {
  /* Headings */
  /* ============================================ */
}
#new-friends .Main h1,
#new-friends .Main h2,
#new-friends .Main h3,
#new-friends .Main h4,
#new-friends .Main h5,
#new-friends .Main h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}
#new-friends .Main h1 {
  font-weight: bold;
}
#new-friends .Main {
  /* Image */
  /* ============================================ */
}
#new-friends .Main img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}
#new-friends .Main svg {
  display: block;
  height: auto;
  width: 100%;
}
#new-friends .Main {
  /* Lists (enumeration) */
  /* ============================================ */
}
#new-friends .Main ul,
#new-friends .Main ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#new-friends .Main {
  /* Lists (definition) */
  /* ============================================ */
}
#new-friends .Main dt {
  font-weight: normal;
}
#new-friends .Main dd {
  margin-left: 0;
}
#new-friends .Main {
  /* Grouping content */
  /* ============================================ */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
}
#new-friends .Main hr {
  border-top-width: 1px;
  box-sizing: content-box; /* 1 */
  clear: both;
  color: inherit;
  height: 0; /* 1 */
  margin: 0;
  overflow: visible; /* 2 */
}
#new-friends .Main {
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
}
#new-friends .Main pre {
  font-family: monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#new-friends .Main address {
  font-style: inherit;
}
#new-friends .Main {
  /* Text-level semantics */
  /* ============================================ */
  /**
   * Remove the gray background on active links in IE 10.
   */
}
#new-friends .Main a {
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
}
#new-friends .Main {
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
}
#new-friends .Main abbr[title] {
  text-decoration: underline; /* 2 */
}
#new-friends .Main {
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
}
#new-friends .Main b,
#new-friends .Main strong {
  font-weight: 600;
}
#new-friends .Main {
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
}
#new-friends .Main code,
#new-friends .Main kbd,
#new-friends .Main samp {
  font-family: monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#new-friends .Main {
  /**
   * Add the correct font size in all browsers.
   */
}
#new-friends .Main small {
  font-size: 80%;
  font-weight: normal;
}
#new-friends .Main {
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
}
#new-friends .Main sub,
#new-friends .Main sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
#new-friends .Main sub {
  bottom: -0.25em;
}
#new-friends .Main sup {
  top: -0.5em;
}
#new-friends .Main u {
  text-decoration: underline;
}
#new-friends .Main {
  /* Embedded content */
  /* ============================================ */
  /**
   * Prevent vertical alignment issues.
   */
}
#new-friends .Main img,
#new-friends .Main embed,
#new-friends .Main object,
#new-friends .Main iframe {
  vertical-align: bottom;
}
#new-friends .Main {
  /* Forms */
  /* ============================================ */
  /**
   * Reset form fields to make them styleable
   */
}
#new-friends .Main button,
#new-friends .Main input,
#new-friends .Main optgroup,
#new-friends .Main select,
#new-friends .Main textarea {
  appearance: none;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: inherit;
  vertical-align: middle;
}
#new-friends .Main {
  /**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */
}
#new-friends .Main {
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
}
#new-friends .Main button,
#new-friends .Main input {
  /* 1 */
  overflow: visible;
}
#new-friends .Main {
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
}
#new-friends .Main button,
#new-friends .Main select {
  /* 1 */
  text-transform: none;
}
#new-friends .Main {
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
}
#new-friends .Main button,
#new-friends .Main [type=button],
#new-friends .Main [type=reset],
#new-friends .Main [type=submit] {
  appearance: none;
  cursor: pointer;
}
#new-friends .Main button[disabled],
#new-friends .Main [type=button][disabled],
#new-friends .Main [type=reset][disabled],
#new-friends .Main [type=submit][disabled] {
  cursor: default;
}
#new-friends .Main {
  /**
   * Remove the inner border and padding in Firefox.
   */
}
#new-friends .Main button::-moz-focus-inner,
#new-friends .Main [type=button]::-moz-focus-inner,
#new-friends .Main [type=reset]::-moz-focus-inner,
#new-friends .Main [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
#new-friends .Main {
  /**
   * Restore the focus styles unset by the previous rule.
   */
}
#new-friends .Main button:-moz-focusring,
#new-friends .Main [type=button]:-moz-focusring,
#new-friends .Main [type=reset]:-moz-focusring,
#new-friends .Main [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
#new-friends .Main {
  /**
   * Remove arrow in IE10 & IE11
   */
}
#new-friends .Main select::-ms-expand {
  display: none;
}
#new-friends .Main {
  /**
   * Remove padding
   */
}
#new-friends .Main option {
  padding: 0;
}
#new-friends .Main {
  /**
   * Reset to invisible
   */
}
#new-friends .Main fieldset {
  margin: 0;
  min-width: 0;
  padding: 0;
}
#new-friends .Main {
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
}
#new-friends .Main legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
#new-friends .Main {
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
}
#new-friends .Main progress {
  vertical-align: baseline;
}
#new-friends .Main {
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
}
#new-friends .Main textarea {
  overflow: auto;
}
#new-friends .Main {
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
}
#new-friends .Main [type=number]::-webkit-inner-spin-button,
#new-friends .Main [type=number]::-webkit-outer-spin-button {
  height: auto;
}
#new-friends .Main {
  /**
   * 1. Correct the outline style in Safari.
   */
}
#new-friends .Main [type=search] {
  outline-offset: -2px; /* 1 */
}
#new-friends .Main {
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
}
#new-friends .Main {
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
}
#new-friends .Main ::-webkit-file-upload-button {
  font: inherit; /* 2 */
}
#new-friends .Main ::-ms-clear {
  visibility: hidden;
}
#new-friends .Main {
  /**
   * Clickable labels
   */
}
#new-friends .Main label[for] {
  cursor: pointer;
}
#new-friends .Main {
  /* Interactive */
  /* ============================================ */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
}
#new-friends .Main details {
  display: block;
}
#new-friends .Main {
  /*
   * Add the correct display in all browsers.
   */
}
#new-friends .Main summary {
  display: list-item;
}
#new-friends .Main {
  /*
   * Remove outline for editable content.
   */
}
#new-friends .Main [contenteditable] {
  outline: none;
}
#new-friends .Main {
  /* Table */
  /* ============================================ */
}
#new-friends .Main table {
  border-collapse: collapse;
  border-spacing: 0;
}
#new-friends .Main caption {
  text-align: left;
}
#new-friends .Main td,
#new-friends .Main th {
  padding: 0;
  vertical-align: top;
}
#new-friends .Main th {
  font-weight: bold;
  text-align: left;
}
#new-friends .Main {
  /* Misc */
  /* ============================================ */
  /**
   * Add the correct display in IE 10+.
   */
}
#new-friends .Main template {
  display: none;
}
#new-friends .Main {
  /**
   * Add the correct display in IE 10.
   */
}
#new-friends .Main [hidden] {
  display: none;
}
#new-friends .Main {
  /**
   * remove placeholder color
   */
}
#new-friends .Main :focus::placeholder {
  color: transparent;
}

.-align-center {
  text-align: center;
}

@media screen and (min-width: 769px) {
  .-align-centerTB {
    text-align: center;
  }
}

.-align-left {
  text-align: left;
}

.-align-right {
  text-align: right;
}

.-hide {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .-hide-SP {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .-hide-TB {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .-hide-PC {
    display: none !important;
  }
}

.-weight-light {
  font-weight: 300;
}

.-weight-regular {
  font-weight: 400;
}

.-weight-bold {
  font-weight: 700;
}

:root {
  --clientWidth: var(--jsClientWidth, 100vw);
  --clientHeight: var(--jsClientHeight, 100vh);
}

#new-friends .Main {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  #new-friends .Main .Logo {
    padding-block: 15.3846153846vw 5.1282051282vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Logo {
    padding-block: 66px 50px;
  }
}
#new-friends .Main .Logo__image {
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Logo__image {
    width: 28.7179487179vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Logo__image {
    width: 153px;
  }
}

#new-friends .Main {
  contain: paint;
}
@supports not (contain: paint) {
  #new-friends .Main {
    overflow: hidden;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main {
    min-width: 1000px;
  }
}
#new-friends .MainVisual {
  background-color: #ffeaf1;
  overflow: hidden;
  position: relative;
}

.MainVisual__image {
  display: block;
  width: 100%;
}

#new-friends .Main .Navigation {
  background-color: #ffeaf1;
  position: relative;
}
#new-friends .Main .Navigation__list {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Navigation__list {
    gap: 7.6923076923vw;
    padding-block: 15.3846153846vw 21.7948717949vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Navigation__list {
    gap: 154px;
    padding-block: 150px;
  }
}
#new-friends .Main .Navigation__item {
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  #new-friends .Main .Navigation__link {
    opacity: 1;
    transition: opacity 0.3s ease !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  #new-friends .Main .Navigation__link:hover, a:hover #new-friends .Main .Navigation__link {
    opacity: 0.7 !important;
  }
}
#new-friends .Main .Navigation__image {
  display: block;
  opacity: 1;
  width: auto;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Navigation__image {
    height: 32.0512820513vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Navigation__image {
    height: 250px;
  }
}
#new-friends .Main .Navigation__text {
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Navigation__text {
    height: 3.0769230769vw;
    margin-block-start: 0.5128205128vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Navigation__text {
    height: 24px;
    margin-block-start: 3px;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Navigation__text[src*=character_txt_02] {
    height: 2.5641025641vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Navigation__text[src*=character_txt_02] {
    height: 19px;
  }
}
#new-friends .Main .NavigationStar {
  display: flex;
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .NavigationStar {
    gap: 2.0512820513vw;
    inset: auto 7.6923076923vw 0 auto;
    translate: 0 50%;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .NavigationStar {
    gap: 14px;
    inset: auto 0 0 auto;
    translate: -100% 50%;
  }
}
#new-friends .Main .NavigationStar__item {
  aspect-ratio: 1/1;
  background: url("/visee/resources/images/vsr/new-friends/bg_star_02.svg") no-repeat left top/contain;
  display: block;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .NavigationStar__item {
    width: 7.6923076923vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .NavigationStar__item {
    width: 52px;
  }
}

@media screen and (max-width: 768px) {
  #new-friends .Main .Character {
    display: grid;
    gap: 5.1282051282vw;
    padding-block: 12.8205128205vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character {
    padding-block: 30px 50px;
  }
}
#new-friends .Main .Character__row {
  display: grid;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__row {
    background: #fffafc;
    padding-block-start: 10.2564102564vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__row {
    align-items: center;
    background: linear-gradient(to bottom, #fff 50px, #fffafc 50px, #fffafc calc(100% - 50px), #fff calc(100% - 50px));
    gap: 100px;
    grid-template: "head body"/335px auto;
    justify-content: center;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__row:nth-child(even) {
    grid-template: "body head"/auto 335px;
    padding-inline-start: 100px;
  }
}
#new-friends .Main .Character__head {
  align-content: center;
  background-color: #fff;
  display: grid;
  justify-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__head {
    border-radius: 5.1282051282vw;
    box-shadow: 0 0 1.2820512821vw rgba(255, 204, 245, 0.4);
    margin-inline: 5.1282051282vw;
    padding-block: 7.6923076923vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__head {
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(255, 204, 245, 0.4);
    grid-area: head;
    height: 404px;
    width: 335px;
  }
}
#new-friends .Main .Character__image {
  display: block;
  width: auto;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__image {
    height: 64.1025641026vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__image {
    height: 250px;
  }
}
#new-friends .Main .Character__name {
  color: #ff528c;
  font-style: italic;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__name {
    font-size: 6.1538461538vw;
    margin-block: 0.7692307692vw 3.8461538462vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__name {
    font-size: 26px;
    margin-block: 3px 20px;
  }
}
#new-friends .Main .Character__lead {
  color: inherit;
  font-weight: 400;
  letter-spacing: 0.125em;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__lead {
    font-size: 3.8461538462vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__lead {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__body {
    padding-block: 7.6923076923vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__body {
    grid-area: body;
  }
}
#new-friends .Main .Character__item {
  align-items: center;
  display: grid;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__item {
    gap: 3.0769230769vw;
    grid-template: "head icon body"/8em 3.0769230769vw fit-content(100%);
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__item {
    gap: 24px;
    grid-template: "head icon body"/8em 12px fit-content(100%);
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main #cat .Character__item {
    grid-template-columns: 10.5em 3.0769230769vw fit-content(100%);
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main #cat .Character__item {
    grid-template-columns: 10.5em 12px fit-content(100%);
  }
}
#new-friends .Main .Character__line {
  display: grid;
  grid-area: icon;
  place-items: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__line {
    padding-block: 3.2051282051vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__line {
    padding-block: 20px;
  }
}
#new-friends .Main .Character__line::before, #new-friends .Main .Character__line::after {
  content: "";
  display: block;
}
#new-friends .Main .Character__line::before {
  background-color: #ffeaf1;
  border-radius: 100vw;
  inset: 0 auto;
  position: absolute;
  width: 1px;
}
#new-friends .Main .Character__line::after {
  background: url("/visee/resources/images/vsr/new-friends/bg_star_02.svg") no-repeat left top/contain;
  position: relative;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__line::after {
    height: 3.3333333333vw;
    translate: -0.1282051282vw 0;
    width: 3.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__line::after {
    height: 13px;
    translate: -0.5px 0;
    width: 13px;
  }
}
#new-friends .Main .Character__title {
  color: #ff528c;
  font-feature-settings: "palt";
  font-weight: 500;
  letter-spacing: 0.095em;
  text-align: end;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__title {
    font-size: 3.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__title {
    font-size: 15px;
    grid-area: head;
  }
}
#new-friends .Main .Character__text {
  color: inherit;
  font-feature-settings: "palt";
  font-weight: 400;
  letter-spacing: 0.095em;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Character__text {
    font-size: 3.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Character__text {
    font-size: 14px;
    grid-area: body;
  }
}

#new-friends .Main .Profile {
  background: #fef1f5 url("/visee/resources/images/vsr/new-friends/profile_bg_01.webp") repeat left top;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile {
    background-size: 71.7948717949vw auto;
    padding-block: 21.7948717949vw 17.9487179487vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile {
    background-size: 370px auto;
    padding-block: 170px;
  }
}
#new-friends .Main .Profile__inner {
  align-content: center;
  background: no-repeat left bottom/cover;
  display: grid;
  margin-inline: auto;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__inner {
    background-image: url("/visee/resources/images/vsr/new-friends/profile_bg_02_sp.svg");
    height: 104.8717948718vw;
    width: 80.7692307692vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__inner {
    background-image: url("/visee/resources/images/vsr/new-friends/profile_bg_02_pc.svg");
    height: 476px;
    width: 580px;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileTitle {
    margin-block-end: 5.1282051282vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileTitle {
    margin-block-end: 40px;
  }
}
#new-friends .Main .ProfileTitle__image {
  display: block;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileTitle__image {
    height: 4.6153846154vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileTitle__image {
    height: 34px;
  }
}
#new-friends .Main .Profile__name {
  font-weight: 100;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__name {
    font-size: 3.5897435897vw;
    margin-block-end: 3.0769230769vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__name {
    font-size: 18px;
    margin-block-end: 15px;
  }
}
#new-friends .Main .Profile__name i {
  font-weight: 500;
}
#new-friends .Main .Profile__text {
  line-height: 2;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__text {
    font-feature-settings: "palt";
    font-size: 3.0769230769vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__text {
    font-size: 15px;
  }
}
#new-friends .Main .Profile__list {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__list {
    gap: 6.9230769231vw;
    margin-block-start: 6.9230769231vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__list {
    gap: 30px;
    margin-block-start: 30px;
  }
}
#new-friends .Main .Profile__link {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  #new-friends .Main .Profile__link {
    opacity: 1;
    transition: opacity 0.3s ease !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  #new-friends .Main .Profile__link:hover, a:hover #new-friends .Main .Profile__link {
    opacity: 0.7 !important;
  }
}
#new-friends .Main .Profile__image {
  display: block;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__image-x {
    width: 4.6153846154vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__image-x {
    width: 33px;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .Profile__image-instagram {
    width: 5.641025641vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .Profile__image-instagram {
    width: 40px;
  }
}
#new-friends .Main .ProfileIllust {
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileIllust-bunny {
    inset: -14.358974359vw -5.641025641vw auto auto;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileIllust-bunny {
    inset: -101px -74px auto auto;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileIllust-cat {
    inset: auto auto -4.8717948718vw -2.5641025641vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileIllust-cat {
    inset: auto auto -71px -85px;
  }
}
#new-friends .Main .ProfileIllust__image {
  display: block;
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileIllust__image-bunny {
    width: 23.8461538462vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileIllust__image-bunny {
    width: 186px;
  }
}
@media screen and (max-width: 768px) {
  #new-friends .Main .ProfileIllust__image-cat {
    width: 28.9743589744vw;
  }
}
@media screen and (min-width: 769px) {
  #new-friends .Main .ProfileIllust__image-cat {
    width: 227px;
  }
}