@charset "UTF-8";
/* ******************************
 *
 * FONT SETTING
 *
 * ****************************** */
@font-face {
  font-family: "HelveticaNeueCyr";
  src: url("/assets/fonts/HelveticaNeueCyr_Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueCyr";
  src: url("/assets/fonts/HelveticaNeueCyr_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/* ******************************
 *
 * VARS
 *
 * ****************************** */
:root {
  --color-black: rgb(18, 18, 18);
  --color-black2: #1D1D1D;
  --frame-color: rgb(18, 18, 18);
  --canvas-color: #F0F0F0;
  --base-color: rgb(255, 255, 255);
  --base-lighter-color: #FFFFFF;
  --border-color: #585858;
  --font-color: rgb(18, 18, 18);
  --font-bg-color: #CDCDCD;
  --font-desc-color: #464646;
  --color-grad-light: #c6c6c2;
  --color-grad-dark: #808094;
  --color-link: #2a62ad;
  --color-grad: linear-gradient(110deg, var(--color-grad-dark) 0%, var(--color-grad-light) 100%);
  --color-border: #968e96;
  --color-border-light: #ccc;
  --imgw-color: transparent;
  --color-white: #FFFFFF;
  --color-gray: #EDEDED;
  --neumo-sizeS: 2px 2px 8px #494949, -2px -2px 8px #252525;
  --neumo-sizeL: 4px 4px 16px #252525, -4px -4px 16px #494949;
  --secondary-color: #00c896;
  --tertiary-color: #f2ecff;
  --button-bg-color: rgba(216, 216, 216, 0.075);
  --button-border: solid 1px rgba(216, 216, 216, 0.175);
  --font-primary: YakuHanJP, helvetica-neue-lt-pro, source-han-sans-vf, serif;
  --font-primary-ja: var(--font-primary);
  --font-primary-en: YakuHanJP, "ivymode", "GenWanMin2JP", sans-serif;
  --font-secondary: var(--font-primary-en);
  --font-description: var(--font-primary);
  --easeing-hover: cubic-bezier(0.78, 0.13, 0.14, 0.84);
  --font-hasweny: "hasweny", sans-serif;
  --font-angie: "angie-sans", sans-serif;
  --font-garnedia: "garnedia", sans-serif;
  --font-unique-ja: YakuHanJP, "ab-polcadot", sans-serif;
  --font-unique-en: YakuHanJP, "punto", sans-serif;
  --easing-cubic1: cubic-bezier(0,.33,0,1);
  --lg-blur: 18px;
  --lg-alpha: 0.28; /* ベースの白膜の濃さ */
  --lg-sat: 1.35; /* 背景の彩度UP */
  --lg-ct: 1.04; /* 背景のコントラストUP */
  --lg-radius: 18px;
  --lg-border-strong: rgba(255,255,255,.35);
  --lg-border-soft: rgba(255,255,255,.18);
  --lg-shadow: 0 12px 40px rgba(0,0,0,.16);
  --lg-noise: 0.05; /* ノイズの濃さ（0~.15推奨） */
  --lg-glint: rgba(255,255,255,.55);
  --lg-caustic-a: rgba(255,255,255,.18);
  --lg-caustic-b: rgba(255,255,255,.10);
  --lg-x: 50%; /* JSで動かすハイライト位置 */
  --lg-y: 0%;
  --lg-rot: 0turn;
}

/* ******************************
 *
 * RESPONSIVE SETTING
 *
 * ****************************** */
/* ******************************
 *
 * COLOR SETTING
 *
 * ****************************** */
/* ******************************
 *
 * FUNCTIONS
 *
 * ****************************** */
/* ******************************
 *
 * transition timing
 *
 * ****************************** */
/* ******************************
 *
 * keyframes
 *
 * ****************************** */
@-webkit-keyframes scrBarY {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: center top;
            transform-origin: center top;
  }
  45% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: center top;
            transform-origin: center top;
  }
  55% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }
}
@keyframes scrBarY {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: center top;
            transform-origin: center top;
  }
  45% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: center top;
            transform-origin: center top;
  }
  55% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }
}
@-webkit-keyframes scrBarX {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  45% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  55% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
}
@keyframes scrBarX {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  45% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  55% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
}
@-webkit-keyframes scrBarXRV {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  45% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  55% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
}
@keyframes scrBarXRV {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  45% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center left;
            transform-origin: center left;
  }
  55% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: center right;
            transform-origin: center right;
  }
}
@-webkit-keyframes sliderIntro {
  0% {
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  1% {
    opacity: 1;
    -webkit-transform: translateX(10%) scale(1.1);
            transform: translateX(10%) scale(1.1);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
            clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
  }
}
@keyframes sliderIntro {
  0% {
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  1% {
    opacity: 1;
    -webkit-transform: translateX(10%) scale(1.1);
            transform: translateX(10%) scale(1.1);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
            clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
  }
}
@-webkit-keyframes sliderOutro {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes sliderOutro {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@-webkit-keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loopClRv {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes loopClRv {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes innerloopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes innerloopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes loopClVert {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes loopClVert {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes loopClVertRv {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes loopClVertRv {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes floatAnim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem);
  }
  55% {
    -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes floatAnim {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  45% {
    -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem);
  }
  55% {
    -webkit-transform: translateY(-1.5rem);
            transform: translateY(-1.5rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes floatAnim2 {
  0% {
    -webkit-transform: scale(1.4) translateY(0);
            transform: scale(1.4) translateY(0);
  }
  45% {
    -webkit-transform: scale(1.4) translateY(-1%);
            transform: scale(1.4) translateY(-1%);
  }
  55% {
    -webkit-transform: scale(1.4) translateY(-1%);
            transform: scale(1.4) translateY(-1%);
  }
  100% {
    -webkit-transform: scale(1.4) translateY(0);
            transform: scale(1.4) translateY(0);
  }
}
@keyframes floatAnim2 {
  0% {
    -webkit-transform: scale(1.4) translateY(0);
            transform: scale(1.4) translateY(0);
  }
  45% {
    -webkit-transform: scale(1.4) translateY(-1%);
            transform: scale(1.4) translateY(-1%);
  }
  55% {
    -webkit-transform: scale(1.4) translateY(-1%);
            transform: scale(1.4) translateY(-1%);
  }
  100% {
    -webkit-transform: scale(1.4) translateY(0);
            transform: scale(1.4) translateY(0);
  }
}
@-webkit-keyframes cosmoX01 {
  0% {
    -webkit-transform: translateY(-5%) rotateX(70deg) rotateY(-25deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(70deg) rotateY(-25deg) rotateZ(55deg);
  }
  100% {
    -webkit-transform: translateY(-5%) rotateX(350deg) rotateY(-25deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(350deg) rotateY(-25deg) rotateZ(55deg);
  }
}
@keyframes cosmoX01 {
  0% {
    -webkit-transform: translateY(-5%) rotateX(70deg) rotateY(-25deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(70deg) rotateY(-25deg) rotateZ(55deg);
  }
  100% {
    -webkit-transform: translateY(-5%) rotateX(350deg) rotateY(-25deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(350deg) rotateY(-25deg) rotateZ(55deg);
  }
}
@-webkit-keyframes cosmoX02 {
  0% {
    -webkit-transform: translateY(-5%) rotateX(65deg) rotateY(-40deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(65deg) rotateY(-40deg) rotateZ(55deg);
  }
  100% {
    -webkit-transform: translateY(-5%) rotateX(420deg) rotateY(-40deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(420deg) rotateY(-40deg) rotateZ(55deg);
  }
}
@keyframes cosmoX02 {
  0% {
    -webkit-transform: translateY(-5%) rotateX(65deg) rotateY(-40deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(65deg) rotateY(-40deg) rotateZ(55deg);
  }
  100% {
    -webkit-transform: translateY(-5%) rotateX(420deg) rotateY(-40deg) rotateZ(55deg);
            transform: translateY(-5%) rotateX(420deg) rotateY(-40deg) rotateZ(55deg);
  }
}
@-webkit-keyframes ceepMove {
  0% {
    -webkit-transform: translateX(-123px);
            transform: translateX(-123px);
  }
  50% {
    -webkit-transform: translateX(123px);
            transform: translateX(123px);
  }
  100% {
    -webkit-transform: translateX(-123px);
            transform: translateX(-123px);
  }
}
@keyframes ceepMove {
  0% {
    -webkit-transform: translateX(-123px);
            transform: translateX(-123px);
  }
  50% {
    -webkit-transform: translateX(123px);
            transform: translateX(123px);
  }
  100% {
    -webkit-transform: translateX(-123px);
            transform: translateX(-123px);
  }
}
@-webkit-keyframes menuTrans {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%) rotateX(0deg);
            transform: translateY(0%) rotateX(0deg);
  }
  49% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(90deg);
            transform: translateY(-50%) rotateX(90deg);
  }
  51% {
    opacity: 0;
    -webkit-transform: translateY(50%) rotateX(-90deg);
            transform: translateY(50%) rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%) rotateX(0deg);
            transform: translateY(0%) rotateX(0deg);
  }
}
@keyframes menuTrans {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%) rotateX(0deg);
            transform: translateY(0%) rotateX(0deg);
  }
  49% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(90deg);
            transform: translateY(-50%) rotateX(90deg);
  }
  51% {
    opacity: 0;
    -webkit-transform: translateY(50%) rotateX(-90deg);
            transform: translateY(50%) rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%) rotateX(0deg);
            transform: translateY(0%) rotateX(0deg);
  }
}
@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
}
@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(250deg);
            transform: rotate(250deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 245;
  }
  70% {
    stroke-dashoffset: 61.25;
    -webkit-transform: rotate(205deg);
            transform: rotate(205deg);
  }
  100% {
    stroke-dashoffset: 245;
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 245;
  }
  70% {
    stroke-dashoffset: 61.25;
    -webkit-transform: rotate(205deg);
            transform: rotate(205deg);
  }
  100% {
    stroke-dashoffset: 245;
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg);
  }
}
@-webkit-keyframes vertical-translate {
  0% {
    opacity: 0;
    top: -20%;
  }
  25% {
    opacity: 1;
    top: 50%;
  }
  75% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 120%;
  }
}
@keyframes vertical-translate {
  0% {
    opacity: 0;
    top: -20%;
  }
  25% {
    opacity: 1;
    top: 50%;
  }
  75% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 120%;
  }
}
@-webkit-keyframes waveGrad {
  0% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
  25% {
    -webkit-filter: contrast(1.5);
            filter: contrast(1.5);
  }
  50% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
  75% {
    -webkit-filter: contrast(0.5);
            filter: contrast(0.5);
  }
  100% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
}
@keyframes waveGrad {
  0% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
  25% {
    -webkit-filter: contrast(1.5);
            filter: contrast(1.5);
  }
  50% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
  75% {
    -webkit-filter: contrast(0.5);
            filter: contrast(0.5);
  }
  100% {
    -webkit-filter: contrast(1);
            filter: contrast(1);
  }
}
@-webkit-keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@-webkit-keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.svHero {
  position: relative;
  width: 100%;
  height: 100svh;
}
.svHero_inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.svHero_copy {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  color: var(--color-white);
}
@media screen and (min-width: 320px) {
  .svHero_copy {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 0 7.5% 28% 7.5%;
  }
}
@media screen and (min-width: 768px) {
  .svHero_copy {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 0 7.5% 5% 7.5%;
  }
}
.svHero_desc {
  font-size: 1rem;
  line-height: 1.72;
}
@media screen and (min-width: 320px) {
  .svHero_desc {
    padding: 6rem 0 32px;
  }
}
@media screen and (min-width: 768px) {
  .svHero_desc {
    padding: 0 0 32px 75%;
  }
}
.svHero_desc * {
  font-size: inherit;
}
.svHero_desc h1 {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 132%;
  color: var(--color-white);
  -webkit-transform: translateY(-2rem);
          transform: translateY(-2rem);
}
.svHero_desc h2 {
  font-weight: 400;
}
.svHero_desc p {
  position: relative;
}
.svHero_desc p::after {
  content: "";
  position: absolute;
  inset: auto auto -24px 0;
  width: 1.6rem;
  height: 1px;
  background: var(--color-white);
}
.svHero_ens {
  font-family: var(--font-secondary);
  font-weight: 300;
  text-align: center;
}
@media screen and (min-width: 320px) {
  .svHero_ens {
    font-size: 8rem;
  }
}
@media screen and (min-width: 768px) {
  .svHero_ens {
    font-size: 12.4rem;
  }
}
@media screen and (min-width: 320px) {
  .svHero_ensBottom {
    font-size: 16.4%;
  }
}
@media screen and (min-width: 768px) {
  .svHero_ensBottom {
    font-size: 16.4%;
  }
}
.svHero_img {
  position: fixed;
  inset: 0;
  width: 100%;
}
.svHero_img .imgWrapper {
  height: 100%;
  padding: 0;
}

.svMain {
  position: relative;
  z-index: 1;
  background: var(--canvas-color);
}
.svMain::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 100%;
  height: 40vh;
  height: 40svh;
  background: var(--canvas-color);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(100%, black), color-stop(100%, black), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(100%, black), color-stop(100%, black), to(transparent));
          mask-image: linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%);
  -webkit-transform: translateY(-98%);
          transform: translateY(-98%);
}

#worksBody.sv {
  margin-top: 0;
}
#worksBody.sv main {
  width: 100%;
  padding: 0;
}
#worksBody.sv .inner {
  padding: 0;
}

