@import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
@layer project {
  @layer parts;
  @layer content;
}
@layer project {
  :root {
    --color-green: #6CC24A;
    --color-navy: #024287;
    --color-main: #1882C4;
    --color-sub: #FE573F;
    --color-border-main: rgba(24, 130, 196, 0.5);
    --color-border-sub: rgba(254, 87, 63, 0.5);
    --initial-color: #333333;
    --initial-bgColor: #F4FAFF;
    /* be adjust */
    --foldOverlay: linear-gradient(to bottom, rgba(244, 250, 255, 0) 0%, var(--initial-bgColor) 100%), -webkit-linear-gradient(top, rgba(244, 250, 255, 0) 0%, var(--initial-bgColor) 100%);
  }
  @layer parts {
    /* font */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* animation */
    @keyframes example {
      from {
        transform: 0 0;
      }
      to {
        transform: 1 1;
      }
    }
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* common */
    body {
      background-image: url("/image/line.png");
    }
    ._z:not(.m, .s, .x) :where(._c, ._i) {
      width: calc((100dvw - 1700px) / 2);
    }
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* pj */
    /* _ */
    /* js */
    /* m */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* form */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* util */
    ul.u > li {
      padding: 0.5em 0;
    }
    ul.u > li:not(:last-of-type) {
      border: 0;
    }
    .u-shiftMemberLogo img {
      height: 0.8em;
      border-radius: 0;
      object-fit: contain;
      width: unset;
      aspect-ratio: unset;
      border: 0;
      margin: 0 0.5em;
    }
    .u-userList li {
      display: -webkit-flex;
      -webkit-flex-direction: column;
      display: flex;
      flex-direction: column;
    }
    .u-userList .e-user em {
      font-size: 1.1em;
      margin-bottom: 0;
    }
    .u-userList .u-shiftMemberLogo {
      text-align: center;
      margin-top: auto;
    }
    .u-sideMenu {
      margin-top: 1em;
    }
    .u-manages a.elect {
      border: solid var(--color-green) 1px;
      border-radius: 0.5em;
      color: var(--color-green);
    }
    .u-manages a.elect::before {
      content: url("/image/like.svg");
    }
    .u-manages a.add {
      border: solid #3C9CFC 1px;
      border-radius: 0.5em;
      color: #3C9CFC;
      margin-left: 0.5em;
    }
    .u-manages a.add::before {
      content: url("/image/reply.svg");
    }
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* embed */
    .e-contentHeader {
      background-color: white;
      border-radius: 1em;
      padding: 1em;
    }
    .e-overlayMenu {
      background-color: white;
      overflow: auto;
    }
    .e-sideMenu {
      color: var(--color-main-on);
      background-color: var(--color-main);
      border-radius: 1em;
      padding: 1.5em;
      margin-bottom: 1em;
    }
    .e-sideMenu header {
      margin: 1.5em auto;
    }
    .e-sideMenu header > a {
      display: block;
      margin: 1em 0;
      padding: 0 1em;
    }
    .e-sideMenu nav > * {
      border-bottom: solid white 1px;
      display: block;
      padding: 1em;
    }
    .e-sideMenu nav > *:first-child {
      border-top: solid white 1px;
    }
    .e-sideMenu nav > a[href] {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      -webkit-align-items: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .e-sideMenu nav > a[href]::after {
      font-family: "FontAwesome solid";
      content: "\f0da";
      vertical-align: baseline;
    }
    .e-sideMenu nav .tag {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      -webkit-align-items: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .e-sideMenu nav .tag:hover {
      opacity: 0.7;
    }
    .e-sideMenu nav .tag::after {
      font-family: "FontAwesome solid";
      content: "\f0d7";
      vertical-align: baseline;
    }
    .e-sideMenu nav .tag.open::after {
      font-family: "FontAwesome solid";
      content: "\f0d8";
      vertical-align: baseline;
    }
    .e-sideMenu nav .tag + div {
      font-size: 0.9em;
      display: none;
    }
    .e-sideMenu nav .tag + div dl {
      margin: 1em 0;
    }
    .e-sideMenu nav .tag + div dl dt {
      font-weight: bold;
    }
    .e-sideMenu nav .tag + div dl dd {
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      display: flex;
      flex-wrap: wrap;
      gap: 0.35em;
    }
    .e-sideMenu nav .tag + div dl dd > * {
      color: var(--color-main);
      background-color: var(--color-main-on);
      border: 1px solid var(--color-border-main);
      flex-grow: 1;
      border: solid white 1px;
      border-radius: 2px;
      padding: 0.1em 0.25em;
      text-align: center;
    }
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* tpl */
    .t-breadcrumb {
      display: none;
    }
    .t-siteFooter {
      background-color: unset;
    }
    .t-siteFooter .copyright {
      background-color: unset;
      color: var(--color-main);
    }
    .t-siteHeader > ._flex {
      align-items: center;
      padding: 0.5em;
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      max-width: 1620px;
      margin-right: auto;
      margin-left: auto;
      gap: 0;
    }
    .t-siteHeader > ._flex h1 {
      margin-right: auto;
    }
    .t-siteHeader > ._flex h1 img {
      width: 220px;
    }
    @media (max-width: 599px) {
      .t-siteHeader > ._flex h1 img {
        width: 150px;
      }
    }
    .t-siteHeader > ._flex > :where(a) {
      padding: 0 1rem;
      margin-left: 1rem;
    }
    @media (max-width: 599px) {
      .t-siteHeader > ._flex > :where(a) {
        font-size: 0;
        aspect-ratio: 1;
        padding: 0 0.5rem;
        margin-left: 0.5rem;
      }
    }
    .t-siteHeader > ._flex > :where(a)::before {
      font-size: 1rem;
      margin: 0;
    }
    .t-siteHeader > ._flex [href*=login]::before {
      font-family: "FontAwesome solid";
      content: "\f007";
      vertical-align: baseline;
      margin-right: 0.35rem;
    }
    .t-siteHeader > ._flex [href*=register]::before {
      font-family: "FontAwesome solid";
      content: "\f0fe";
      vertical-align: baseline;
      margin-right: 0.35rem;
    }
    .t-siteHeader > ._flex .notification {
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .t-siteHeader .overlayMenuOpenClose {
      display: grid;
      align-items: center;
      border-radius: 0.5rem;
    }
    @media (min-width: 600px) {
      .t-siteHeader .overlayMenuOpenClose {
        display: none;
      }
    }
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _component */
  }
  @layer content {
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* freespace */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _backend */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _blog */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _community */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _event */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _knowledge */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _mypage */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _purchase */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _stc */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _stp */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _str */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _sitetop */
    @import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
    /* _area */
    /* _auth */
    /* _bank */
    /* _blog/_blogpost */
    /* _blog/_blogmanage */
    /* _community/_community */
    /* _community/_topic */
    /* _community/_event */
    /* _community/_member */
    /* _community/_comment */
    /* _community/_communitymanage */
    /* _earnings */
    /* _event/_event */
    /* _event/_eventmanage */
    /* _knowledge/_knowledge */
    ._knowledge._knowledge._info .js-answerForm {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 17, 35, 0.7);
      display: grid;
      align-items: center;
      justify-content: center;
      z-index: 11;
    }
    ._knowledge._knowledge._info .js-answerForm > span {
      content: "";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 2;
      cursor: pointer;
    }
    ._knowledge._knowledge._info .js-answerForm form {
      display: block;
      background-color: white;
      border-radius: 1em;
      padding: 1em;
      position: relative;
      z-index: 2;
    }
    ._knowledge._knowledge._info .js-answerForm form label.required {
      display: none;
    }
    ._knowledge._knowledge._info .js-answerForm form .js-answerFormClose {
      display: block;
      text-align: right;
      cursor: pointer;
      margin-bottom: 0.5em;
    }
    ._knowledge._knowledge._info .js-answerForm form .js-answerFormClose::before {
      font-family: "FontAwesome solid";
      content: "\f057";
      vertical-align: baseline;
      font-size: 1.5em;
      color: var(--color-navy);
    }
    ._knowledge._knowledge._info .js-answerForm form [type=submit] {
      background-color: var(--color-navy);
      border-radius: 0.5em;
      width: 12em;
      color: white;
      text-align: center;
      padding: 0.25em;
      display: table;
      margin: auto;
    }
    ._knowledge._knowledge._info .js-answerForm form [type=submit]::after {
      display: none;
    }
    ._knowledge._knowledge._info main article {
      background-color: white;
      border-radius: 1em;
      padding: 1.5em 2em;
    }
    ._knowledge._knowledge._info main article > header {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      display: flex;
      justify-content: space-between;
    }
    ._knowledge._knowledge._info main article > header .comments {
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      gap: 0.25em;
      font-size: 1.2em;
    }
    ._knowledge._knowledge._info main article h2 {
      font-size: 1.2em;
      margin: 0.6em 0;
    }
    ._knowledge._knowledge._info main article .u-btn {
      cursor: pointer;
    }
    ._knowledge._knowledge._info main .answers .answer {
      border: solid var(--color-border-gray) 1px;
      border-width: 0 0 1px;
      padding-right: 0;
      padding-left: 0;
    }
    ._knowledge._knowledge._info main .answers .answer:first-of-type {
      border-top: solid var(--color-border-gray) 1px;
    }
    ._knowledge._knowledge._info main .answers .answer header {
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      gap: 1em;
    }
    ._knowledge._knowledge._info main .answers .answer header time {
      display: none;
    }
    ._knowledge._knowledge._info main .answers .answer header .bestAnswer {
      background-color: var(--color-green);
      color: white;
      font-weight: bold;
      padding: 0 0.5em;
      border-radius: 0.2em;
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      gap: 0.25em;
    }
    /* _knowledge/_knowledgemanage */
    /* _mypage/_config */
    /* _notification */
    /* _purchase/_cart */
    /* _purchase/_purchasemanage */
    /* _questionnaire */
    /* _register */
    /* _reset_password */
    /* _sale */
    /* _stc/_case */
    /* _stc/_casemanage */
    /* _stp/_product */
    /* _stp/_productmanage */
    /* _str/_reserve */
    /* _str/_reservemanage */
    /* _shipping */
    /* _sitetop/_index */
    ._sitetop._index ._f .mv {
      max-width: 1410px;
      margin-right: auto;
      margin-left: auto;
      height: 600px;
      background-image: url("/image/mv.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ._sitetop._index ._f .mv > div {
      width: 520px;
    }
    @media (min-width: 600px) {
      ._sitetop._index ._f .mv > div {
        max-width: 35vw;
      }
    }
    ._sitetop._index ._f .mv > div {
      text-align: center;
    }
    @media (max-width: 599px) {
      ._sitetop._index ._f .mv > div h1 {
        padding: 0 2em;
      }
    }
    ._sitetop._index ._f .mv > div h1 img {
      width: 520px;
    }
    ._sitetop._index ._f .mv > div p {
      margin-top: 1em;
      word-break: keep-all;
    }
    @media (max-width: 599px) {
      ._sitetop._index ._f .mv > div p {
        font-size: 0.9em;
      }
    }
    ._sitetop._index ._f > section {
      padding: 2.5vw 1em;
    }
    ._sitetop._index ._f > section h2 {
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: flex-end;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 0.25em;
      font-size: 2em;
      font-family: "Mogra", sans-serif;
      font-weight: normal;
      line-height: 1;
      margin-bottom: 1em;
    }
    ._sitetop._index ._f > section h2.latest {
      color: var(--color-green);
    }
    ._sitetop._index ._f > section h2.hot {
      color: var(--color-sub);
    }
    ._sitetop._index ._f > section .more {
      border-radius: 0.25em;
      display: table;
      margin: 2em auto;
      padding: 0.5em 1em;
      color: white;
    }
    ._sitetop._index ._f > section .more::before {
      font-family: "FontAwesome solid";
      content: "\f0fe";
      vertical-align: baseline;
      margin-right: 0.5em;
    }
    ._sitetop._index ._f > section .more.latest {
      background-color: var(--color-green);
    }
    ._sitetop._index ._f > section .more.hot {
      background-color: var(--color-sub);
    }
    ._sitetop._index ._f > section .more.news {
      background-color: var(--color-navy);
    }
    ._sitetop._index ._f > section.news {
      max-width: 820px;
      margin-right: auto;
      margin-left: auto;
    }
    ._sitetop._index ._f > section.news h2 {
      color: var(--color-navy);
    }
    /* _special */
    /* _user */
    ._user._info main section.bestAnswer {
      padding: 2.5vw 1em;
    }
    ._user._info main section.bestAnswer h2 {
      font-size: 1.5em;
      margin: 1em 0;
    }
  }
}