@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Yusei+Magic&display=swap");
@layer project {
  @layer parts;
  @layer content;
}
@layer project {
  :root {
    --width-min: 350px;
    --color-pink: #FF66C4;
    --color-orange: #FF6767;
    --color-orange-light: #FFA486;
    --color-blue: #0B78B3;
    --color-blue-light: #D6F8FF;
    --color-brown-dark: #523E30;
    --color-cream: #FFE6C3;
    --color-normal: #0B78B3;
    --color-partner: #FF6767;
    --color-dog: #0B78B3;
    --color-cat: #FF6767;
    --color-main: #523E30;
    --color-main-on: white;
    --color-sub: #FF6767;
    --color-sub-on: white;
    --color-third: #D6F8FF;
    --color-third-on: #262626;
    --color-border-main: rgba(82, 62, 48, 0.5);
    --color-border-sub: rgba(255, 103, 103, 0.5);
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 16px;
    --radius-x: 1.5em;
    /* be adjust */
  }
  @layer parts {
    /* font */
    /* animation */
    @keyframes example {
      from {
        transform: 0 0;
      }
      to {
        transform: 1 1;
      }
    }
    /* common */
    /* pj */
    /* _ */
    /* js */
    .js-dialog {
      margin-inline: auto;
    }
    :where(.swiper-button-prev, .swiper-button-next) {
      color: var(--color-sub);
    }
    .swiper-button-prev::after {
      font-family: "FontAwesome solid";
      content: "\f137";
      vertical-align: baseline;
    }
    .swiper-button-next::after {
      font-family: "FontAwesome solid";
      content: "\f138";
      vertical-align: baseline;
    }
    .swiper-pagination-bullet-active {
      background-color: var(--color-sub);
    }
    /* m */
    /* form */
    /* util */
    .u-btn {
      border-radius: 1.5em;
    }
    .u-dialog:has(.t-connect) {
      container: _container/inline-size;
      position: relative;
      width: clamp(300px, 50vw, 600px);
    }
    .u-dialog:has(.t-connect) .close {
      display: none;
    }
    .u-dialog .content {
      max-height: 90vh;
      border: none;
      overflow-y: auto;
    }
    .u-dialog .content img {
      max-height: 100%;
    }
    .u-sectionHeader {
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      -webkit-align-items: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5em 1em;
      margin-bottom: 2em;
    }
    .u-sectionHeader i {
      font-family: "Yusei Magic", sans-serif;
      font-size: 2.5em;
      font-style: italic;
      color: var(--color-sub);
    }
    .u-sectionHeader h3 {
      transform: translateY(0.1em);
    }
    /* embed */
    .e-user em {
      line-height: 1.25;
    }
    .e-user .email {
      display: block;
      line-height: 1.25;
      margin-top: 0.5em;
    }
    .e-user .userImg {
      background-color: white;
    }
    .e-content img {
      border: none;
      border-bottom: 1px solid var(--color-border-gray);
    }
    .e-myMenu :where(a, span) {
      font-size: 0.85em;
    }
    .e-overlayMenu {
      color: var(--color-main);
      background-color: white;
    }
    .e-overlayMenu .header {
      max-width: var(--width-max-s);
      color: var(--initial-color);
      background-color: rgba(255, 164, 134, 0.15);
      border-radius: 5vw;
      padding: min(2em, 5cqw);
      margin-top: 2.5vh;
    }
    .e-overlayMenu .header .logout {
      display: block;
      width: fit-content;
    }
    .e-overlayMenu .menu {
      max-width: var(--width-max-s);
      margin-right: auto;
      margin-left: auto;
    }
    .e-overlayMenu .menu:first-child {
      margin-top: 5vh;
    }
    .e-overlayMenu .menu a {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      -webkit-align-items: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1em;
      font-weight: bold;
      color: var(--color-sub);
      border-bottom: 1px dashed var(--color-sub);
      padding: 1em;
    }
    .e-overlayMenu .menu a:not([href^=http])::after {
      font-family: "FontAwesome solid";
      content: "\f35a";
      vertical-align: baseline;
    }
    .e-overlayMenu .menu a:is([href^=http])::after {
      font-family: "FontAwesome solid";
      content: "\f08e";
      vertical-align: baseline;
    }
    /* tpl */
    .t-connect {
      background: linear-gradient(to bottom, var(--color-sub), var(--color-cream));
      padding: min(7.5cqw, 2em);
    }
    .t-connect header {
      max-width: calc(min(8.5cqw, 2.5em) * 9);
      margin-right: auto;
      margin-left: auto;
      text-align: center;
      margin-bottom: 1em;
    }
    .t-connect header :where(b, h2) {
      font-family: "Yusei Magic", sans-serif;
      font-size: min(8.5cqw, 2.5em);
      font-style: normal;
      font-weight: 100;
      color: var(--color-sub);
      color: white;
    }
    .t-connect header h2 {
      word-break: keep-all;
    }
    .t-connect .pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1em;
      -webkit-align-items: center;
      align-items: center;
      isolation: isolate;
      position: relative;
    }
    .t-connect .pair :where(.l, .r) {
      grid-row: 1;
    }
    .t-connect .pair .l {
      grid-column: 1;
      -webkit-justify-self: end;
      justify-self: end;
    }
    .t-connect .pair .r {
      grid-column: 2;
      -webkit-justify-self: start;
      justify-self: start;
    }
    .t-connect .pair .heart {
      grid-area: 1/1/2/3;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .t-connect .pair .heart::before {
      font-family: "FontAwesome solid";
      content: "\f004";
      vertical-align: baseline;
      font-size: min(20cqw, 5em);
      color: var(--color-sub);
    }
    .t-connect .pair .heart img {
      display: inline-block;
      width: min(20cqw, 150px);
      position: absolute;
      top: 50%;
      right: 50%;
      translate: 50% -50%;
    }
    .t-connect .pair .userImg {
      display: block;
      width: 40cqw;
      aspect-ratio: 1;
      object-fit: cover;
      border: 2px solid white;
      border-radius: 100%;
    }
    .t-connect .u-btn {
      width: clamp(50cqw, 100%, 200px);
      margin: 0.75em auto;
    }
    .t-siteFooter {
      color: var(--color-main-on);
      background-color: var(--color-main);
      padding-top: 5vh;
    }
    .t-siteFooter h2 {
      text-align: center;
      margin-bottom: 1em;
    }
    .t-siteFooter h2 img {
      width: 10em;
    }
    .t-siteFooter .pages {
      padding: 1em;
    }
    @container _container (max-width: 500px) {
      .t-siteFooter .pages {
        display: block;
      }
    }
    @container _container (max-width: 500px) {
      .t-siteFooter .pages a {
        display: block;
        padding: 0.25em 1em;
      }
    }
    .t-siteFooter b {
      display: block;
      font-weight: normal;
      text-align: center;
      margin-bottom: 2em;
    }
    .t-siteFooter b span {
      display: inline-block;
      margin: 0.25em 0.5em;
    }
    .t-siteFooter .copyright {
      font-size: 0.9em;
      background-color: var(--color-gray-dark);
    }
    .t-siteHeader {
      color: var(--color-main-on);
      background-color: var(--color-main);
    }
    .t-siteHeader .flex {
      padding-right: 0.5em;
    }
    .t-siteHeader h1 img {
      width: 6em;
    }
    .t-siteHeader nav {
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
    }
    @container _container (max-width: 700px) {
      .t-siteHeader nav {
        display: none;
      }
    }
    .t-siteHeader nav a {
      font-size: 0.9em;
    }
    .t-siteHeader nav a.u-btn {
      color: var(--color-main);
    }
    .t-siteHeader nav form {
      display: grid;
      grid-template-columns: 2em 1fr;
      gap: 0.5em;
      width: 16em;
    }
    .t-siteHeader nav input {
      min-height: unset;
      background: none;
      border: none;
      outline: none;
      padding: 0;
      width: 100%;
    }
    .t-siteHeader nav button {
      min-height: unset;
      background: none;
      border: none;
      outline: none;
      padding: 0;
    }
    .t-siteHeader nav button::before {
      font-family: "FontAwesome solid";
      content: "\f002";
      vertical-align: baseline;
      color: var(--color-sub);
    }
    .t-siteHeader [href*="/register/new"] {
      -webkit-align-self: center;
      align-self: center;
      padding-right: 1.5em;
      padding-left: 1.5em;
      margin: 0 0.25em;
    }
    .t-siteHeader [href*="/register/new"]::before {
      font-family: "FontAwesome solid";
      content: "\f234";
      vertical-align: baseline;
    }
    .t-siteHeader [href*="/register/new"]:not([href$=partner]) {
      border-color: var(--color-normal);
    }
    .t-siteHeader [href*="/register/new"]:not([href$=partner])::before {
      color: var(--color-normal);
    }
    .t-siteHeader [href*="/register/new"]:is([href$=partner]) {
      border-color: var(--color-partner);
    }
    .t-siteHeader [href*="/register/new"]:is([href$=partner])::before {
      color: var(--color-partner);
    }
    .t-siteHeader [href*="/login"]::before {
      font-family: "FontAwesome solid";
      content: "\f090";
      vertical-align: baseline;
      margin-right: 0.35em;
      color: var(--color-sub);
    }
    .t-siteHeader .overlayMenuOpenClose {
      -webkit-align-self: center;
      align-self: center;
      background-color: var(--color-sub);
      border-radius: var(--radius-m);
      padding: 0.75em;
    }
    /* _component */
  }
  @layer content {
    /* freespace */
    /* _backend */
    /* _area */
    /* _auth */
    /* _bank */
    /* _blog */
    ._blog._search ._d {
      background-color: var(--color-blue-light);
    }
    ._blog._search ._d .u-sectionHeader {
      -webkit-justify-content: center;
      justify-content: center;
    }
    ._blog._search ._d ._flex {
      -webkit-justify-content: center;
      justify-content: center;
    }
    ._blog._search ._d [name*="[keyword]"] {
      border-radius: var(--radius-s);
    }
    ._blog._search ._d .u-formFooter {
      margin: 0;
    }
    ._blog._search ._d [type=submit] {
      max-width: 300px;
      background-color: var(--color-sub);
      padding: 1em;
    }
    ._blog._search ._f {
      max-width: var(--width-max);
      margin-right: auto;
      margin-left: auto;
    }
    /* _blog/_blogpost */
    ._blog._blogpost._embed_content .e-content {
      border-radius: var(--radius-m);
      box-shadow: none;
      padding: 0.75em;
    }
    ._blog._blogpost._embed_content footer {
      -webkit-align-self: end;
      align-self: end;
    }
    ._blog._blogpost._embed_content .tags li {
      font-size: 0.85em;
      color: var(--color-sub-on);
      background-color: var(--color-sub);
      border-radius: var(--radius-m);
      padding: 0.25em 1em;
    }
    /* _blog/_blogmanage */
    /* _community */
    /* _community/_community */
    ._community._community._embed_content .e-content {
      border-radius: var(--radius-m);
      box-shadow: none;
      padding: 0.75em;
    }
    ._community._community._embed_content .category {
      display: inline-block;
      font-size: 0.8em;
      color: var(--color-sub-on);
      background-color: var(--color-sub);
      border-radius: var(--radius-m);
      padding: 0.25em 0.75em;
    }
    ._community._community._search ._d {
      background-color: var(--color-blue-light);
    }
    ._community._community._search ._d .u-sectionHeader {
      -webkit-justify-content: center;
      justify-content: center;
    }
    ._community._community._search ._d ._flex {
      -webkit-justify-content: center;
      justify-content: center;
      max-width: var(--width-max-m);
      margin-right: auto;
      margin-left: auto;
    }
    ._community._community._search ._d .u-formFooter {
      margin: 0;
    }
    ._community._community._search ._d [type=submit] {
      max-width: 300px;
      background-color: var(--color-sub);
      padding: 1em;
    }
    ._community._community._search ._f {
      max-width: var(--width-max);
      margin-right: auto;
      margin-left: auto;
    }
    ._community._community._search ._f .u-gridList > li {
      height: 100%;
    }
    ._community._community._search ._f .u-gridList ._embed_content {
      height: 100%;
    }
    ._community._community._index ._d ._embed_contentHeader img {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      object-fit: contain;
    }
    /* _community/_topic */
    /* _community/_event */
    /* _community/_member */
    /* _community/_comment */
    /* _community/_communitymanage */
    /* _earnings */
    /* _event */
    /* _event/_event */
    ._event._event._embed_content {
      height: 100%;
    }
    ._event._event._embed_content .e-content {
      border-radius: var(--radius-m);
      box-shadow: none;
      padding: 0.75em;
    }
    ._event._event._embed_content .category {
      font-size: 0.85em;
      color: var(--color-sub-on);
      background-color: var(--color-sub);
      border-radius: var(--radius-m);
      padding: 0.25em 1em;
    }
    ._event._event._embed_content .category::before {
      display: none;
    }
    ._event._event._embed_content .title {
      font-size: 1.05em;
      margin-top: 0.25em;
    }
    ._event._event._embed_content .excerpt {
      font-size: 0.9em;
    }
    ._event._event._embed_content footer {
      color: var(--color-sub);
      border: 1px solid var(--color-sub);
      border-radius: var(--radius-s);
      -webkit-align-self: end;
      align-self: end;
    }
    ._event._event._embed_content footer dl {
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.25em 0.5em;
    }
    ._event._event._embed_content footer dt {
      font-weight: bold;
      font-size: 0.9em;
      margin-right: 1em;
    }
    ._event._event._search ._d {
      background-color: var(--color-blue-light);
    }
    ._event._event._search ._d .u-sectionHeader {
      -webkit-justify-content: center;
      justify-content: center;
    }
    ._event._event._search ._d ._flex {
      -webkit-justify-content: center;
      justify-content: center;
      max-width: var(--width-max-m);
      margin-right: auto;
      margin-left: auto;
    }
    ._event._event._search ._d .u-formFooter {
      margin: 0;
    }
    ._event._event._search ._d [type=submit] {
      max-width: 300px;
      background-color: var(--color-sub);
      padding: 1em;
    }
    ._event._event._search ._f {
      max-width: var(--width-max);
      margin-right: auto;
      margin-left: auto;
    }
    ._event._event._search ._f .u-gridList > li {
      height: 100%;
    }
    ._event._event._search ._f .u-gridList ._embed_content {
      height: 100%;
    }
    /* _event/_eventmanage */
    /* _knowledge */
    /* _knowledge/_knowledge */
    /* _knowledge/_knowledgemanage */
    /* _mypage */
    /* _mypage/_config */
    /* _notification */
    /* _purchase */
    /* _purchase/_cart */
    /* _purchase/_purchasemanage */
    /* _questionnaire */
    /* _register */
    ._register._new ._f form label {
      display: grid;
      grid-template-columns: auto auto;
      gap: 1em;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      margin-top: 2em;
    }
    /* _reset_password */
    /* _sale */
    /* _stc */
    /* _stc/_case */
    /* _stc/_casemanage */
    /* _stp */
    /* _stp/_product */
    /* _stp/_productmanage */
    /* _str */
    /* _str/_reserve */
    /* _str/_reservemanage */
    /* _shipping */
    /* _sitetop */
    /* _sitetop/_index */
    ._sitetop._index._z {
      background-color: white;
    }
    ._sitetop._index ._a .t-siteHeader {
      box-shadow: none;
    }
    ._sitetop._index ._d .mv {
      background-image: url(../image/project/mv.jpg);
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }
    ._sitetop._index ._d .mv .c {
      container: _container/inline-size;
      position: relative;
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._d .mv .c {
        display: grid;
        grid-template-columns: 1fr auto;
        -webkit-align-items: end;
        align-items: end;
      }
    }
    ._sitetop._index ._d .mv .v {
      color: var(--color-main-on);
      background-color: var(--color-main);
      text-align: center;
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._d .mv .v {
        padding: 5vh 1.5em;
      }
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._d .mv .v {
        max-width: min(350px, 35cqw);
        padding: 22.5vh 1.5em;
      }
    }
    ._sitetop._index ._d .mv figure {
      order: -1;
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._d .mv figure {
        background-image: url(../image/project/mv.jpg);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 30vh;
      }
    }
    @container _container (min-width: 801px) {
      ._sitetop._index ._d .mv figure {
        padding: 5vh 2.5vw;
      }
    }
    ._sitetop._index ._d .mv figure img {
      width: 35cqw;
      max-width: 350px;
    }
    @container _container (max-width: 800px) {
      ._sitetop._index ._d .mv figure img {
        display: none;
      }
    }
    ._sitetop._index ._d .mv h1 {
      display: block;
    }
    ._sitetop._index ._d .mv h1 img {
      width: 200px;
    }
    ._sitetop._index ._d .mv h1 :where(strong, span) {
      display: block;
      font-weight: 400;
      font-family: "Yusei Magic", sans-serif;
      word-break: keep-all;
      margin-top: 1.5em;
    }
    ._sitetop._index ._d .mv nav {
      margin-top: 1.5em;
    }
    ._sitetop._index ._d .mv nav a {
      max-width: 250px;
      margin-top: 1em;
      margin-bottom: 1em;
      margin-right: auto;
      margin-left: auto;
      display: block;
    }
    ._sitetop._index ._d .mv nav .normal {
      color: white;
      background-color: var(--color-normal);
    }
    ._sitetop._index ._d .mv nav .partner {
      color: white;
      background-color: var(--color-partner);
    }
    ._sitetop._index ._d .mv nav .login {
      color: var(--color-sub);
      border: 1px solid var(--color-sub);
    }
    ._sitetop._index ._d .mv nav .reach::before {
      font-family: "FontAwesome solid";
      content: "\f004";
      vertical-align: baseline;
      margin-right: 0.35em;
    }
    ._sitetop._index ._d .mv nav .filter::before {
      font-family: "FontAwesome solid";
      content: "\f0e0";
      vertical-align: baseline;
      margin-right: 0.35em;
    }
    ._sitetop._index ._d .mv small {
      display: block;
      font-size: 0.8em;
      margin-top: 1em;
    }
    ._sitetop._index ._d .mv small::before {
      content: "※";
    }
    ._sitetop._index ._f {
      background-color: white;
    }
    ._sitetop._index ._f .t-noResult {
      text-align: center;
    }
    ._sitetop._index ._f .u-sectionHeader {
      display: block;
      text-align: center;
    }
    ._sitetop._index ._f .more {
      display: block;
      width: fit-content;
      font-weight: bold;
      padding: 0.5em;
      margin-left: auto;
      margin-bottom: 2em;
    }
    ._sitetop._index ._f .more::after {
      font-family: "FontAwesome solid";
      content: "\f105";
      vertical-align: baseline;
      margin-left: 0.35em;
    }
    ._sitetop._index ._f .t-noResult {
      text-align: center;
    }
    ._sitetop._index ._f > section {
      padding: 10vh 5vw;
    }
    ._sitetop._index ._f > section:nth-of-type(even) {
      background-color: rgba(255, 103, 103, 0.1);
    }
    ._sitetop._index ._f > section .c {
      max-width: var(--width-max-m);
      margin-right: auto;
      margin-left: auto;
    }
    ._sitetop._index ._f .about div {
      max-width: var(--width-max);
      margin-right: auto;
      margin-left: auto;
    }
    @container _container (min-width: 601px) {
      ._sitetop._index ._f .about div {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
      }
    }
    @container _container (min-width: 901px) {
      ._sitetop._index ._f .about div {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    ._sitetop._index ._f .about section {
      max-width: 300px;
      margin-inline: auto;
    }
    @container _container (max-width: 600px) {
      ._sitetop._index ._f .about section {
        margin-bottom: 2em;
      }
    }
    ._sitetop._index ._f .about section img {
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 100%;
      margin-inline: auto;
    }
    ._sitetop._index ._f .about section i {
      display: block;
      font-family: "Yusei Magic", sans-serif;
      font-size: 2.5em;
      font-style: italic;
      color: var(--color-sub);
      text-align: center;
    }
    ._sitetop._index ._f .about section h3 {
      display: grid;
      -webkit-place-items: center;
      place-items: center;
      min-height: 4em;
      word-break: keep-all;
      text-align: center;
    }
    ._sitetop._index ._f .flow {
      --sectionWidth: 190px;
    }
    @container _container (min-width: 551px) {
      ._sitetop._index ._f .flow div {
        display: grid;
        grid-template-columns: repeat(auto-fit, var(--sectionWidth));
        gap: 5cqw 0;
        -webkit-justify-content: center;
        justify-content: center;
      }
    }
    @container _container (min-width: 851px) {
      ._sitetop._index ._f .flow div {
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
        gap: 0;
      }
    }
    ._sitetop._index ._f .flow section {
      text-align: center;
      position: relative;
    }
    @container _container (max-width: 550px) {
      ._sitetop._index ._f .flow section {
        margin-bottom: 2em;
      }
    }
    @container _container (min-width: 551px) {
      ._sitetop._index ._f .flow section {
        width: var(--sectionWidth);
      }
    }
    @container _container (min-width: 851px) {
      ._sitetop._index ._f .flow section {
        width: min(var(--sectionWidth), 20%);
      }
    }
    @container _container (min-width: 551px) {
      ._sitetop._index ._f .flow section:not(:last-of-type)::after {
        content: "";
        display: inline-block;
        width: 2.5cqw;
        aspect-ratio: 2/1;
        background-image: url(../image/project/arrow.svg);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        right: -1cqw;
        z-index: 1;
      }
    }
    ._sitetop._index ._f .flow section i {
      display: inline-block;
      color: var(--color-sub-on);
      background-color: var(--color-sub);
      font-weight: bold;
      border-radius: 1.5em;
      padding: 0.5em 1.5em;
      margin-bottom: 1em;
    }
    ._sitetop._index ._f .flow section img {
      display: block;
      max-width: 150px;
      margin-inline: auto;
    }
    ._sitetop._index ._f .flow section h3 {
      word-break: keep-all;
      margin-top: 1em;
    }
    ._sitetop._index ._f .flow [src*=arrow] {
      width: 50px;
    }
    @container _container (max-width: 550px) {
      ._sitetop._index ._f .flow [src*=arrow] {
        display: none;
      }
    }
    ._sitetop._index ._f .community .swiper-slide {
      width: 300px;
      height: auto;
    }
    ._sitetop._index ._f .users .swiper-slide {
      width: 200px;
      background-color: white;
      border-radius: var(--radius-l);
      padding: 1em;
    }
    ._sitetop._index ._f .blog .swiper-slide {
      width: 300px;
      height: auto;
    }
    ._sitetop._index ._f .event .swiper-slide {
      width: 300px;
      height: auto;
    }
    ._sitetop._index ._f .number {
      container: _container/inline-size;
      position: relative;
      background-color: var(--initial-bgColor);
      padding: 5vh 5vw;
    }
    ._sitetop._index ._f .number dl {
      max-width: 600px;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-right: auto;
      margin-left: auto;
      background-color: white;
      border-radius: var(--radius-m);
      padding: 0.75em 1.5em;
    }
    @container _container (min-width: 501px) {
      ._sitetop._index ._f .number dl {
        display: grid;
        grid-template-columns: 20em 1fr;
        -webkit-align-items: center;
        align-items: center;
      }
    }
    ._sitetop._index ._f .number dt {
      font-size: 0.85em;
    }
    ._sitetop._index ._f .number dd {
      font-weight: bold;
      font-size: 1.1em;
      color: var(--color-brown-dark);
    }
    ._sitetop._index ._f .news ._container {
      max-width: var(--width-max-s);
      margin-right: auto;
      margin-left: auto;
    }
    /* _special */
    /* _user */
    .u-dialog .hoge {
      container: unset;
    }
    .u-dialog .hoge legend {
      display: none;
    }
    .u-dialog .hoge dl {
      margin-bottom: 0.75em;
    }
    ._user._embed_showProfile {
      padding: 1rem;
    }
    ._user._embed_showProfile.normal {
      --color: var(--color-normal);
      --bgColor: rgba(11, 120, 179, 0.1);
    }
    ._user._embed_showProfile.partner {
      --color: var(--color-partner);
      --bgColor: rgba(255, 103, 103, 0.1);
    }
    ._user._embed_showProfile .pageHeader {
      container: _container/inline-size;
      position: relative;
      background-color: var(--bgColor);
      padding: 5vh 5vw;
    }
    @container _container (min-width: 701px) {
      ._user._embed_showProfile .pageHeader .grid {
        max-width: var(--width-max-s);
        margin-right: auto;
        margin-left: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1em;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-justify-items: cneter;
        justify-items: cneter;
        -webkit-align-items: center;
        align-items: center;
      }
    }
    ._user._embed_showProfile .pageHeader ._embed_content a {
      pointer-events: none;
    }
    @container _container (min-width: 601px) {
      ._user._embed_showProfile .pageHeader ._embed_content a {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1em;
        -webkit-align-items: center;
        align-items: center;
      }
    }
    ._user._embed_showProfile .pageHeader ._embed_content h3 {
      font-size: 1.5em;
      margin: 0.5em 0;
    }
    @container _container (max-width: 600px) {
      ._user._embed_showProfile .pageHeader ._embed_content h3 {
        text-align: center;
      }
    }
    @container _container (min-width: 601px) {
      ._user._embed_showProfile .pageHeader ._embed_content h3 {
        max-width: 50cqw;
      }
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference {
      background-color: white;
      margin-bottom: 0.5em;
    }
    @container _container (min-width: 601px) {
      ._user._embed_showProfile .pageHeader ._embed_content .preference {
        margin: 0.75em 0 0.5em;
      }
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD001] {
      --color: var(--color-dog);
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD001]::before {
      font-family: "FontAwesome solid";
      content: "\e573";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD002] {
      --color: var(--color-cat);
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD002]::before {
      font-family: "FontAwesome solid";
      content: "\e572";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD003] {
      --color: var(--color-brown-dark);
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference[data-value=UD003]::before {
      font-family: "FontAwesome solid";
      content: "\e574";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader ._embed_content .preference::before {
      color: var(--color);
      margin-right: 0.35em;
    }
    ._user._embed_showProfile .pageHeader ._embed_content .dls {
      display: grid;
      grid-template-columns: auto auto;
      gap: 1em;
      background-color: white;
      border-radius: var(--radius-m);
      padding: 0.25em 0.5em;
      margin-top: 1em;
    }
    @container _container (max-width: 600px) {
      ._user._embed_showProfile .pageHeader ._embed_content .dls {
        max-width: 350px;
        margin: 1em auto 0;
      }
    }
    ._user._embed_showProfile .pageHeader nav {
      --input-height: 2.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5em;
    }
    @container _container (max-width: 700px) {
      ._user._embed_showProfile .pageHeader nav {
        max-width: 350px;
        margin: 1em auto 0;
      }
    }
    ._user._embed_showProfile .pageHeader nav:not(:has(.subPrimary)) a {
      grid-column: span 2 !important;
    }
    ._user._embed_showProfile .pageHeader nav a {
      gap: 0.5em;
      grid-template-columns: auto 1fr auto;
      -webkit-place-items: normal;
      place-items: normal;
      -webkit-justify-content: normal;
      justify-content: normal;
      font-size: 0.9em;
      border-radius: var(--radius-m);
    }
    ._user._embed_showProfile .pageHeader nav a:not(.subPrimary) {
      grid-column: span 1;
      font-size: 0.75em;
      padding: 0.5em 1em;
    }
    ._user._embed_showProfile .pageHeader nav a:is(.subPrimary) {
      grid-column: span 2;
      font-weight: bold;
    }
    ._user._embed_showProfile .pageHeader nav a:is(.subPrimary)::after {
      font-family: "FontAwesome solid";
      content: "\f105";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.blog::before {
      font-family: "FontAwesome solid";
      content: "\e0bb";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.skip::before {
      font-family: "FontAwesome solid";
      content: "\f01e";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.unskip::before {
      font-family: "FontAwesome solid";
      content: "\f0e2";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.block::before {
      font-family: "FontAwesome solid";
      content: "\f05e";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.unblock::before {
      font-family: "FontAwesome solid";
      content: "\f05e";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a.report::before {
      font-family: "FontAwesome solid";
      content: "\f024";
      vertical-align: baseline;
    }
    ._user._embed_showProfile .pageHeader nav a::before {
      width: 1.5em;
      text-align: center;
      margin: 0;
    }
    ._user._embed_showProfile .pageHeader nav a::after {
      -webkit-justify-self: end;
      justify-self: end;
    }
    ._user._embed_showProfile .contents {
      max-width: var(--width-max-m);
      margin-right: auto;
      margin-left: auto;
    }
    ._user._embed_showProfile .contents .pr {
      line-height: 2;
      margin: 5vh 0;
    }
    ._user._embed_showProfile .contents .images img {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius-m);
    }
    ._user._embed_showProfile .contents section {
      margin-top: 10vh;
    }
    ._user._embed_showProfile .contents .u-sectionHeader:is(.profile *) {
      margin: 0;
    }
    ._user._embed_showProfile .contents .note i {
      display: inline-block;
      font-size: 0;
    }
    ._user._embed_showProfile .contents .note i::before {
      font-family: "FontAwesome solid";
      content: "*";
      vertical-align: baseline;
      font-size: 1rem;
      color: var(--color-sub);
    }
    @container _container (min-width: 801px) {
      ._user._embed_showProfile .contents .dls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
      }
    }
    ._user._embed_showProfile .contents .dls:is(.profile *) {
      margin-top: 2em;
    }
    ._user._embed_showProfile .contents dl {
      display: grid;
      grid-template-columns: 10em 1fr;
      border-bottom: 1px dotted var(--color);
      padding: 0.5em;
    }
    ._user._embed_showProfile .contents dl:where(.status, .hobbies) {
      grid-column: span 2;
    }
    ._user._embed_showProfile .contents dl:where(.private) {
      position: relative;
    }
    ._user._embed_showProfile .contents dl:where(.private)::before {
      font-family: "FontAwesome solid";
      content: "*";
      vertical-align: baseline;
      color: var(--color-sub);
      vertical-align: sup;
      position: absolute;
    }
    ._user._embed_showProfile .contents dt {
      font-weight: bold;
    }
    ._user._embed_content a {
      display: block;
    }
    ._user._embed_content a img {
      display: block;
      width: 150px;
      aspect-ratio: 1;
      border-radius: 100%;
      margin-inline: auto;
    }
    ._user._embed_content a .preference {
      display: block;
      width: fit-content;
      font-size: 0.85em;
      background-color: color-mix(in srgb, var(--color) 25%, white);
      border-radius: var(--radius-m);
      padding: 0.25em 0.75em;
      margin: 0.5em auto;
    }
    ._user._embed_content a .preference[data-value=UD001] {
      --color: var(--color-dog);
    }
    ._user._embed_content a .preference[data-value=UD001]::before {
      font-family: "FontAwesome solid";
      content: "\e573";
      vertical-align: baseline;
    }
    ._user._embed_content a .preference[data-value=UD002] {
      --color: var(--color-cat);
    }
    ._user._embed_content a .preference[data-value=UD002]::before {
      font-family: "FontAwesome solid";
      content: "\e572";
      vertical-align: baseline;
    }
    ._user._embed_content a .preference[data-value=UD003] {
      --color: darkorange;
    }
    ._user._embed_content a .preference[data-value=UD003]::before {
      font-family: "FontAwesome solid";
      content: "\e574";
      vertical-align: baseline;
    }
    ._user._embed_content a dl {
      max-width: 10em;
      margin-right: auto;
      margin-left: auto;
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      gap: 1em;
      font-size: 0.9em;
    }
    ._user._embed_content a dt {
      font-size: 0.9em;
      white-space: nowrap;
    }
    ._user._embed_content a dd {
      font-weight: bold;
      color: var(--color-sub);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    ._user._embed_content a .u-numUnit b {
      font-weight: bold;
    }
    ._user._embed_content a .u-numUnit small {
      color: var(--initial-color);
      opacity: 0.9;
    }
    ._user._tpl_searchForm {
      max-width: var(--width-max-s);
      margin: 2em auto 0;
    }
    ._user._tpl_searchForm :where(.catdog ul, .top, .bottom) {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1em;
      padding: 0.5em 1em;
    }
    ._user._tpl_searchForm :where(select, [type=text]) {
      width: 100%;
    }
    ._user._tpl_searchForm :where(dt) {
      font-size: 0.9em;
      margin-bottom: 0.25em;
    }
    ._user._tpl_searchForm .u-rangeForm div {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
    }
    ._user._tpl_searchForm .catdog {
      background-color: white;
      border-radius: var(--radius-l);
      padding: 1.5em min(1.5em, 2.5cqw);
      margin: 1em;
      position: relative;
    }
    ._user._tpl_searchForm .catdog dt {
      width: fit-content;
      font-weight: bold;
      background-color: white;
      border-radius: var(--radius-m);
      white-space: nowrap;
      padding: 0.5em 2em;
      margin-inline: auto;
      position: absolute;
      top: -1em;
      left: 50%;
      transform: translateX(-50%);
    }
    @container _container (max-width: 550px) {
      ._user._tpl_searchForm .catdog li {
        grid-column: span 6;
      }
    }
    @container _container (min-width: 551px) {
      ._user._tpl_searchForm .catdog li {
        grid-column: span 2;
      }
    }
    ._user._tpl_searchForm .catdog li label {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 0.35em;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      height: 100%;
      font-weight: bold;
      color: var(--color);
      background-color: color-mix(in srgb, var(--color) 5%, white);
      border: 2px solid color-mix(in srgb, var(--color) 25%, white);
      border-radius: var(--radius-m);
      transition: 0.25s;
      padding: 1em;
    }
    ._user._tpl_searchForm .catdog li label:hover {
      background-color: color-mix(in srgb, var(--color) 25%, white);
      border-color: color-mix(in srgb, var(--color) 50%, white);
    }
    ._user._tpl_searchForm .catdog li label:has(:checked) {
      background-color: color-mix(in srgb, var(--color) 25%, white);
    }
    ._user._tpl_searchForm .catdog li label:has(:checked)::after {
      font-family: "FontAwesome solid";
      content: "\f14a";
      vertical-align: baseline;
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD001]) {
      --color: var(--color-dog);
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD001])::before {
      font-family: "FontAwesome solid";
      content: "\e573";
      vertical-align: baseline;
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD002]) {
      --color: var(--color-cat);
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD002])::before {
      font-family: "FontAwesome solid";
      content: "\e572";
      vertical-align: baseline;
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD003]) {
      --color: darkorange;
    }
    ._user._tpl_searchForm .catdog li label:has([value=UD003])::before {
      font-family: "FontAwesome solid";
      content: "\e574";
      vertical-align: baseline;
    }
    ._user._tpl_searchForm .catdog li label::after {
      font-family: "FontAwesome regular";
      content: "\f0c8";
      vertical-align: baseline;
    }
    ._user._tpl_searchForm .catdog li input {
      display: none;
    }
    ._user._tpl_searchForm .top dl {
      grid-column: span 3;
    }
    ._user._tpl_searchForm .bottom dl {
      grid-column: span 2;
    }
    ._user._tpl_searchForm .u-formFooter {
      margin: 0;
    }
    ._user._tpl_searchForm [type=submit] {
      max-width: 300px;
      background-color: var(--color-sub);
      padding: 0.75em;
    }
    ._user._info ._b {
      margin-bottom: 0;
    }
    ._user._info ._f {
      padding: 0;
    }
    ._user._search ._b {
      margin: 0;
    }
    ._user._search ._d {
      background-color: var(--color-blue-light);
      padding-bottom: 5vh;
    }
    ._user._search ._d .u-sectionHeader {
      -webkit-justify-content: center;
      justify-content: center;
      margin-bottom: 1em;
    }
    ._user._search ._f {
      max-width: var(--width-max);
      margin-right: auto;
      margin-left: auto;
    }
    ._user._search ._f .userList {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 2em;
    }
    ._user._search ._f .userList > li {
      width: 200px;
      margin-inline: auto;
    }
    ._user._search ._f .userList h3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-align: center;
      margin: 0.5em 0;
    }
    ._user._search ._f .userList .skip {
      max-width: 10em;
      margin: 0.75em auto 0;
      font-size: 0.6em;
    }
  }
}