.svFlowTitle {
  width: 100%;
}

@media screen and (min-width: 320px) {
  .svFlowTitle .ja {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 768px) {
  .svFlowTitle .ja {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 320px) {
  .svFlowTitle .en {
    font-size: 0.7rem;
  }
}
@media screen and (min-width: 768px) {
  .svFlowTitle .en {
    font-size: 0.8rem;
  }
}

.svFeature {
  margin-top: 0 !important;
}
.svFeature_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.svFeature_imgs {
  display: block;
}
@media screen and (min-width: 320px) {
  .svFeature_imgs {
    width: 100%;
    padding: 8rem 7.5vw 0;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_imgs {
    width: 50%;
    padding: 10rem 5vw 0;
  }
}
.svFeature_imgsCopyEn {
  font-family: var(--font-secondary);
  font-weight: 300;
  margin-bottom: 48px;
}
@media screen and (min-width: 320px) {
  .svFeature_imgsCopyEn {
    font-size: 3.2rem;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_imgsCopyEn {
    font-size: 4.2rem;
  }
}
.svFeature_imgsCopySub {
  font-size: 1rem;
}
@media screen and (min-width: 320px) {
  .svFeature_imgsCopyJa, .svFeature_imgsCopyDesc {
    padding: 0 0 0 9.6rem;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_imgsCopyJa, .svFeature_imgsCopyDesc {
    padding: 0 0 0 9.6rem;
  }
}
.svFeature_imgsCopyJa {
  font-weight: 400;
}
@media screen and (min-width: 320px) {
  .svFeature_imgsCopyJa {
    font-size: 1.42rem;
    margin: -1rem 0 16px;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_imgsCopyJa {
    font-size: 1.42rem;
    margin: -1rem 0 16px;
  }
}
.svFeature_imgsCopyDesc {
  line-height: 1.64;
}
@media screen and (min-width: 320px) {
  .svFeature_imgsCopyDesc {
    font-size: 1rem;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_imgsCopyDesc {
    font-size: 1rem;
    margin-bottom: 64px;
  }
}
.svFeature_imgsWrapper {
  width: 100%;
  border-radius: 16px;
}
@media screen and (min-width: 320px) {
  .svFeature_list {
    width: 100%;
    padding: 5rem 7.5vw 0;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_list {
    width: 50%;
    padding: 23.2rem 5vw 0;
  }
}
.svFeature_listWrapper {
  display: grid;
  margin-top: 64px;
}
@media screen and (min-width: 320px) {
  .svFeature_listWrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 48px;
  }
}
@media screen and (min-width: 768px) {
  .svFeature_listWrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }
}
.svFeature_listTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.32rem;
  margin-bottom: 16px;
}
.svFeature_listTitle span {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}
.svFeature_listTitle span::after {
  content: "";
  position: absolute;
  inset: 0 -10px auto auto;
  width: 1px;
  height: 100%;
  background: var(--color-black);
}
.svFeature_listTitle h3 {
  max-width: calc(100% - 16px - 1.8rem);
  font-weight: 400;
}
.svFeature_listDesc {
  line-height: 1.64;
  font-size: 1.08rem;
}

@media screen and (min-width: 320px) {
  .svWorks {
    margin-top: 128px;
  }
}
@media screen and (min-width: 768px) {
  .svWorks {
    margin-top: 128px;
  }
}
.svWorks_copy {
  font-family: var(--font-secondary);
  font-weight: 300;
}
@media screen and (min-width: 320px) {
  .svWorks_copy {
    font-size: 6.8rem;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .svWorks_copy {
    font-size: 9.6rem;
    text-align: right;
  }
}
@media screen and (min-width: 320px) {
  .svWorks_inner {
    padding: 0 5vw;
  }
}
@media screen and (min-width: 768px) {
  .svWorks_inner {
    padding: 0 2.5vw;
  }
}
.svWorks .svFlowTitle {
  padding: 0 2.5vw;
}
@media screen and (min-width: 320px) {
  .svWorks .svFlowTitle {
    margin: 4rem 0px 6rem;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .svWorks .svFlowTitle {
    margin: -7rem 0px 6rem;
    text-align: left;
  }
}
.svWorks .showcase_wrapper {
  display: grid;
  padding: 0;
  margin-top: 32px;
}
@media screen and (min-width: 320px) {
  .svWorks .showcase_wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 64px;
  }
}
@media screen and (min-width: 768px) {
  .svWorks .showcase_wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 72px 24px;
  }
}
.svWorks .showcase_item {
  width: auto;
}
.svWorks .showcase_figure .imgWrapper {
  padding-bottom: 66.67%;
}
@media screen and (min-width: 320px) {
  .svWorks .showcase_figure .imgWrapper {
    border-radius: 8px;
  }
}
@media screen and (min-width: 768px) {
  .svWorks .showcase_figure .imgWrapper {
    border-radius: 16px;
  }
}

.svFlowTitleInner {
  position: relative;
}

.svFlowTitleInner {
  inset: auto;
}

.svService {
  margin-top: 128px;
}
@media screen and (min-width: 320px) {
  .svService {
    padding: 0 5vw;
  }
}
@media screen and (min-width: 768px) {
  .svService {
    padding: 32px 12.5% 0;
  }
}
.svService .svFlowTitle {
  width: 100%;
}
.svService_list {
  display: grid;
}
@media screen and (min-width: 320px) {
  .svService_list {
    margin-top: 48px;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 16px;
  }
}
@media screen and (min-width: 768px) {
  .svService_list {
    margin-top: 48px;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 24px;
  }
}
.svService_listfigure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.svService_listfigure img {
  display: block;
  width: 64%;
  height: auto;
}
.svService_listname {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: solid 1px;
}
@media screen and (min-width: 320px) {
  .svService_listname {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 768px) {
  .svService_listname {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
}
.svService_listnameNum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 320px) {
  .svService_listnameNum {
    width: 3rem;
    font-size: 1.04rem;
  }
}
@media screen and (min-width: 768px) {
  .svService_listnameNum {
    width: 4rem;
    font-size: 1.24rem;
  }
}
.svService_listnameHead {
  font-size: 1.24rem;
  border-left: solid 1px;
}
@media screen and (min-width: 320px) {
  .svService_listnameHead {
    width: calc(100% - 3rem);
    padding-left: 0.8rem;
  }
}
@media screen and (min-width: 768px) {
  .svService_listnameHead {
    width: calc(100% - 4rem);
    padding-left: 1.6rem;
  }
}
.svService_listnameHeadJa {
  font-weight: 400;
}
.svService_listnameHeadEn {
  font-size: 64%;
  margin-top: 4px;
  opacity: 0.8;
}
.svService_listDesc {
  font-size: 1.04rem;
}/*# sourceMappingURL=sv-single.css.map */