@charset "UTF-8";
@layer project {
  @layer parts;
  @layer content;
}
@layer project {
  :root {
    --width-min: 350px;
    --color-main: #499ed6;
    --color-main-on: white;
    --color-sub: #ff9999;
    --color-sub-on: white;
    --color-third: #d4a577;
    --color-third-on: white;
    --color-a: var(--color-main);
    --color-border-main: var(--color-main);
    --color-border-sub: var(--color-sub);
    --color-border-third: var(--color-third);
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 16px;
    --radius-x: 1.75em;
    /* be adjust */
  }
  @layer parts {
    /* font */
    /* animation */
    @keyframes example {
      from {
        transform: 0 0;
      }
      to {
        transform: 1 1;
      }
    }
    /* common */
    :is(._k) {
      margin-top: 1em;
    }
    /* pj */
    /* _ */
    /* js */
    /* m */
    /* form */
    /* util */
    .u-btn {
      border-radius: 1.5em;
    }
    .u-btn.subPrimary {
      border: none;
    }
    .u-btn.thirdPrimary {
      color: var(--color-third-on);
      background-color: var(--color-third);
      border: none;
    }
    .u-btn.thirdPrimary:hover {
      color: var(--color-third);
      background-color: var(--color-third-on);
      border: 1px solid var(--color-border-third);
      opacity: 1;
    }
    .u-btn.thirdSecondary {
      color: var(--color-third);
      background-color: var(--color-third-on);
      border: 1px solid var(--color-border-third);
    }
    .u-btn.thirdSecondary:hover {
      color: var(--color-third-on);
      background-color: var(--color-third);
      opacity: 1;
    }
    /* embed */
    /* tpl */
    .t-siteHeader {
      color: var(--color-main-on);
      background-color: var(--color-main);
    }
    .t-siteHeader .grid {
      max-width: var(--width-max);
      margin-inline: auto;
    }
    @container _container (min-width: 501px) {
      .t-siteHeader .grid {
        padding: 0 1em;
      }
    }
    @container _container (max-width: 700px) {
      .t-siteHeader .grid {
        display: grid;
        grid-template: "h1 r" "nav nav";
        -webkit-justify-content: space-between;
        justify-content: space-between;
      }
    }
    @container _container (min-width: 701px) {
      .t-siteHeader .grid {
        display: grid;
        grid-template: "h1 nav r";
        grid-template-columns: auto 1fr auto;
      }
    }
    .t-siteHeader .grid h1 {
      grid-area: h1;
    }
    .t-siteHeader .grid h1 a {
      display: inline-block;
      width: 12em;
      padding: 0.5em;
    }
    .t-siteHeader .grid nav {
      grid-area: nav;
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @container _container (max-width: 500px) {
      .t-siteHeader .grid nav {
        display: none;
      }
    }
    .t-siteHeader .grid nav :where(a) {
      font-weight: bold;
      padding: 0.5rem 0.75rem;
    }
    .t-siteHeader .grid .r {
      grid-area: r;
      display: grid;
      grid-template-columns: auto auto;
      -webkit-justify-content: end;
      justify-content: end;
      -webkit-align-items: center;
      align-items: center;
    }
    .t-siteHeader .grid .r :where(a) {
      font-weight: bold;
      padding: 0.5rem 0.75rem;
    }
    .t-siteHeader .grid .r .overlayMenuOpenClose {
      -webkit-align-self: stretch;
      align-self: stretch;
      display: grid;
      -webkit-place-items: center;
      place-items: center;
      color: var(--color-third-on);
      background-color: var(--color-third);
      margin: 0;
    }
    @container _container (min-width: 501px) {
      .t-siteHeader .grid .r .overlayMenuOpenClose {
        display: none;
      }
    }
    .t-siteFooter {
      color: var(--color-main-on);
      background-color: var(--color-main);
      padding: 5vh 5vw 1em;
    }
    .t-siteFooter nav {
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      -webkit-justify-content: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5em;
      margin-bottom: 2.5vh;
    }
    .t-siteFooter nav a {
      display: inline-block;
      padding: 0.25em;
    }
    /* _component */
  }
  @layer content {
    /* freespace */
    /* _backend */
    /* _area */
    /* _auth */
    /* _bank */
    /* _blog */
    /* _blog/_blogpost */
    /* _blog/_blogmanage */
    /* _community */
    /* _community/_community */
    /* _community/_topic */
    /* _community/_event */
    /* _community/_member */
    /* _community/_comment */
    /* _community/_communitymanage */
    /* _earnings */
    /* _event */
    /* _event/_event */
    /* _event/_eventmanage */
    /* _knowledge */
    /* _knowledge/_knowledge */
    /* _knowledge/_knowledgemanage */
    /* _mypage */
    /* _mypage/_config */
    /* _notification */
    /* _purchase */
    /* _purchase/_cart */
    /* _purchase/_purchasemanage */
    /* _questionnaire */
    /* _register */
    /* _reset_password */
    /* _sale */
    /* _stc */
    /* _stc/_case */
    ._stc._case._embed_content {
      display: block;
      background-color: white;
      border-radius: var(--radius-l);
      overflow: hidden;
    }
    ._stc._case._embed_content img {
      width: 100%;
      aspect-ratio: 16/9;
      border-top-left-radius: var(--radius-l);
      border-top-right-radius: var(--radius-l);
    }
    ._stc._case._embed_content .text {
      padding: 1em;
    }
    ._stc._case._embed_content h3 {
      font-size: 1.15em;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      margin-bottom: 0.5em;
    }
    ._stc._case._embed_content footer {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      -webkit-align-items: baseline;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.25em 1em;
    }
    ._stc._case._embed_content time {
      font-size: 0.9em;
      color: gray;
    }
    ._stc._case._embed_content dl {
      display: grid;
      grid-template-columns: auto auto;
      -webkit-align-items: baseline;
      align-items: baseline;
      font-weight: bold;
      color: var(--color-sub);
    }
    ._stc._case._embed_content dt {
      font-size: 0.9em;
    }
    ._stc._case._embed_content dt::before {
      content: "/";
    }
    ._stc._case._embed_content dd {
      font-size: 1.25em;
      order: -1;
    }
    ._stc._case._embed_content dd::before {
      content: "￥";
    }
    /* _stc/_casemanage */
    /* _stp */
    /* _stp/_product */
    /* _stp/_productmanage */
    /* _str */
    /* _str/_reserve */
    /* _str/_reservemanage */
    /* _shipping */
    /* _sitetop */
    /* _sitetop/_index */
    ._sitetop._index :where(.t-noResult) {
      color: inherit;
      text-align: center;
    }
    ._sitetop._index :where(.bB) {
      position: relative;
    }
    ._sitetop._index :where(.bB)::before {
      content: "";
      display: block;
      height: 50px;
      clip-path: polygon(0 20px, 100% 0%, 100% calc(100% - 20px), 0% 100%);
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
    ._sitetop._index :where(.sectionHeader) {
      max-width: var(--width-max);
      margin-inline: auto;
      text-align: center;
      padding: 1em;
      margin-bottom: 5vh;
    }
    ._sitetop._index :where(.sectionHeader) h2 {
      font-size: min(2em, 5.5cqw);
      word-break: keep-all;
    }
    ._sitetop._index :where(.sectionHeader) h2[translate] {
      letter-spacing: 0.1em;
    }
    ._sitetop._index :where(.sectionHeader) h2 .t-logo {
      vertical-align: text-bottom;
      transform: translateY(-2.5px);
    }
    ._sitetop._index :where(.sectionHeader) p {
      font-weight: bold;
      font-size: 1.25em;
      word-break: keep-all;
      margin-top: 1.5em;
    }
    ._sitetop._index :where(.more) {
      max-width: 250px;
      margin: 5vh auto 0;
      font-weight: bold;
      padding: 0.75em 1.75em;
    }
    ._sitetop._index ._d .mv {
      position: relative;
    }
    ._sitetop._index ._d .grid {
      padding: 15vw 1em;
    }
    ._sitetop._index ._d .grid h1 {
      color: transparent;
      background-color: white;
      -webkit-mask-image: url("/image/project/mv.svg");
      -webkit-mask-size: contain;
      -webkit-mask-position: center center;
      -webkit-mask-repeat: no-repeat;
      mask-image: url("/image/project/mv.svg");
      mask-size: contain;
      mask-position: center center;
      mask-repeat: no-repeat;
      text-align: center;
    }
    ._sitetop._index ._d .grid h1 em {
      display: block;
      font-size: max(7.5cqw, 2.75em);
    }
    ._sitetop._index ._d .grid h1 b {
      display: block;
    }
    ._sitetop._index ._d .grid .btns {
      width: fit-content;
      padding: 1em;
      margin: 10vh auto 0;
    }
    @container _container (min-width: 501px) {
      ._sitetop._index ._d .grid .btns {
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
        gap: 0 1em;
        background-color: rgba(73, 158, 214, 0.5);
        border-radius: 10em;
      }
    }
    ._sitetop._index ._d .grid :where(a) {
      font-weight: bold;
      font-size: 1.1em;
      border-radius: 2.5em;
      padding: 1em 2em;
    }
    @container _container (max-width: 500px) {
      ._sitetop._index ._d .grid .subPrimary {
        margin-bottom: 1em;
      }
    }
    ._sitetop._index ._d .grid .swiper {
      position: absolute;
      top: -50px;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
    ._sitetop._index ._d .grid .swiper img {
      width: 100%;
      height: 100%;
    }
    ._sitetop._index ._f .about {
      color: var(--color-main-on);
      background-color: var(--color-main);
      clip-path: polygon(0 20px, 100% 0%, 100% calc(100% - 20px), 0% 100%);
      padding: 10vh 5vw;
      margin-top: -20px;
      position: relative;
    }
    ._sitetop._index ._f .about.bB::before {
      background-color: var(--color-sub);
    }
    ._sitetop._index ._f .about h2 {
      text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    }
    ._sitetop._index ._f .about h2 .t-logo {
      width: 8em;
      margin-left: 0.5em;
    }
    ._sitetop._index ._f .about div {
      container: _container/inline-size;
      position: relative;
      max-width: var(--width-max-m);
      margin-inline: auto;
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._f .about div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
      }
    }
    ._sitetop._index ._f .about div section {
      border: dashed 5px white;
      border-radius: 3em;
      text-align: center;
      padding: 2em 1em;
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._f .about div section {
        max-width: 350px;
        margin-top: 2em;
        margin-bottom: 2em;
        margin-right: auto;
        margin-left: auto;
      }
    }
    ._sitetop._index ._f .about div img {
      width: 7em;
    }
    ._sitetop._index ._f .about div h3 {
      font-size: 1.5em;
      margin: 0.5em 0;
    }
    ._sitetop._index ._f .about div p {
      word-break: keep-all;
      line-height: 2;
    }
    ._sitetop._index ._f .oc {
      background-image: url(/image/project/oc.bg.jpg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      color: white;
      clip-path: polygon(0 20px, 100% 0%, 100% calc(100% - 20px), 0% 100%);
      padding: 20vh 2.5vw;
      margin-top: -20px;
    }
    ._sitetop._index ._f .oc div {
      max-width: var(--width-max);
      margin-inline: auto;
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._f .oc div {
        display: grid;
        grid-template-columns: auto auto;
        -webkit-place-items: center;
        place-items: center;
      }
    }
    ._sitetop._index ._f .oc .sectionHeader {
      margin: 0;
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._f .oc .sectionHeader {
        margin-bottom: 2em;
      }
    }
    ._sitetop._index ._f .oc h2 {
      text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    }
    ._sitetop._index ._f .oc h2 .t-logo {
      width: 8em;
      margin-right: 0.5em;
    }
    ._sitetop._index ._f .oc p {
      font-weight: bold;
      font-size: 1.25em;
      margin-top: 1em;
    }
    ._sitetop._index ._f .oc .u-btn {
      font-weight: bold;
      font-size: 1.15em;
      border-radius: var(--radius-m);
      white-space: nowrap;
      padding: 1em 2em;
    }
    ._sitetop._index ._f .case {
      background-image: url(/image/project/case.bg.jpg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      clip-path: polygon(0 20px, 100% 0%, 100% calc(100% - 20px), 0% 100%);
      padding: 20vh 2.5vw;
      margin-top: -20px;
    }
    ._sitetop._index ._f .case.bB::before {
      background-color: var(--color-third);
    }
    ._sitetop._index ._f .case .sectionHeader {
      color: white;
    }
    ._sitetop._index ._f .case ul {
      max-width: var(--width-max);
      margin-inline: auto;
    }
    @container _container (min-width: 601px) {
      ._sitetop._index ._f .case ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
      }
    }
    @container _container (min-width: 901px) {
      ._sitetop._index ._f .case ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
      }
    }
    @container _container (max-width: 600px) {
      ._sitetop._index ._f .case li {
        margin: 2em 0;
      }
    }
    ._sitetop._index ._f .user {
      padding: 20vh 2.5vw;
      margin-top: -20px;
    }
    ._sitetop._index ._f .user.bB::before {
      background-color: var(--color-main);
    }
    ._sitetop._index ._f .user .sectionHeader {
      color: var(--color-main);
    }
    ._sitetop._index ._f .user .swiper {
      container: _container/inline-size;
      position: relative;
    }
    ._sitetop._index ._f .user .swiper-slide {
      height: auto;
    }
    ._sitetop._index ._f .user ._embed_user {
      height: 100%;
    }
    ._sitetop._index ._f .news {
      max-width: var(--width-max-s);
      margin-top: 5vh;
      margin-bottom: 5vh;
      margin-right: auto;
      margin-left: auto;
      color: var(--color-main-on);
      background-color: var(--color-main);
      border-radius: var(--radius-l);
      padding: 2em;
    }
    ._sitetop._index ._f .news .u-btn {
      max-width: 300px;
      margin-top: 2.5vh;
      margin-bottom: 2.5vh;
      margin-right: auto;
      margin-left: auto;
    }
    ._sitetop._index ._f .cta {
      background-image: url(/image/project/cta.bg.jpg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      padding: 20vh 2.5vw;
      margin-top: 10vh;
    }
    ._sitetop._index ._f .cta .sectionHeader {
      color: white;
    }
    ._sitetop._index ._f .cta div {
      container: _container/inline-size;
      position: relative;
      max-width: var(--width-max-m);
      margin-inline: auto;
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._f .cta div {
        display: grid;
        grid-template: "h3" "p" "a";
        gap: 0 1em;
      }
    }
    ._sitetop._index ._f .cta section {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: var(--radius-l);
      text-align: center;
      padding: 2em clamp(1em, 2.5cqw, 2em);
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._f .cta section {
        max-width: 400px;
        margin-top: 2em;
        margin-bottom: 2em;
        margin-right: auto;
        margin-left: auto;
      }
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._f .cta section {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: span 1;
        grid-row: 1/-1;
      }
    }
    ._sitetop._index ._f .cta h3 {
      grid-area: h3;
      font-size: 1.5em;
      word-break: keep-all;
    }
    ._sitetop._index ._f .cta h3:is(section:first-of-type > *) {
      color: var(--color-sub);
    }
    ._sitetop._index ._f .cta h3:not(section:first-of-type > *) {
      color: var(--color-third);
    }
    ._sitetop._index ._f .cta p {
      grid-area: p;
      font-size: 1.15em;
      line-height: 2;
      word-break: keep-all;
      margin: 1em 0;
    }
    ._sitetop._index ._f .cta .u-btn {
      grid-area: a;
    }
    ._sitetop._index ._k {
      margin: 0;
    }
    /* _special */
    /* _user */
    ._user._embed_user {
      border: 2px solid var(--color-border-main);
      border-radius: var(--radius-l);
      padding: 2em min(2em, 5cqw);
    }
    ._user._embed_user img {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius-l);
    }
    ._user._embed_user h3 {
      font-size: 1.25em;
      color: var(--color-main);
      text-align: center;
      margin: 0.5em 0;
    }
    ._user._embed_user b {
      display: block;
      text-align: center;
      margin-bottom: 0.5em;
    }
    ._user._embed_user dl {
      display: grid;
      grid-template-columns: 2.5em 1fr;
      gap: 0.5em;
      -webkit-align-items: baseline;
      align-items: baseline;
      font-size: 0.9em;
    }
    ._user._embed_user dt {
      font-size: 0.9em;
    }
    ._user._embed_user .u-btn {
      font-size: 0.9em;
      margin-top: 1em;
    }
  }
}