/*
Theme Name: Popborne Theme
Theme URI: 
Description: popborneベータ版のテーマ。
Version: 1.0
Author: 株式会社ポップボーン
*/
@charset "UTF-8";

html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%
}

*, ::after, ::before {
  box-sizing: inherit;
  background-repeat: no-repeat
}

::after, ::before {
  text-decoration: inherit;
  vertical-align: inherit
}

* {
  padding: 0;
  margin: 0
}

audio:not([controls]) {
  display: none;
  height: 0
}

hr {
  overflow: visible
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}

summary {
  display: list-item
}

small {
  font-size: 80%
}

[hidden], template {
  display: none
}

abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted
}

a {
  background-color: transparent;
  color: inherit;
  -webkit-text-decoration-skip: objects
}

a:active, a:hover {
  outline-width: 0
}

code, kbd, pre, samp {
  font-family: monospace, monospace
}

b, strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  color: #000;
  background-color: #ff0
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

input {
  border-radius: 0
}

img {
  border-style: none
}

progress {
  vertical-align: baseline
}

svg:not(:root) {
  overflow: hidden
}

audio, canvas, progress, video {
  display: inline-block
}

[aria-busy=true] {
  cursor: progress
}

[aria-controls] {
  cursor: pointer
}

[aria-disabled] {
  cursor: default
}

::-moz-selection {
  color: #000;
  text-shadow: none;
  background-color: #b3d4fc
}

::selection {
  color: #000;
  text-shadow: none;
  background-color: #b3d4fc
}


@font-face {
  font-family: "Rounded-L-Mplus-Black";
  src: url("fonts/rounded-l-mplus-2p-black-ss.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rounded-L-Mplus-Reglular";
  src: url("fonts/rounded-l-mplus-2p-regular-ss.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rounded-L-Mplus-Bold";
  src: url("fonts/rounded-l-mplus-2p-bold-ss.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rounded-L-Mplus-Medium";
  src: url("fonts/rounded-l-mplus-2p-medium-ss.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rounded-L-Mplus-Heavy";
  src: url("fonts/rounded-l-mplus-2p-heavy-ss.ttf") format("woff");
  font-weight: normal;
  font-style: normal;
}

.ja {
  font-family: "Rounded-L-Mplus-Bold",sans-serif;
  font-weight: 200
}

.en {
  font-family: "Rounded-L-Mplus-Bold", sans-serif;
  font-style: normal;
}

.kv-title {
  font-family: "Rounded-L-Mplus-Black", sans-serif;
  font-style: normal;
  font-size: 96px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.kv-copy {
  font-family: "Rounded-L-Mplus-Bold",sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.kv-description {
  font-family: "Rounded-L-Mplus-Reglular",sans-serif;
  font-size: 14px;
  font-weight: 200;
  line-height: 3;
  letter-spacing: 0.1em;
}

.l-toggle .l-gnav .en {
  font-family: "Rounded-L-Mplus-Black", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em
}

.l-toggle .l-gnav .jp {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em
}

.l-toggle .entry-btn .en {
  font-size: 20px
}

.c-topTitle {
  font-family: "Rounded-L-Mplus-Black", sans-serif;
  font-style: normal;
  text-transform: uppercase
}

.c-topTitle>* {
  line-height: 1.2
}

.c-topTitle sup {
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap
}

.c-topTitle b {
  font-size: 70px;
  line-height: 1.38;
}

.c-topTitle .ja {
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .48em
}

.c-section .c-topTitle b {
  font-size: 40px
}

.c-section .c-topTitle .ja {
  font-size: 16px
}

.c-btn {
  width :130px;
  padding: 7px 0;
  background: #d2ff00;
  text-align: center;
  color: #000000;
}

.c-pageLead {
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .08em
}

.l-intro .lead {
  font-family: "Rounded-L-Mplus-Medium", sans-serif;
  font-size: 16px;
  line-height: 2.5;
  letter-spacing: .32em
}

.l-intro .copy {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .15em
}

.l-intro .copy .box {
  font-weight: inherit
}

.l-intro .txt {
   font-family: "Rounded-L-Mplus-Medium", sans-serif;
  font-size: 16px;
  line-height: 3;
  letter-spacing: .16em
}

.l-intro .txt * {
  letter-spacing: inherit
}

.success-list .name .en {
  font-size: 30px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .24em
}

.success-list .name .jp {
  font-size: 17px
}

.success-list .lead {
  font-size: 22px;
  letter-spacing: .24em
}

.success-list .txt {
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .16em
}

.reason-list .num {
  margin-top: 24px;
  font-family: Prompt, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase
}

.reason-list .title {
  font-size: 17px
}

.reason-list .txt {
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .16em
}

.works-list .txt-wrap .num {
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  color: #523fce;
  text-transform: uppercase;
  letter-spacing: .24em
}

.works-list .txt-wrap .title {
  font-size: 17px
}

.works-list .txt-wrap .title .box {
  line-height: 2.2
}

.works-list .txt-wrap .txt {
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .08em
}

.wp-pagenavi {
  font-family: Prompt, sans-serif;
  font-style: normal;
  font-weight: 900
}

.welfare-list .title {
  font-size: 15px
}

.welfare-list .title .box {
  line-height: 2.2
}

.welfare-list .txt {
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .16em
}

.security-section {
  font-size: 12px;
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: .16em
}

.security-section .security-list .item::before {
  font-family: Prompt, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.8
}

.l-footer {
  font-size: 11px
}

.l-footer .copyright {
  font-size: inherit
}

body {
  box-sizing: border-box;
  font-family: "Rounded-L-Mplus-Bold",sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background: #0c0a26 url(./images/bg.png) center top/calc(260px / 2) fixed;
  letter-spacing:0.1em;
}

ul {
  list-style: none
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  border: none;
  border-style: none
}

a {
  text-decoration: inherit
}

.svgClipPath {
  position: absolute;
  width: 1px;
  height: 1px
}

.c-topTitle {
  position: relative;
  z-index: 1;
  padding-bottom: 24px;
  margin-bottom: 64px
}

.c-topTitle>* {
  display: block
}

.c-topTitle span:not([class]) {
  display: inline-block
}

.c-topTitle sup {
  position: static;
  white-space: nowrap
}

.c-topTitle sup img {
  width: 138px;
  height: 8px;
  vertical-align: middle
}

.c-topTitle b {
  margin-bottom: 8px
}

.c-topTitle .ja.wrap {
  text-transform: none
}

.c-topTitle::after {
  position: absolute;
  bottom: 0;
  top: 170px;
  left: -50px;
  width: 350px;
  height: 50px;
  content: "";
  background-size:contain;
  background-image: url("./images/border.png");
}

.c-boxTxt {
  position: relative;
  color: #0c0c0c
}

.c-boxTxt .box {
  position: relative;
  display: inline-block;
  padding: 4px .5em;
  overflow: hidden;
  line-height: 1.7;
  vertical-align: middle
}

.c-boxTxt .box:not(:first-child) {
  margin-top: 8px
}

.c-boxTxt .box::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: "";
  background: #d2ff00;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

.c-boxTxt .box>span {
  position: relative;
  z-index: 2
}

.c-boxTxt .box .wrap span {
  display: inline-block
}

.c-boxInline {
  display: block;
  padding: 0 .8em;
  color: #0c0c0c
}

.c-boxInline .box {
  display: inline;
  padding: .6em 0;
  line-height: 2.8;
  background: #fff;
  box-shadow: -.8em 0 0 #fff, .8em 0 0 #fff
}

.c-boxInline .box::after {
  position: relative;
  top: -.1em;
  right: auto;
  display: inline-block;
  margin: 0 0 0 .3em;
  vertical-align: middle
}

.c-link {
  position: relative;
  display: inline-block;
  margin-top: 3em;
  color: #fff
}

.c-link::before {
  position: absolute;
  top: calc(50% - .5em);
  right: 35px;
  width: .8em;
  height: .8em;
  content: "";
  border-top: .15em solid currentcolor;
  border-right: .15em solid currentcolor;
  transition: -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.c-link:hover::before {
  transition-delay: .1s;
  -webkit-transform: rotate(45deg) translate(3px, -3px);
  transform: rotate(45deg) translate(3px, -3px)
}

.c-link svg {
  position: relative;
  top: -.1em;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-left: -1.2em;
  vertical-align: middle;
  fill: none;
  stroke: #d2ff00;
  stroke-dasharray: 222;
  stroke-dashoffset: 444;
  stroke-width: 3;
  -webkit-clip-path: url(#cLinkMask);
  clip-path: url(#cLinkMask)
}

.c-link.out svg, .c-link:not(.out):hover svg {
  transition: stroke-dashoffset .3s cubic-bezier(.215, .61, .355, 1)
}

.c-link.out svg {
  stroke-dashoffset: 0
}

.c-link:not(.out):hover svg {
  stroke-dashoffset: 222
}

.l-txtContainer:not([style]) {
  z-index: 1
}

#page {
  position: relative;
  overflow: hidden;
}

.l-main {
  margin: 96px auto 0
}

.l-main * {
  box-sizing: border-box
}

.l-topContents .l-main {
  max-width: 980px
}

.l-contents .l-intro, .l-pageTitle, .l-section {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto
}

#page.anima .l-header {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.l-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #0a0057 url(./images/bg.png) center top/calc(260px / 2) fixed;
  will-change: background-position;
}

.l-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.l-loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  text-align: center;
  transition: opacity .2s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .2s, transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .2s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

.l-loader svg {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  fill: none;
  stroke: #412ea9;
  stroke-width: 3;
  -webkit-animation: loading 1s linear infinite;
  animation: loading 1s linear infinite;
}

#page:not(.loading) .l-loader {
  opacity: 0;
  -webkit-transform: scale(.5);
  transform: scale(.5)
}

@-webkit-keyframes loading {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes loading {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.l-cover {
  position: absolute;
  z-index: -1;
  color: #0a0057
}

.l-cover::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background: currentcolor
}

.l-main .l-cover {
  top: 0;
  left: 0;
  width: 40vw;
  height: 80vw
}

.l-main .l-cover::after {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0
}

.l-header {
  position: relative;
  z-index: 1000
}

.l-header .logo a {
  display: flex;
  align-items: center
}

.l-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.l-footer {
  position: relative
}

.l-footer .logo {
  margin-bottom: 8px
}

.l-footer .logo a {
  display: flex;
  align-items: center
}

.l-footer .fnav {
  margin-left: auto
}

.l-footer .fnav a {
  display: block;
  color: #6c6981;
  transition: color .3s
}

.l-footer .fnav a:hover {
  color: #fff
}

.l-footer .fnav-list {
  display: flex;
  align-items: center;
}

.l-footer .fnav-list a {
  position: relative;
  padding-bottom: 4px;
}

.l-footer .contentsinfo {
  color:#6c6981;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  letter-spacing: .24em;
}

.l-footer .copyright {
  margin-left: 32px;
  color: #6c6981
}

.l-footer .pagetop {
  position: absolute
}

.l-footer .pagetop a {
  position: relative;
  display: block
}

.l-footer .pagetop a::before {
  position: absolute;
  top: calc(50% - 4px);
  right: 16px;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.l-footer .pagetop a:hover::before {
  -webkit-transform: rotate(-45deg) translate(2px, -2px);
  transform: rotate(-45deg) translate(2px, -2px)
}

.l-kv {
  z-index: 1;
  height: 100vh;
  padding: 100px 5vw 0
}

.kv-visual, .kv-visual img, .kv-visual svg {
  position: absolute;
  top: 0;
  left: 0
}

.kv-visual {
  z-index: -1
}

.kv-visual img, .kv-visual svg {
  width: 100%;
  height: 100%
}

.kv-visual .layer5 {
  opacity: .8
}

.kv-visual svg image {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.l-container.active .kv-visual svg image {
  -webkit-animation: effect 20s infinite linear;
  animation: effect 20s infinite linear
}

.l-container.active .kv-visual .layer1 image {
  -webkit-animation-duration: 13s;
  animation-duration: 13s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

.l-container.active .kv-visual .layer2 image {
  -webkit-animation-duration: 19s;
  animation-duration: 19s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease
}

.l-container.active .kv-visual .layer3 image {
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
  -webkit-animation-direction: reverse-alternate;
  animation-direction: reverse-alternate
}

.l-container.active .kv-visual .layer4 image {
  -webkit-animation-name: effect2;
  animation-name: effect2;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

@-webkit-keyframes effect {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes effect {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@-webkit-keyframes effect2 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
  }
}

@keyframes effect2 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
  }
}

.kv-title {
  margin-bottom: .2em
}

.kv-copy {
  margin-bottom: 1.2em
}

.kv-description {
  -webkit-transform: scale(.8);
  transform: scale(.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

@-webkit-keyframes scroll-border {
  0%, 1% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  16% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  84% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
  100%, 99% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
}

@keyframes scroll-border {
  0%, 1% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  16% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  84% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
  100%, 99% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
}

.kv-particle {
  position: absolute;
  bottom: -3vh;
  left: 0;
  z-index: -1;
  width: 100%
}

.kv-particle li, .kv-particle span {
  position: absolute
}

.kv-particle svg {
  width: 100%;
  height: 100%;
  fill: currentcolor
}

@-webkit-keyframes emerge1 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-420px);
    transform: translateY(-420px)
  }
}

@keyframes emerge1 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-420px);
    transform: translateY(-420px)
  }
}

@-webkit-keyframes emerge2 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-560px);
    transform: translateY(-560px)
  }
}

@keyframes emerge2 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-560px);
    transform: translateY(-560px)
  }
}

@-webkit-keyframes emerge3 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-700px);
    transform: translateY(-700px)
  }
}

@keyframes emerge3 {
  0% {
    color: #1eebd7;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
  40% {
    color: #412ea9;
    opacity: 1
  }
  100% {
    color: #412ea9;
    opacity: 0;
    -webkit-transform: translateY(-700px);
    transform: translateY(-700px)
  }
}

@-webkit-keyframes sway1 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(1vw) rotateY(360deg);
    transform: translateX(1vw) rotateY(360deg)
  }
}

@keyframes sway1 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(1vw) rotateY(360deg);
    transform: translateX(1vw) rotateY(360deg)
  }
}

@-webkit-keyframes sway2 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(2vw) rotateY(240deg);
    transform: translateX(2vw) rotateY(240deg)
  }
}

@keyframes sway2 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(2vw) rotateY(240deg);
    transform: translateX(2vw) rotateY(240deg)
  }
}

@-webkit-keyframes sway3 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(3vw) rotateY(180deg);
    transform: translateX(3vw) rotateY(180deg)
  }
}

@keyframes sway3 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(3vw) rotateY(180deg);
    transform: translateX(3vw) rotateY(180deg)
  }
}

@-webkit-keyframes sway4 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(4vw) rotateY(240deg);
    transform: translateX(4vw) rotateY(240deg)
  }
}

@keyframes sway4 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(4vw) rotateY(240deg);
    transform: translateX(4vw) rotateY(240deg)
  }
}

@-webkit-keyframes sway5 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(5vw) rotateY(360deg);
    transform: translateX(5vw) rotateY(360deg)
  }
}

@keyframes sway5 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(5vw) rotateY(360deg);
    transform: translateX(5vw) rotateY(360deg)
  }
}

@-webkit-keyframes rotateZ {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg)
  }
}

@keyframes rotateZ {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg)
  }
}

@keyframes sway1 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(7px) rotateY(360deg);
    transform: translateX(7px) rotateY(360deg)
  }
}

@keyframes sway2 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(14px) rotateY(240deg);
    transform: translateX(14px) rotateY(240deg)
  }
}

@keyframes sway3 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(21px) rotateY(180deg);
    transform: translateX(21px) rotateY(180deg)
  }
}

@keyframes sway4 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(28px) rotateY(240deg);
    transform: translateX(28px) rotateY(240deg)
  }
}

@keyframes sway5 {
  from {
    -webkit-transform: none;
    transform: none
  }
  to {
    -webkit-transform: translateX(35px) rotateY(360deg);
    transform: translateX(35px) rotateY(360deg)
  }
}

.l.kv .kv-particle li, .l.kv .kv-title, .l.kv .l-cover {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d
}

.l-container.anima .l-cover {
  transition: -webkit-transform .8s cubic-bezier(.215, .61, .355, 1);
  transition: transform .8s cubic-bezier(.215, .61, .355, 1);
  transition: transform .8s cubic-bezier(.215, .61, .355, 1), -webkit-transform .8s cubic-bezier(.215, .61, .355, 1)
}

.l-container.anima .l-kv .kv-visual {
  transition: opacity 0s 1.2s, -webkit-transform 1s cubic-bezier(.215, .61, .355, 1);
  transition: opacity 0s 1.2s, transform 1s cubic-bezier(.215, .61, .355, 1);
  transition: opacity 0s 1.2s, transform 1s cubic-bezier(.215, .61, .355, 1), -webkit-transform 1s cubic-bezier(.215, .61, .355, 1)
}

.l-container.anima .l-kv .tx-mask span {
  transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

.l-container.anima .l-kv .tx-mask:nth-child(1) span {
  transition-delay: .2s
}

.l-container.anima .l-kv .tx-mask:nth-child(2) span {
  transition-delay: .4s
}

.l-container.anima .l-kv .tx-mask:nth-child(3) span {
  transition-delay: .6s
}

.l-container.anima .l-kv .kv-copy .tx-mask span {
  transition-delay: .8s
}

.l-container.anima .l-kv .kv-description .tx-mask:nth-child(1) span {
  transition-delay: 1s
}

.l-container.anima .l-kv .kv-description .tx-mask:nth-child(2) span {
  transition-delay: 1.1s
}

.l-container.anima .l-kv .kv-description .tx-mask:nth-child(3) span {
  transition-delay: 1.2s
}

.l-container.anima .kv-sparkle li, .l-container.anima .l-header, .l-container.anima .l-kv {
  transition: opacity .6s .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s .4s cubic-bezier(.215, .61, .355, 1), transform .6s .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s .4s cubic-bezier(.215, .61, .355, 1), transform .6s .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s .4s cubic-bezier(.215, .61, .355, 1)
}

.l-container.anima .l-header {
  transition-delay: 1s!important;
  transition-duration: .6s!important
}

.l-container.anima .l-kv {
  transition-delay: 1.2s
}

.l-container.anima .kv-sparkle li {
  transition-delay: 0s;
  transition-duration: 1s
}

.l-kv .tx-mask, .l-kv .tx-mask span {
  display: block;
  font-style: normal
}

.l-kv .tx-mask {
  overflow: hidden
}

.l-container:not(.cover):not(.active) .kv-visual {
  opacity: 0
}

.l-container:not(.active) {
  position: fixed;
  width: 100%;
  height: 100%
}

.l-container:not(.active) .l-header {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px)
}

.l-container:not(.active) .kv-visual {
  -webkit-transform: translateY(4vw);
  transform: translateY(4vw)
}

.l-container:not(.active) .l-kv .tx-mask span {
  -webkit-transform: translateY(100%);
  transform: translateY(100%)
}

.l-container:not(.active) .l-kv {
  opacity: 0;
  -webkit-transform: translateX(16px) rotate(90deg);
  transform: translateX(16px) rotate(90deg)
}

.l-container.cover.anima .l-cover {
  transition: -webkit-transform 1s cubic-bezier(.95, .05, .795, .035);
  transition: transform 1s cubic-bezier(.95, .05, .795, .035);
  transition: transform 1s cubic-bezier(.95, .05, .795, .035), -webkit-transform 1s cubic-bezier(.95, .05, .795, .035)
}

.l-container.active.anima .l-cover {
  transition: -webkit-transform 1.2s cubic-bezier(.075, .82, .165, 1);
  transition: transform 1.2s cubic-bezier(.075, .82, .165, 1);
  transition: transform 1.2s cubic-bezier(.075, .82, .165, 1), -webkit-transform 1.2s cubic-bezier(.075, .82, .165, 1)
}

.l-container.active .c-scroll::after {
  -webkit-animation: scroll-border 4s -2s infinite cubic-bezier(.215, .61, .355, 1);
  animation: scroll-border 4s -2s infinite cubic-bezier(.215, .61, .355, 1);
  will-change: animation
}

.l-container.active .l-kv.paused .c-scroll::after {
  -webkit-animation-play-state: paused;
  animation-play-state: paused
}

.l-container.active .kv-particle li, .l-container.active .kv-particle span, .l-container.active .kv-particle svg {
  will-change: animation
}

.l-container.active .kv-particle li {
  position: absolute;
  -webkit-animation: emerge1 10s infinite cubic-bezier(.215, .61, .355, 1);
  animation: emerge1 10s infinite cubic-bezier(.215, .61, .355, 1)
}

.l-container.active .kv-particle li span {
  -webkit-animation: sway1 4s alternate infinite;
  animation: sway1 4s alternate infinite
}

.l-container.active .kv-particle li svg {
  -webkit-animation: rotateZ 8s infinite linear;
  animation: rotateZ 8s infinite linear
}

.l-container.active .kv-particle li:nth-child(3n+1) {
  -webkit-animation-name: emerge2;
  animation-name: emerge2
}

.l-container.active .kv-particle li:nth-child(3n+1) span {
  animation-direction: alternate-reverse
}

.l-container.active .kv-particle li:nth-child(3n+2) {
  -webkit-animation-name: emerge3;
  animation-name: emerge3
}

.l-container.active .kv-particle li:nth-child(3n+2) svg {
  animation-direction: reverse
}

.l-container.active .kv-particle li:nth-child(5n+1) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}

.l-container.active .kv-particle li:nth-child(5n+1) span {
  -webkit-animation-name: sway2;
  animation-name: sway2
}

.l-container.active .kv-particle li:nth-child(5n+1) svg {
  -webkit-animation-duration: 3s;
  animation-duration: 3s
}

.l-container.active .kv-particle li:nth-child(5n+2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.l-container.active .kv-particle li:nth-child(5n+2) span {
  -webkit-animation-name: sway3;
  animation-name: sway3
}

.l-container.active .kv-particle li:nth-child(5n+2) svg {
  -webkit-animation-duration: 4s;
  animation-duration: 4s
}

.l-container.active .kv-particle li:nth-child(5n+3) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}

.l-container.active .kv-particle li:nth-child(5n+3) span {
  -webkit-animation-name: sway4;
  animation-name: sway4
}

.l-container.active .kv-particle li:nth-child(5n+3) svg {
  -webkit-animation-duration: 5s;
  animation-duration: 5s
}

.l-container.active .kv-particle li:nth-child(5n+4) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s
}

.l-container.active .kv-particle li:nth-child(5n+4) span {
  -webkit-animation-name: sway5;
  animation-name: sway5
}

.l-container.active .kv-particle li:nth-child(5n+4) svg {
  -webkit-animation-duration: 6s;
  animation-duration: 6s
}

.l-container.active .l-kv.paused .kv-particle li {
  display: none
}

.l-intro>* {
  position: relative
}

.l-intro .lead * {
  letter-spacing: inherit
}

.l-intro .lead span {
  display: block
}

.l-intro .copy {
  margin: .8em 0 1em
}

.l-intro .copy .box {
  padding-top: 0;
  padding-bottom: 0
}

.l-intro .copy .box:not(:first-child) {
  margin-top: .3em
}

.l-intro .txt span {
  display: block
}

.l-intro .l-visual>* {
  position: absolute
}

.l-intro .l-visual .shape {
  top: 0;
  z-index: -1
}

.l-intro .l-visual .js-luxy {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d
}

.l-intro .l-visual .shape>* {
  position: absolute;
  bottom: -130px;
  opacity: .45
}

.l-intro .l-visual img {
  width: 100%;
  height: auto;
}

.l-intro .l-visual .about-bg
{
  top: -220px;
  width: 600px;
}

.l-intro .l-visual .app-bg
{
  top: -220px;
  right:400px;
  width: 500px;
}

.l-intro .l-visual .ad-bg
{
  top: -10px;
  left: 210px;
  width: 600px;
}


section.js-inview:not(.in-view) .c-topTitle .wrap span {
  -webkit-transform: translateY(1.4em);
  transform: translateY(1.4em)
}

section.js-inview:not(.in-view) .c-topTitle::after {
  height: 0
}

section.js-inview:not(.in-view) .l-visual .boy, section.js-inview:not(.in-view) .l-visual .boy-smp, section.js-inview:not(.in-view) .l-visual .girl, section.js-inview:not(.in-view) .l-visual .girl-smp {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

section.js-inview.in-view .c-topTitle .wrap span {
  transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

section.js-inview.in-view .c-topTitle::after {
  transition: height .3s cubic-bezier(.215, .61, .355, 1)
}

body:not(.paging) section.js-inview.in-view .c-topTitle sup.wrap span {
  transition-delay: .1s
}

body:not(.paging) section.js-inview.in-view .c-topTitle b.wrap span {
  transition-delay: .15s;
  transition-duration: .4s
}

body:not(.paging) section.js-inview.in-view .c-topTitle .ja.wrap span {
  transition-delay: .35s
}

body:not(.paging) section.js-inview.in-view .c-topTitle::after {
  transition-delay: .45s
}

.l-intro.js-inview:not(.in-view).message-intro .l-visual .shape {
  -webkit-clip-path: polygon(100% 0, 100% 0, 61.5% 100%, 61.5% 100%);
  clip-path: polygon(100% 0, 100% 0, 61.5% 100%, 61.5% 100%)
}

.l-intro.js-inview:not(.in-view).works-intro .l-visual .shape {
  -webkit-clip-path: polygon(0 0, 0 0, 38.5% 100%, 38.5% 100%)!important;
  clip-path: polygon(0 0, 0 0, 38.5% 100%, 38.5% 100%)!important
}

.l-intro.js-inview.in-view .l-visual .shape {
  transition: opacity .3s, -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1), -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1)
}

.l-intro.js-inview.in-view .l-visual .shape+.shape {
  transition-delay: .2s
}

.l-intro.js-inview.in-view .l-visual .boy, .l-intro.js-inview.in-view .l-visual .boy-smp, .l-intro.js-inview.in-view .l-visual .girl, .l-intro.js-inview.in-view .l-visual .girl-smp {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.l-intro.js-inview.in-view .l-visual .boy {
  transition-delay: .3s
}

.l-intro.js-inview.in-view .l-visual .girl {
  transition-delay: .4s
}

.l-intro.js-inview.in-view .l-visual .boy-smp {
  transition-delay: .45s
}

body:not(.paging) .l-intro.js-inview.in-view .c-topTitle sup.wrap span {
  transition-delay: .4s
}

body:not(.paging) .l-intro.js-inview.in-view .c-topTitle b.wrap span {
  transition-delay: .45s
}

body:not(.paging) .l-intro.js-inview.in-view .c-topTitle .ja.wrap span {
  transition-delay: .65s
}

body:not(.paging) .l-intro.js-inview.in-view .c-topTitle::after {
  transition-delay: .75s
}

body.paging.send .l-intro.js-inview.in-view .c-topTitle .ja.wrap span, body.paging.send .l-intro.js-inview.in-view .c-topTitle b.wrap span, body.paging.send .l-intro.js-inview.in-view .c-topTitle sup.wrap span, body.paging.send .l-intro.js-inview.in-view .c-topTitle::after {
  transition-delay: 0s
}

.message-intro.js-inview:not(.in-view) .l-txtContainer .copy .box .wrap span, .message-intro.js-inview:not(.in-view) .l-txtContainer .copy .box::before, .message-intro.js-inview:not(.in-view) .l-txtContainer .lead .wrap span, .message-intro.js-inview:not(.in-view) .l-txtContainer .txt .wrap span {
  opacity: 0
}

.message-intro.js-inview:not(.in-view) .l-txtContainer .lead .wrap span {
  -webkit-transform: translateY(1.8em);
  transform: translateY(1.8em)
}

.message-intro.js-inview:not(.in-view) .l-txtContainer .copy .box::before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

.message-intro.js-inview:not(.in-view) .l-txtContainer .copy .box .wrap span {
  -webkit-transform: translateY(1.4em);
  transform: translateY(1.4em)
}

.message-intro.js-inview:not(.in-view) .l-txtContainer .txt .wrap span {
  -webkit-transform: translateY(2em);
  transform: translateY(2em)
}

.message-intro.js-inview:not(.in-view) .c-link {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

.message-intro.js-inview.in-view .l-txtContainer .lead .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.message-intro.js-inview.in-view .l-txtContainer .lead .wrap:nth-child(1) span {
  transition-delay: .8s
}

.message-intro.js-inview.in-view .l-txtContainer .lead .wrap:nth-child(2) span {
  transition-delay: .85s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box::before {
  transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1)::before {
  transition-delay: .9s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(1) {
  transition-delay: .95s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(2) {
  transition-delay: 1s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(3) {
  transition-delay: 1.05s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(4) {
  transition-delay: 1.1s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(5) {
  transition-delay: 1.15s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(6) {
  transition-delay: 1.2s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(7) {
  transition-delay: 1.25s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(8) {
  transition-delay: 1.3s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(9) {
  transition-delay: 1.35s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(10) {
  transition-delay: 1.4s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(11) {
  transition-delay: 1.45s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(12) {
  transition-delay: 1.5s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(13) {
  transition-delay: 1.55s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(14) {
  transition-delay: 1.6s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(15) {
  transition-delay: 1.65s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(16) {
  transition-delay: 1.7s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(17) {
  transition-delay: 1.75s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(18) {
  transition-delay: 1.8s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(19) {
  transition-delay: 1.85s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2)::before {
  transition-delay: 1s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(1) {
  transition-delay: 1.05s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(2) {
  transition-delay: 1.1s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(3) {
  transition-delay: 1.15s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(4) {
  transition-delay: 1.2s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(5) {
  transition-delay: 1.25s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(6) {
  transition-delay: 1.3s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(7) {
  transition-delay: 1.35s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(8) {
  transition-delay: 1.4s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(9) {
  transition-delay: 1.45s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(10) {
  transition-delay: 1.5s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(11) {
  transition-delay: 1.55s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(12) {
  transition-delay: 1.6s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(13) {
  transition-delay: 1.65s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(14) {
  transition-delay: 1.7s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(15) {
  transition-delay: 1.75s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(16) {
  transition-delay: 1.8s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(17) {
  transition-delay: 1.85s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(18) {
  transition-delay: 1.9s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(19) {
  transition-delay: 1.95s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3)::before {
  transition-delay: 1.1s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(1) {
  transition-delay: 1.15s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(2) {
  transition-delay: 1.2s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(3) {
  transition-delay: 1.25s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(4) {
  transition-delay: 1.3s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(5) {
  transition-delay: 1.35s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(6) {
  transition-delay: 1.4s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(7) {
  transition-delay: 1.45s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(8) {
  transition-delay: 1.5s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(9) {
  transition-delay: 1.55s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(10) {
  transition-delay: 1.6s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(11) {
  transition-delay: 1.65s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(12) {
  transition-delay: 1.7s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(13) {
  transition-delay: 1.75s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(14) {
  transition-delay: 1.8s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(15) {
  transition-delay: 1.85s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(16) {
  transition-delay: 1.9s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(17) {
  transition-delay: 1.95s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(18) {
  transition-delay: 2s
}

.message-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(19) {
  transition-delay: 2.05s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(1) span {
  transition-delay: 1.25s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(2) span {
  transition-delay: 1.3s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(3) span {
  transition-delay: 1.35s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(4) span {
  transition-delay: 1.4s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(5) span {
  transition-delay: 1.45s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(6) span {
  transition-delay: 1.5s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(7) span {
  transition-delay: 1.55s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(8) span {
  transition-delay: 1.6s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(9) span {
  transition-delay: 1.65s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(10) span {
  transition-delay: 1.7s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(11) span {
  transition-delay: 1.75s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(12) span {
  transition-delay: 1.8s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(13) span {
  transition-delay: 1.85s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(14) span {
  transition-delay: 1.9s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(15) span {
  transition-delay: 1.95s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(16) span {
  transition-delay: 2s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(17) span {
  transition-delay: 2.05s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(18) span {
  transition-delay: 2.1s
}

.message-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(19) span {
  transition-delay: 2.15s
}

.message-intro.js-inview.in-view .c-link {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.app-intro.js-inview:not(.in-view) .l-txtContainer .copy .box .wrap span, .app-intro.js-inview:not(.in-view) .l-txtContainer .copy .box::before, .app-intro.js-inview:not(.in-view) .l-txtContainer .lead .wrap span, .app-intro.js-inview:not(.in-view) .l-txtContainer .txt .wrap span {
  opacity: 0
}

.app-intro.js-inview:not(.in-view) .l-txtContainer .lead .wrap span {
  -webkit-transform: translateY(1.8em);
  transform: translateY(1.8em)
}

.app-intro.js-inview:not(.in-view) .l-txtContainer .copy .box::before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

.app-intro.js-inview:not(.in-view) .l-txtContainer .copy .box .wrap span {
  -webkit-transform: translateY(1.4em);
  transform: translateY(1.4em)
}

.app-intro.js-inview:not(.in-view) .l-txtContainer .txt .wrap span {
  -webkit-transform: translateY(2em);
  transform: translateY(2em)
}

.app-intro.js-inview:not(.in-view) .c-link {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

.app-intro.js-inview.in-view .l-txtContainer .lead .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.app-intro.js-inview.in-view .l-txtContainer .lead .wrap:nth-child(1) span {
  transition-delay: .8s
}

.app-intro.js-inview.in-view .l-txtContainer .lead .wrap:nth-child(2) span {
  transition-delay: .85s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box::before {
  transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1)::before {
  transition-delay: .9s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(1) {
  transition-delay: .95s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(2) {
  transition-delay: 1s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(3) {
  transition-delay: 1.05s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(4) {
  transition-delay: 1.1s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(5) {
  transition-delay: 1.15s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(6) {
  transition-delay: 1.2s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(7) {
  transition-delay: 1.25s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(8) {
  transition-delay: 1.3s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(9) {
  transition-delay: 1.35s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(10) {
  transition-delay: 1.4s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(11) {
  transition-delay: 1.45s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(12) {
  transition-delay: 1.5s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(13) {
  transition-delay: 1.55s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(14) {
  transition-delay: 1.6s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(15) {
  transition-delay: 1.65s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(16) {
  transition-delay: 1.7s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(17) {
  transition-delay: 1.75s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(18) {
  transition-delay: 1.8s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(19) {
  transition-delay: 1.85s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2)::before {
  transition-delay: 1s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(1) {
  transition-delay: 1.05s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(2) {
  transition-delay: 1.1s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(3) {
  transition-delay: 1.15s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(4) {
  transition-delay: 1.2s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(5) {
  transition-delay: 1.25s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(6) {
  transition-delay: 1.3s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(7) {
  transition-delay: 1.35s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(8) {
  transition-delay: 1.4s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(9) {
  transition-delay: 1.45s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(10) {
  transition-delay: 1.5s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(11) {
  transition-delay: 1.55s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(12) {
  transition-delay: 1.6s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(13) {
  transition-delay: 1.65s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(14) {
  transition-delay: 1.7s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(15) {
  transition-delay: 1.75s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(16) {
  transition-delay: 1.8s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(17) {
  transition-delay: 1.85s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(18) {
  transition-delay: 1.9s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(19) {
  transition-delay: 1.95s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3)::before {
  transition-delay: 1.1s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(1) {
  transition-delay: 1.15s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(2) {
  transition-delay: 1.2s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(3) {
  transition-delay: 1.25s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(4) {
  transition-delay: 1.3s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(5) {
  transition-delay: 1.35s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(6) {
  transition-delay: 1.4s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(7) {
  transition-delay: 1.45s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(8) {
  transition-delay: 1.5s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(9) {
  transition-delay: 1.55s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(10) {
  transition-delay: 1.6s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(11) {
  transition-delay: 1.65s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(12) {
  transition-delay: 1.7s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(13) {
  transition-delay: 1.75s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(14) {
  transition-delay: 1.8s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(15) {
  transition-delay: 1.85s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(16) {
  transition-delay: 1.9s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(17) {
  transition-delay: 1.95s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(18) {
  transition-delay: 2s
}

.app-intro.js-inview.in-view .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(19) {
  transition-delay: 2.05s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(1) span {
  transition-delay: 1.25s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(2) span {
  transition-delay: 1.3s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(3) span {
  transition-delay: 1.35s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(4) span {
  transition-delay: 1.4s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(5) span {
  transition-delay: 1.45s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(6) span {
  transition-delay: 1.5s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(7) span {
  transition-delay: 1.55s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(8) span {
  transition-delay: 1.6s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(9) span {
  transition-delay: 1.65s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(10) span {
  transition-delay: 1.7s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(11) span {
  transition-delay: 1.75s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(12) span {
  transition-delay: 1.8s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(13) span {
  transition-delay: 1.85s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(14) span {
  transition-delay: 1.9s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(15) span {
  transition-delay: 1.95s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(16) span {
  transition-delay: 2s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(17) span {
  transition-delay: 2.05s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(18) span {
  transition-delay: 2.1s
}

.app-intro.js-inview.in-view .l-txtContainer .txt .wrap:nth-child(19) span {
  transition-delay: 2.15s
}

.app-intro.js-inview.in-view .c-link {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging.in.send .l-visual .boy, #conceptPage.paging.in.send .l-visual .boy-smp, #conceptPage.paging.in.send .l-visual .girl, #conceptPage.paging.in.send .l-visual .girl-smp {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

#conceptPage.paging.in.send .l-visual .shape {
  -webkit-clip-path: polygon(100% 0, 100% 0, 61.5% 100%, 61.5% 100%);
  clip-path: polygon(100% 0, 100% 0, 61.5% 100%, 61.5% 100%)
}

#conceptPage.paging:not(.send) .c-topTitle b.wrap span {
  transition-delay: .15s;
  transition-duration: .4s
}

#conceptPage.paging:not(.send) .c-topTitle .ja.wrap span {
  transition-delay: .35s
}

#conceptPage.paging:not(.send) .c-topTitle::after {
  transition-delay: .45s
}

#conceptPage.paging:not(.send) .l-visual .shape {
  transition: opacity .3s, -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1), -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-visual .shape+.shape {
  transition-delay: .2s
}

#conceptPage.paging:not(.send) .l-visual .boy, #conceptPage.paging:not(.send) .l-visual .boy-smp, #conceptPage.paging:not(.send) .l-visual .girl, #conceptPage.paging:not(.send) .l-visual .girl-smp {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-visual .boy {
  transition-delay: .3s
}

#conceptPage.paging:not(.send) .l-visual .girl {
  transition-delay: .4s
}

#conceptPage.paging:not(.send) .l-visual .boy-smp {
  transition-delay: .45s
}

#conceptPage.paging:not(.send) .l-visual .girl-smp {
  transition-delay: .5s
}

#conceptPage.paging.in.send .l-txtContainer .copy .box .wrap span, #conceptPage.paging.in.send .l-txtContainer .copy .box::before, #conceptPage.paging.in.send .l-txtContainer .lead .wrap span, #conceptPage.paging.in.send .l-txtContainer .txt .wrap span {
  opacity: 0
}

#conceptPage.paging.in.send .l-txtContainer .lead .wrap span {
  -webkit-transform: translateY(1.8em);
  transform: translateY(1.8em)
}

#conceptPage.paging.in.send .l-txtContainer .copy .box::before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

#conceptPage.paging.in.send .l-txtContainer .copy .box .wrap span {
  -webkit-transform: translateY(1.4em);
  transform: translateY(1.4em)
}

#conceptPage.paging.in.send .l-txtContainer .txt .wrap span {
  -webkit-transform: translateY(2em);
  transform: translateY(2em)
}

#conceptPage.paging.in.send .c-link {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

#conceptPage.paging:not(.send) .c-topTitle b.wrap span {
  transition-delay: .45s;
  transition-duration: .4s
}

#conceptPage.paging:not(.send) .c-topTitle .ja.wrap span {
  transition-delay: .65s
}

#conceptPage.paging:not(.send) .c-topTitle::after {
  transition-delay: .75s
}

#conceptPage.paging:not(.send) .l-txtContainer .lead .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-txtContainer .lead .wrap:nth-child(1) span {
  transition-delay: .8s
}

#conceptPage.paging:not(.send) .l-txtContainer .lead .wrap:nth-child(2) span {
  transition-delay: .85s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box::before {
  transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1)::before {
  transition-delay: .9s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(1) {
  transition-delay: .95s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(2) {
  transition-delay: 1s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(3) {
  transition-delay: 1.05s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(4) {
  transition-delay: 1.1s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(5) {
  transition-delay: 1.15s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(6) {
  transition-delay: 1.2s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(7) {
  transition-delay: 1.25s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(8) {
  transition-delay: 1.3s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(9) {
  transition-delay: 1.35s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(10) {
  transition-delay: 1.4s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(11) {
  transition-delay: 1.45s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(12) {
  transition-delay: 1.5s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(13) {
  transition-delay: 1.55s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(14) {
  transition-delay: 1.6s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(15) {
  transition-delay: 1.65s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(16) {
  transition-delay: 1.7s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(17) {
  transition-delay: 1.75s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(18) {
  transition-delay: 1.8s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(1) .wrap span:nth-child(19) {
  transition-delay: 1.85s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2)::before {
  transition-delay: 1s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(1) {
  transition-delay: 1.05s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(2) {
  transition-delay: 1.1s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(3) {
  transition-delay: 1.15s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(4) {
  transition-delay: 1.2s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(5) {
  transition-delay: 1.25s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(6) {
  transition-delay: 1.3s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(7) {
  transition-delay: 1.35s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(8) {
  transition-delay: 1.4s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(9) {
  transition-delay: 1.45s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(10) {
  transition-delay: 1.5s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(11) {
  transition-delay: 1.55s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(12) {
  transition-delay: 1.6s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(13) {
  transition-delay: 1.65s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(14) {
  transition-delay: 1.7s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(15) {
  transition-delay: 1.75s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(16) {
  transition-delay: 1.8s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(17) {
  transition-delay: 1.85s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(18) {
  transition-delay: 1.9s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(2) .wrap span:nth-child(19) {
  transition-delay: 1.95s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3)::before {
  transition-delay: 1.1s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(1) {
  transition-delay: 1.15s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(2) {
  transition-delay: 1.2s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(3) {
  transition-delay: 1.25s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(4) {
  transition-delay: 1.3s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(5) {
  transition-delay: 1.35s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(6) {
  transition-delay: 1.4s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(7) {
  transition-delay: 1.45s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(8) {
  transition-delay: 1.5s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(9) {
  transition-delay: 1.55s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(10) {
  transition-delay: 1.6s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(11) {
  transition-delay: 1.65s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(12) {
  transition-delay: 1.7s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(13) {
  transition-delay: 1.75s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(14) {
  transition-delay: 1.8s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(15) {
  transition-delay: 1.85s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(16) {
  transition-delay: 1.9s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(17) {
  transition-delay: 1.95s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(18) {
  transition-delay: 2s
}

#conceptPage.paging:not(.send) .l-txtContainer .copy .box:nth-of-type(3) .wrap span:nth-child(19) {
  transition-delay: 2.05s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(1) span {
  transition-delay: 1.25s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(2) span {
  transition-delay: 1.3s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(3) span {
  transition-delay: 1.35s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(4) span {
  transition-delay: 1.4s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(5) span {
  transition-delay: 1.45s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(6) span {
  transition-delay: 1.5s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(7) span {
  transition-delay: 1.55s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(8) span {
  transition-delay: 1.6s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(9) span {
  transition-delay: 1.65s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(10) span {
  transition-delay: 1.7s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(11) span {
  transition-delay: 1.75s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(12) span {
  transition-delay: 1.8s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(13) span {
  transition-delay: 1.85s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(14) span {
  transition-delay: 1.9s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(15) span {
  transition-delay: 1.95s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(16) span {
  transition-delay: 2s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(17) span {
  transition-delay: 2.05s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(18) span {
  transition-delay: 2.1s
}

#conceptPage.paging:not(.send) .l-txtContainer .txt .wrap:nth-child(19) span {
  transition-delay: 2.15s
}

#conceptPage.paging:not(.send) .c-link {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.works-intro.js-inview:not(.in-view) .c-link, .works-intro.js-inview:not(.in-view) .l-txtContainer .txt {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

.works-intro.js-inview.in-view .c-link, .works-intro.js-inview.in-view .l-txtContainer .txt {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

.works-intro.js-inview.in-view .l-txtContainer .txt {
  transition-delay: .8s
}

.works-intro.js-inview.in-view .c-link {
  transition-delay: .9s
}

.blog-section.js-inview:not(.in-view) .c-link, .contact-section.js-inview:not(.in-view) .c-link {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

.blog-section.js-inview.in-view .c-link, .contact-section.js-inview.in-view .c-link {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .85s
}

body.paging a {
  pointer-events: none
}

body.paging.out .l-background {
  transition: background-position .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging .l-header .inner, body.paging .l-main .l-cover {
  transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging.out .l-footer .inner, body.paging.out .l-footer .pagetop {
  transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging.out .l-kv {
  transition: opacity .3s
}

body.paging.out .l-kv .l-cover {
  transition: -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging.out .blog-list .date, body.paging.out .blog-list .excerpt, body.paging.out .blog-list .img, body.paging.out .blog-list .title, body.paging.out .c-link, body.paging.out .interview-list .box, body.paging.out .interview-list .img, body.paging.out .kv-copy .tx-mask, body.paging.out .kv-description .tx-mask, body.paging.out .kv-title .tx-mask, body.paging.out .l-kv .c-scroll, body.paging.out .works-intro .txt {
  transition: opacity .3s, -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1), -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging.out .c-boxTxt .box, body.paging.out .c-pageLead, body.paging.out .c-topTitle .wrap>span, body.paging.out .c-topTitle::after, body.paging.out .l-entry .c-topTitle .wrap, body.paging.out .l-entry .entry-btn, body.paging.out .l-entry .entry-btn+.entry-btn, body.paging.out .l-intro .copy .box, body.paging.out .l-intro .lead .wrap, body.paging.out .l-intro .txt .wrap, body.paging.out .message-intro .l-visual, body.paging.out .p-error, body.paging.out .reason-list .item, body.paging.out .success-list .box, body.paging.out .success-list .illust, body.paging.out .success-list .img, body.paging.out .success-list .name, body.paging.out .success-list .txt, body.paging.out .welfare-list .item, body.paging.out .works-intro .l-visual, body.paging.out .works-list .item, body.paging.out .wp-pagenavi {
  transition: opacity .3s, -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1)!important;
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1)!important;
  transition: opacity .3s, clip-path .3s cubic-bezier(.215, .61, .355, 1), -webkit-clip-path .3s cubic-bezier(.215, .61, .355, 1)!important
}

body.paging.out .l-entry::before {
  transition: opacity .3s
}

body.paging.in:not(.send) .l-pageTitle .wrap>span {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-pageTitle::after {
  transition: opacity .3s, height .3s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-pageTitle .wrap:nth-child(1)>span {
  transition-delay: .3s;
  transition-duration: .5s
}

body.paging.in:not(.send) .l-pageTitle .wrap:nth-child(2)>span {
  transition-delay: .45s
}

body.paging.in:not(.send) .l-pageTitle::after {
  transition-delay: .6s
}

body.paging.in:not(.send) .works-intro .l-visual {
  transition: opacity .6s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .1s
}

body.paging.in:not(.send) .l-contents .welfare-list .item, body.paging.in:not(.send) .l-contents .works-list .item {
  transition: opacity .6s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-contents .welfare-list .item:nth-child(3n+1), body.paging.in:not(.send) .l-contents .works-list .item:nth-child(3n+1) {
  transition-delay: .68s
}

body.paging.in:not(.send) .l-contents .welfare-list .item:nth-child(3n+2), body.paging.in:not(.send) .l-contents .works-list .item:nth-child(3n+2) {
  transition-delay: .76s
}

body.paging.in:not(.send) .l-contents .welfare-list .item:nth-child(3n+3), body.paging.in:not(.send) .l-contents .works-list .item:nth-child(3n+3) {
  transition-delay: .84s
}

body.paging.in:not(.send) .l-contents .interview-list .item .box, body.paging.in:not(.send) .l-contents .interview-list .item .img {
  transition: opacity .6s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+1) .img {
  transition-delay: .65s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+1) .box:nth-child(1) {
  transition-delay: .73s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+1) .box:nth-child(2) {
  transition-delay: .78s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+2) .img {
  transition-delay: .7s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+2) .box:nth-child(1) {
  transition-delay: .81s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+2) .box:nth-child(2) {
  transition-delay: .86s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+3) .img {
  transition-delay: .75s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+3) .box:nth-child(1) {
  transition-delay: .89s
}

body.paging.in:not(.send) .l-contents .interview-list .item:nth-child(3n+3) .box:nth-child(2) {
  transition-delay: .94s
}

body.paging.in:not(.send) .l-contents .blog-list .item .date, body.paging.in:not(.send) .l-contents .blog-list .item .excerpt, body.paging.in:not(.send) .l-contents .blog-list .item .img, body.paging.in:not(.send) .l-contents .blog-list .item .title {
  transition: opacity .6s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s, transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+1) .img {
  transition-delay: .68s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+1) .title {
  transition-delay: .73s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+1) .excerpt {
  transition-delay: .78s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+1) .date {
  transition-delay: .83s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+2) .img {
  transition-delay: .76s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+2) .title {
  transition-delay: .81s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+2) .excerpt {
  transition-delay: .86s
}

body.paging.in:not(.send) .l-contents .blog-list .item:nth-child(2n+2) .date {
  transition-delay: .91s
}

body.paging.in:not(.send) .l-contents .security-section>* {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in:not(.send) .l-contents .security-section>:nth-child(1) {
  transition-delay: .55s
}

body.paging.in:not(.send) .l-contents .security-section>:nth-child(2) {
  transition-delay: .6s
}

body.paging.in:not(.send) .l-contents .security-section>:nth-child(3) {
  transition-delay: .65s
}

body.paging.in:not(.send) .l-contents .security-section>:nth-child(4) {
  transition-delay: .7s
}

body.paging.in:not(.send) .l-contents .security-section>:nth-child(5) {
  transition-delay: .75s
}

body.paging.in:not(.send) .c-pageLead, body.paging.in:not(.send) .wp-pagenavi {
  transition: opacity .4s, -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .4s, transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
  transition-delay: .5s
}

body.paging.in .l-background {
  transition-duration: .8s
}

body.paging.in .l-main .l-cover {
  transition: opacity .6s .1s, -webkit-transform .6s .1s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s .1s, transform .6s .1s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .6s .1s, transform .6s .1s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s .1s cubic-bezier(.215, .61, .355, 1)
}

body.paging.in .l-header .inner {
  transition-delay: 1s;
  transition-duration: .6s
}

body.in.send .works-intro .l-visual {
  opacity: 0;
  -webkit-transform: translateY(32px);
  transform: translateY(32px)
}

body.in.send .l-pageTitle .wrap>span, body.in.send .l-pageTitle::after {
  opacity: 0
}

body.in.send .l-pageTitle .wrap>span {
  -webkit-transform: translateY(1.25em);
  transform: translateY(1.25em)
}

body.in.send .l-pageTitle::after {
  height: 0
}

body.in.send .blog-list .item .date, body.in.send .blog-list .item .excerpt, body.in.send .blog-list .item .img, body.in.send .blog-list .item .title, body.in.send .c-pageLead, body.in.send .interview-list .item .box, body.in.send .interview-list .item .img, body.in.send .p-error, body.in.send .security-section>*, body.in.send .welfare-list .item, body.in.send .works-list .item, body.in.send .wp-pagenavi {
  opacity: 0;
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

body.in.send #page:not(.anima) .l-header .inner {
  opacity: 0;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px)
}

body.in.send #page .l-main .l-cover {
  opacity: 0;
  -webkit-transform: translateX(-16%);
  transform: translateX(-16%)
}

body.out.paging:not(.toTop) .l-background {
  background-position: 44% 0!important
}

body.out.send .l-footer .inner, body.out.send .l-footer .pagetop, body.out.send .l-header .inner {
  opacity: 0;
  -webkit-transform: translateY(-16px);
  transform: translateY(-16px)
}

body.out.send .l-footer .inner {
  -webkit-transform: translateY(16px);
  transform: translateY(16px)
}

body.out.send .l-kv {
  opacity: 0
}

body.out.send .l-main .l-cover {
  opacity: 0;
  -webkit-transform: translateX(-16%);
  transform: translateX(-16%)
}

body.out:not(.send) .blog-list .date.welfare-list .item, body.out:not(.send) .blog-list .excerpt, body.out:not(.send) .blog-list .img, body.out:not(.send) .blog-list .title, body.out:not(.send) .interview-list .box, body.out:not(.send) .interview-list .img, body.out:not(.send) .kv-copy .tx-mask, body.out:not(.send) .kv-description .tx-mask, body.out:not(.send) .kv-title .tx-mask, body.out:not(.send) .l-kv .c-scroll, body.out:not(.send) .works-intro .txt {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

body.out:not(.send) .c-link {
  -webkit-clip-path: polygon(0 -2%, 100% -2%, 100% 102%, 0 102%);
  clip-path: polygon(0 -2%, 100% -2%, 100% 102%, 0 102%)
}

body.out:not(.send) .c-boxTxt .box, body.out:not(.send) .c-pageLead, body.out:not(.send) .c-topTitle .wrap>span, body.out:not(.send) .c-topTitle::after, body.out:not(.send) .l-entry .c-topTitle .wrap, body.out:not(.send) .l-entry .entry-btn, body.out:not(.send) .l-intro .copy .box, body.out:not(.send) .l-intro .lead .wrap, body.out:not(.send) .l-intro .txt .wrap, body.out:not(.send) .message-intro .l-visual, body.out:not(.send) .p-error, body.out:not(.send) .reason-list .item, body.out:not(.send) .success-list .box, body.out:not(.send) .success-list .illust, body.out:not(.send) .success-list .img, body.out:not(.send) .success-list .name, body.out:not(.send) .success-list .txt, body.out:not(.send) .welfare-list .item, body.out:not(.send) .works-intro .l-visual, body.out:not(.send) .works-list .item, body.out:not(.send) .wp-pagenavi {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

body.out:not(.send) .message-intro .l-visual, body.out:not(.send) .works-intro .l-visual {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

body.out.send .blog-list .date, body.out.send .blog-list .excerpt, body.out.send .blog-list .img, body.out.send .blog-list .title, body.out.send .c-link, body.out.send .interview-list .box, body.out.send .interview-list .img, body.out.send .kv-copy .tx-mask, body.out.send .kv-description .tx-mask, body.out.send .kv-title .tx-mask, body.out.send .l-kv .c-scroll, body.out.send .works-intro .txt {
  opacity: 0;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
}

body.out.send .c-boxTxt .box, body.out.send .c-pageLead, body.out.send .c-topTitle .wrap>span, body.out.send .c-topTitle::after, body.out.send .l-entry .c-topTitle .wrap, body.out.send .l-entry .entry-btn, body.out.send .l-intro .copy .box, body.out.send .l-intro .lead .wrap, body.out.send .l-intro .txt .wrap, body.out.send .p-error, body.out.send .reason-list .item, body.out.send .success-list .box, body.out.send .success-list .illust, body.out.send .success-list .img, body.out.send .success-list .name, body.out.send .success-list .txt, body.out.send .welfare-list .item, body.out.send .works-list .item, body.out.send .wp-pagenavi {
  opacity: 0;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
}

body.out.send .message-intro .l-visual, body.out.send .works-intro .l-visual {
  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%)
}

body.out.send .l-entry::before, body.out.send .security-section>* {
  opacity: 0
}

.error404 .l-entry {
  display: none
}

.p-error {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center
}

.p-error::before {
  display: block;
  width: 135px;
  height: 155px;
  margin: 0 auto 20px;
  content: "";
  background: url(/img/common/icon_404.png) no-repeat center;
  background-size: 100% auto
}

.p-error__title {
  margin-bottom: 20px;
  font-family: Prompt, sans-serif;
  font-size: 40px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .24em
}

.p-error__entry p {
  margin-bottom: 10px;
  font-size: 14px
}

.p-error__back {
  display: inline-block;
  width: 126px;
  margin-top: 25px
}

.p-error__back a {
  height: 40px;
  line-height: 40px;
  color: #fff
}

.p-error__back.c-btn a {
  padding: 0 10px
}

.p-error__back.c-btn.ef .en, .p-error__back.c-btn.ef a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 11px;
  transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
  transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
}

.p-error__back.c-btn.ef a::before {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  letter-spacing: .24em;
  content: attr(data-text)
}

.p-error__back.c-btn.ef a:not(:hover)::before {
  opacity: 0;
  -webkit-transform: translateY(1em);
  transform: translateY(1em)
}

.p-error__back.c-btn.ef a:hover .en {
  opacity: 0;
  -webkit-transform: translateY(-1em);
  transform: translateY(-1em)
}

@media screen {
  [hidden~=screen] {
    display: inherit
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute!important;
    clip: rect(0 0 0 0)!important
  }
}

@media print, (min-width:1366px) {
  .kv-title {
    font-size: calc(96vw / 13.66)
  }
  .kv-copy {
    font-size: calc(18vw / 13.66)
  }
  .kv-description {
    font-size: calc(10vw / 13.66)
  }
}

@media screen and (max-width:959px) {
  .kv-title {
    font-size: 48px
  }
  .kv-copy {
    font-size: 16px
  }
  .c-topTitle sup {
    font-size: 7px
  }
  .c-topTitle b {
    font-size: 42px
  }
  .c-topTitle .ja {
    font-size: 16px
  }
  .c-section .c-topTitle b {
    font-size: 42px
  }
  .c-link {
    font-size: 15px
  }
  .l-entry .c-topTitle {
    font-size: 30px
  }
  .l-entry .c-boxTxt {
    font-size: 14px;
  }
  .l-intro .lead {
    font-size: 16px;
    line-height: 2.3;
  }
  .l-intro .copy {
    font-size: 20px;
  }
  .l-intro .txt {
    font-size: 13px;
    line-height: 2.3
  }
  .success-list .name .en {
    font-size: 26px
  }
  .success-list .name .jp {
    font-size: 14px
  }
  .success-list .lead {
    font-size: 17px
  }
  .reason-list .num {
    font-size: 19px
  }
  .works-list .txt-wrap .num {
    font-size: 19px
  }
  .interview-list dt {
    font-size: 16px
  }
  .interview-list dd {
    font-size: 10px
  }
  .interview-list .c-link {
    letter-spacing: .1em
  }
  .blog-list .title {
    font-size: 16px
  }
  .blog-list .excerpt {
    font-size: 14px
  }
  .welfare-list .txt {
    font-size: 13px
  }
  .PCview, .v-pc {
    display: none!important
  }
  body:not(#indexPage) .c-topTitle {
    margin-bottom: 32px
  }
  .c-topTitle.l-pageTitle::after {
    display: none
  }
  .c-boxTxt .box {
    padding: 4px .6em
  }
  .l-txtContainer {
    text-align: right
  }
  .l-txtContainer>* {
    text-align: left
  }
  .c-link::before {
    top: calc(50% - 8px);
    width: 12px;
    height: 12px;
    border-top: 2px solid currentcolor;
    border-right: 2px solid currentcolor
  }
  .success-list .item:not(:first-child) {
    margin-top: 48px
  }
  .success-list .txt {
    margin-top: 16px
  }
  .success-list .img {
    top: 80px;
    right: calc(-48vw / 7.5);
    left: calc(-48vw / 7.5);
    width: auto;
    height: 250px
  }
  .success-list .img .shape {
    text-align: center
  }
  .success-list .img .shape img {
    width: 100%
  }
  .success-list .illust {
    display: none
  }
  .success-list .item:nth-child(1) .illust {
    width: 70px
  }
  .success-list .item:nth-child(2) .illust {
    width: 89px
  }
  .success-list .item:nth-child(3) .illust {
    width: 100px
  }
  .success-list .item.in-view .img {
    transition-property: opacity, -webkit-clip-path;
    transition-property: opacity, clip-path;
    transition-property: opacity, clip-path, -webkit-clip-path
  }
  .success-list .item.js-inview:not(.in-view) .img {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
  }
  .success-list .item.js-inview.in-view .img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  }
  .reason-list .item:not(:first-child) {
    margin-top: 24px
  }
  .reason-list .title {
    margin-top: 16px
  }
  .works-list .img {
    max-width: 160px
  }
  .works-list .txt-wrap {
    margin-top: 24px
  }
  .interview-list .item:not(:first-child) {
    margin-top: calc(40vw / 7.5)
  }
  .interview-list a {
    display: flex;
    justify-content: space-between
  }
  .interview-list a:not(:first-child) {
    margin-top: calc(40vw / 7.5)
  }
  .interview-list a .img {
    flex-basis: 27%
  }
  .interview-list a .txt {
    flex-basis: 73%;
    padding-left: calc(48vw / 7.5)
  }
  .contact-section {
    text-align: right
  }
  .contact-section>* {
    text-align: left
  }
  .contact-section .c-topTitle {
    margin-bottom: calc(112vw / 7.5)
  }
  .blog-section {
    text-align: right
  }
  .blog-section>* {
    text-align: left
  }
  .blog-section .c-topTitle {
    margin-bottom: calc(112vw / 7.5)
  }
  .blog-list .item:not(:first-child) {
    margin-top: calc(80vw / 7.5)
  }
  .blog-list .title {
    margin: 1.2em 0
  }
  .welfare-list .item {
    padding: 56px 24px 48px
  }
  .welfare-list .item:not(:first-child) {
    margin-top: 24px
  }
  .l-main {
    padding: 0 6.4%
  }
  body:not(#indexPage) .l-main {
    margin-top: 120px
  }
  .l-section {
    margin-top: 64px
  }
  
  .l-intro .l-visual .app-bg {
    top: -620px;
    right: -40px;
    width: 500px;
  }
  
  .l-main .l-cover::after {
    -webkit-transform: translateZ(0) rotate(45deg);
    transform: translateZ(0) rotate(45deg)
  }
  .l-kv .l-cover {
    top: calc(-100vh - 50vw);
    left: 0;
    width: 100%;
    height: calc(100vh + 100vw);
    -webkit-transform: translateY(100%) translateY(100vh);
    -webkit-transform: translateY(calc(100% + 100vh));
    transform: translateY(100%) translateY(100vh);
    transform: translateY(calc(100% + 100vh))
  }
  .l-kv .l-cover::after {
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg)
  }
  .l-main .l-cover {
    width: 110vw;
    height: 220vw
  }
  .l-toggle, .l-toggleWrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh
  }
  .l-toggleWrap {
    background: rgba(0, 0, 0, .2);
    transition: opacity .6s
  }
  .l-toggleWrap.-hidden {
    pointer-events: none;
    opacity: 0
  }
  .l-toggleWrap.type1 {
    z-index: 9997
  }
  .l-toggleWrap.type2 {
    z-index: 9998
  }
  .l-toggle {
    box-sizing: border-box;
    max-width: 360px;
    padding: 64px 6.4%;
    background: #553dcc;
    transition: -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
  }
  .l-toggle.type1 {
    z-index: 9998
  }
  .l-toggle.type2 {
    z-index: 9999;
    background: #553dcc
  }
  .l-toggle .l-gnav a {
    display: block;
    padding: 14px 0;
    line-height: 1;
    color: #fff
  }
  .l-toggle .l-gnav .en {
    display: block
  }
  .l-toggle .l-gnav .jp {
    color: #ac9eff
  }
  .l-toggle .l-gnav .c-btn {
    display: none
  }
  .l-toggle .entry-btn {
    margin-top: 64px
  }
  .l-toggle .entry-btn a {
    position: relative;
    display: block;
    height: auto;
    padding: 9px 20px;
    text-align: left;
    background: #fff
  }
  .l-toggle .entry-btn a span {
    color: #553dcc
  }
  .l-toggle .entry-btn .ico {
    right: 24px;
    width: 17px;
    height: 12px;
    background: url(/img/common/icon_www_gnav.svg) center/17px auto no-repeat
  }
  .l-toggle .c-tglBtn {
    position: absolute;
    top: 24px;
    right: 6.4vw
  }
  .l-toggle .c-tglBtn button span {
    width: 30px;
    height: 5px
  }
  .l-toggle .c-tglBtn button span:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }
  .l-toggle .c-tglBtn button span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
  }
  .l-toggle .entry-btn, .l-toggle .item {
    transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
  }
  .l-toggle:not(.-show) {
    overflow: hidden;
    pointer-events: none;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
  .l-toggle:not(.-show) .entry-btn, .l-toggle:not(.-show) .item {
    opacity: 0;
    transition-delay: .3s;
    transition-duration: 0s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
  .l-toggle.-show {
    overflow-y: scroll
  }
  .l-toggle.-show .item:nth-of-type(1) {
    transition-delay: 50ms
  }
  .l-toggle.-show .item:nth-of-type(2) {
    transition-delay: .1s
  }
  .l-toggle.-show .item:nth-of-type(3) {
    transition-delay: .15s
  }
  .l-toggle.-show .item:nth-of-type(4) {
    transition-delay: .2s
  }
  .l-toggle.-show .item:nth-of-type(5) {
    transition-delay: .25s
  }
  .l-toggle.-show .item:nth-of-type(6) {
    transition-delay: .3s
  }
  .l-toggle.-show .item:nth-of-type(7) {
    transition-delay: .35s
  }
  .l-toggle.-show .entry-btn {
    transition-delay: .35s;
    transition-duration: .4s
  }
 /* .is-active .logo, .is-fixed .logo {
    display: none
  }*/
  .logo .mark {
    width: 100px;
    height: 50px
  }
  .logo .type {
    width: 147px;
    height: 30px;
    margin-left: 24px
  }

  
 .logo .type .type-ja{
   display:block;
   font-size:0.5em;
}
  
  .logo img {
    width: 100%;
    height: auto
  }
  .l-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 90px
  }
  .l-header .inner {
    padding: 24px 6.4% 0
  }
  .l-header .inner.v-pc {
    display: none
  }
  .l-header .c-tglBtn button span:nth-child(1) {
    -webkit-transform: translate(-4px, -12px);
    transform: translate(-4px, -12px)
  }
  .l-header .c-tglBtn button span:nth-child(2) {
    -webkit-transform: translate(4px, 0);
    transform: translate(4px, 0)
  }
  .l-header .c-tglBtn button span:nth-child(3) {
    -webkit-transform: translate(-4px, 12px);
    transform: translate(-4px, 12px)
  }
  .l-header:not(.type1).is-fixed {
    position: fixed;
    -webkit-transform: translateZ(0) translateY(-100%);
    transform: translateZ(0) translateY(-100%)
  }
  .l-header:not(.type1).is-active {
    position: fixed;
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0)
  }
  .l-header:not(.type1).enableTransition {
    transition: -webkit-transform .3s cubic-bezier(.55, .09, .68, .53);
    transition: transform .3s cubic-bezier(.55, .09, .68, .53);
    transition: transform .3s cubic-bezier(.55, .09, .68, .53), -webkit-transform .3s cubic-bezier(.55, .09, .68, .53)
  }
  .l-header:not(.type1).is-active.enableTransition {
    transition: -webkit-transform .3s cubic-bezier(.25, .46, .45, .94);
    transition: transform .3s cubic-bezier(.25, .46, .45, .94);
    transition: transform .3s cubic-bezier(.25, .46, .45, .94), -webkit-transform .3s cubic-bezier(.25, .46, .45, .94)
  }
  div.l-header {
    right: 6.4%;
    left: inherit;
    width: 100px;
    visibility: hidden
  }
  div.l-header .inner {
    padding-right: 0;
    padding-left: 0
  }
  div.l-header.enableTransition, div.l-header.is-active, div.l-header.is-active.enableTransition, div.l-header.is-fixed {
    visibility: visible
  }
  body.in div.l-header, body.send div.l-header {
    visibility: hidden
  }

  .l-footer .inner {
    padding: 56px 6.4% 24px
  }
  .l-footer .logo {
    margin-bottom: 16px
  }
  .l-footer .logo .type {
    margin-left: 14px
  }
  .l-footer .logo .type img {
    width: 100%;
    height: auto
  }
  .l-footer .fnav-list {
    flex-wrap: wrap;
    margin: 0 -12px
  }
  .l-footer .fnav-list .item {
    margin-bottom: 6px
  }

  .l-footer .fnav-list a {
    padding: 6px 12px
  }
  .l-footer .copyright {
    margin-left: 0;
    font-size: 10px;
    text-align: right;
    -webkit-transform: scale(.8);
    transform: scale(.8)
  }
  .l-footer .pagetop {
    top: 57px;
    right: 6.4%
  }
  .l-kv {
    position: relative;
    overflow: hidden
  }
  .kv-visual.v-sp {
    left: 0!important;
    width: 100%!important;
    height: 100vh!important;
    background: url(./images/visual_sp.png) center/cover no-repeat
  }
  .kv-title.v-pc {
    display: none
  }
  .kv-description {
    display: none
  }
  .kv-sparkle {
    display: none
  }
  .l-container.cover .l-kv .l-cover {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh)
  }
  .l-container.active .l-main .l-cover {
    -webkit-transform: none;
    transform: none
  }
  .l-container.active .l-kv .l-cover {
    -webkit-transform: translateY(50vh) translateY(-78vw);
    -webkit-transform: translateY(calc(50vh - 78vw));
    transform: translateY(50vh) translateY(-78vw);
    transform: translateY(calc(50vh - 78vw));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform
  }
  .l-topContents .blog-section, .l-topContents .contact-section, .l-topContents .works-intro {
    padding-top: 115px
  }
  .l-intro .copy {
    margin: 1.5em 0
  }
  .l-visual {
    z-index: -1;
    margin-right: calc(-48vw / 7.5);
    margin-left: calc(-48vw / 7.5)
  }
  .l-visual .shape {
    width: 100vw;
    height: calc(680vw / 7.5);
    margin-left: calc(50% - 50vw)
  }
  .l-visual .shape>* {
    display: none
  }
  .l-intro.js-inview:not(.in-view) .l-visual .shape {
    opacity: 0
  }
  .l-intro.js-inview.in-view .l-visual .shape {
    transition: opacity .6s
  }
  .message-intro.js-inview.in-view .c-link {
    transition-delay: 2.2s
  }
  #conceptPage .l-intro .l-visual .shape {
    display: none
  }
  .message-intro .l-visual {
    top: -48px;
    height: calc(820vw / 7.5);
    margin: 0 auto
  }
  .message-intro .l-visual .boy {
    top: 0;
    left: calc(-24vw / 7.5);
    z-index: 2;
    width: calc(450vw / 7.5)
  }
  .message-intro .l-visual .girl {
    top: calc(100vw / 7.5);
    right: calc(-83vw / 7.5);
    z-index: 1;
    width: calc(500vw / 7.5)
  }
  .message-intro .l-visual .boy-smp {
    top: calc(585vw / 7.5);
    left: calc(80vw / 7.5);
    z-index: 3;
    width: calc(300vw / 7.5)
  }
  .message-intro .l-visual .girl-smp {
    top: calc(-86vw / 7.5);
    right: calc(-21vw / 7.5);
    z-index: 3;
    width: calc(138vw / 7.5)
  }
  
 .app-intro .l-visual {
    top: -48px;
    height: calc(820vw / 7.5);
    margin: 0 auto
  }
  .app-intro .l-visual .boy {
    top: 0;
    left: calc(-24vw / 7.5);
    z-index: 2;
    width: calc(350vw / 7.5)
  }
  .app-intro .l-visual .girl {
    top: calc(-150vw / 7.5);
    right: calc(-83vw / 7.5);
    z-index: 1;
    width: calc(600vw / 7.5)
  }
  .app-intro .l-visual .boy-smp {
    top: calc(-550vw / 7.5);
    left: calc(250vw / 7.5);
    z-index: 3;
    width: calc(400vw / 7.5)
  }
  
  .l-intro .shape::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #ff9500;
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg)
  }
  #conceptPage.paging:not(.send) .c-link {
    transition-delay: 2.2s
  }
  .works-intro .l-visual {
    top: -48px;
    height: calc(720vw / 7.5)
  }
  .works-intro .l-visual .boy {
    top: calc(100vw / 7.5);
    right: calc(10vw / 7.5);
    width: calc(500vw / 7.5)
  }
  .works-intro .l-visual .girl {
    top: calc(200vw / 7.5);
    left: calc(-35vw / 7.5);
    width: calc(350vw / 7.5)
  }
  .works-intro .l-visual .boy-smp {
    top: calc(-40vw / 7.5);
    right: calc(24vw / 7.5);
    width: calc(500vw / 7.5)
  }
  .works-intro .l-visual .girl-smp {
    top: calc(120vw / 7.5);
    left: calc(32vw / 7.5);
    width: calc(97vw / 7.5)
  }
  .works-intro .l-visual .shape::after {
    -webkit-transform: skewY(45deg);
    transform: skewY(45deg)
  }
  body.out.send .l-kv .l-cover {
    -webkit-transform: translateY(-32px);
    transform: translateY(-32px)
  }
  .p-error__title {
    font-size: 32px
  }
  
  .c-topTitle::after {
    display: none;
  }
  
}

@media print, (min-width:960px) {
  .gnav-list {
    font-size: 18px;
    font-weight: 800;
    color: #596660
  }
  .gnav-list .c-btn.ef .en, .gnav-list .c-btn.ef a::before {
    font-size: inherit
  }
  .gnav-list .c-btn.ef a::before {
    font-family: Prompt, sans-serif;
    font-style: normal
  }
  #conceptPage section:not(.message-intro) .c-topTitle b {
    font-size: 56px
  }
  #conceptPage section:not(.message-intro) .c-topTitle .ja {
    font-size: 15px
  }
  .l-intro .copy {
    line-height: 1
  }
  .SPview, .v-sp {
    display: none!important
  }

  #indexPage .c-topTitle {
    padding-bottom: 75px;
    margin-bottom: 50px
  }
  #indexPage .blog-section .c-topTitle, #indexPage .contact-section .c-topTitle {
    margin-bottom: 72px
  }
  body:not(#indexPage) .c-topTitle, section:not(.l-entry) .c-topTitle {
    padding-bottom: 75px;
    margin-bottom: 72px
  }

  .contact-section {
    padding-bottom: 100px;
    text-align: right
  }
  .contact-section>* {
    text-align: left
  }

  #conceptPage .l-section {
    margin-top: 120px
  }
  .l-kv .l-cover {
    top: 0;
    left: calc(-100vw - 26vh);
    width: calc(100% + 58vh + 140px);
    height: 100vh;
    -webkit-transform: translateX(256vw);
    transform: translateX(256vw)
  }
  .l-kv .l-cover::after {
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg)
  }
  .l-container .l-kv .l-cover {
    -webkit-transform: translateX(100%) translateX(100vw);
    -webkit-transform: translateX(calc(100% + 100vw));
    transform: translateX(100%) translateX(100vw);
    transform: translateX(calc(100% + 100vw))
  }
  .l-toggle {
    display: none
  }
  .logo .mark {
    width: 100px;
    height: 50px
  }
  .logo .type {
    margin-left: 30px
  }
  
 .logo .type .type-ja{
   display:block;
   font-size:0.5em;
}
  
  .l-header {
    height: 104px
  }
  .l-header .inner {
    min-width: 980px;
    max-width: 1920px;
    height: 96px;
    padding: 0 48px 0 3.4%;
    padding-top: 32px;
    margin: 0 auto
  }
  .l-header .inner.v-sp {
    display: none
  }
  .l-header .l-gnav {
    margin-left: auto
  }
  .gnav-list {
    display: flex;
    align-items: center;
    color: #ffffff;
    justify-content: center;
  }
  .gnav-list .item {
    margin: 0 20px;
    letter-spacing: 0.2em;
  }
  .gnav-list .item a {
    position: relative;
    display: block;
    padding: 8px 0;
  }

  .gnav-list .item a:not(:hover)::after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
  }
  .gnav-list .item a:hover::after {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
  }

  .gnav-list .c-btn.ef .en, .gnav-list .c-btn.ef .large, .gnav-list .c-btn.ef a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s, -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .3s, transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
  }
  .gnav-list .c-btn.ef a::before {
    letter-spacing: .24em;
    content: attr(data-text)
  }
  .gnav-list .c-btn.ef a:not(:hover)::before {
    opacity: 0;
    -webkit-transform: translateY(1em);
    transform: translateY(1em)
  }
  .gnav-list .c-btn.ef .large, .gnav-list .c-btn.ef a:hover .en {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em)
  }
  .l-entry {
    display: flex;
    align-items: center;
    min-height: 500px;
    margin-top: 155px
  }
  .l-entry .inner {
    box-sizing: content-box
  }
  .l-entry .entry-btn {
    width: 360px;
    margin-top: 56px
  }
  .l-entry .entry-btn+.entry-btn {
    margin-top: 24px
  }
  .l-footer .inner {
    display: flex;
    align-items: center;
    padding: 56px 48px 60px 3.4%
  }
  .l-footer .fnav-list {
    justify-content: flex-end;
    margin-right: -8px
  }
  .l-footer .fnav-list .item {
    margin: 0 8px
  }
  .l-footer .fnav-list a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    border-bottom: 1px solid currentcolor;
    transition: -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
    transition: transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1)
  }
  .l-footer .fnav-list a:not(:hover)::after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
  }
  .l-footer .fnav-list a:hover::after {
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
  }
  .l-footer .contentsinfo {
    font-size: 10px
  }
  .l-footer .pagetop {
    top: -112px;
    right: 25px
  }
  .l-kv {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -104px;
    overflow: hidden
  }
  .l-kv {
    padding: 100px 13vw 0
  }
  .l-container:not(.width) .kv-visual {
    width: calc(171.4285714vh + 4vw);
    height: 100vh
  }
  .l-container:not(.width) .kv-visual {
    left: calc(50% - 83.714286vh)
  }
  .l-container.width .kv-visual {
    width: 104vw;
    height: 60.666666vw
  }
  .l-container.width .kv-visual {
    top: calc(50% - 30.333333vw);
    left: -2vw
  }
  .kv-title.v-sp {
    display: none
  }
  .kv-description {
    margin-bottom: 16px
  }
  .kv-sparkle {
    position: absolute;
    z-index: -1
  }
  .kv-sparkle li:nth-child(1) {
    top: -55px;
    left: calc(340vw / 13.66);
    width: 205px;
    height: 185px
  }
  .kv-sparkle li:nth-child(2) {
    top: calc(40vh / 7.34);
    left: calc(510vw / 13.66);
    width: 141px;
    height: 143px
  }
  .kv-sparkle li:nth-child(3) {
    top: calc(140vh / 7.34);
    left: calc(510vw / 13.66);
    width: 103px;
    height: 106px
  }
  .kv-sparkle li:nth-child(4) {
    top: calc(170vh / 7.34);
    left: calc(760vw / 13.66);
    width: 139px;
    height: 144px
  }
  .kv-sparkle li:nth-child(5) {
    top: calc(50vh / 7.34);
    left: calc(820vw / 13.66);
    width: 263px;
    height: 237px
  }
  .kv-sparkle li img {
    max-width: 100%
  }
  .l-kv .l-cover {
    top: 0;
    left: calc(-100vw - 29vh);
    width: calc(100% + 58vh + 140px);
    height: 100vh;
    -webkit-transform: translateX(256vw);
    transform: translateX(256vw)
  }
  .l-kv .l-cover::after {
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg)
  }
  .l-container.cover .l-kv .l-cover {
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw)
  }
  .l-container.active .l-kv .l-cover {
    -webkit-transform: none;
    transform: none
  }
  .l-container:not(.active) .kv-visual {
    -webkit-transform: translateX(-2vw);
    transform: translateX(-2vw)
  }
  .l-container:not(.active) .kv-sparkle li {
    opacity: 0;
    -webkit-transform: translateX(-2vw);
    transform: translateX(-2vw)
  }
  .l-container:not(.active).isIE .kv-sparkle li, .l-container:not(.active).isIE .kv-visual {
    -webkit-transform: translateX(-32px);
    transform: translateX(-32px);
  }
  .l-intro {
    position: relative;
  }
  .l-topContents .l-intro {
    padding: 220px 0;
  }
  .l-topContents .message-intro {
    padding-top: 370px;
    padding-right:40%;
  }
  
    .l-topContents .app-intro {
    padding-top: 370px;
    padding-right:40%;
  }
  
  .l-topContents .contact-section {
    padding: 160px 0 80px
  }
  .l-topContents .blog-section {
    padding: 80px 0 160px;
  }
  .l-intro .copy {
    line-height: 1;
  }
  .l-intro .l-visual {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }
  .l-intro .l-visual .shape {
    width: 900px;
    height: 600px;
  }
  .l-container:not(.isIE):not(.isEdge) .l-intro .l-visual.in-view .shape {
    transition: -webkit-clip-path .3s .2s cubic-bezier(.215, .61, .355, 1);
    transition: clip-path .3s .2s cubic-bezier(.215, .61, .355, 1);
    transition: clip-path .3s .2s cubic-bezier(.215, .61, .355, 1), -webkit-clip-path .3s .2s cubic-bezier(.215, .61, .355, 1)
  }
  .l-container:not(.isIE):not(.isEdge) .l-intro .l-visual .shape:empty {
    background: #000
  }
  .l-container:not(.isIE):not(.isEdge) .l-intro .l-visual.in-view .shape:empty {
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  .l-intro.js-inview:not(.in-view) .l-visual .shape {
    opacity: 0
  }
  .l-container.isEdge .l-intro .l-visual .shape, .l-container.isIE .l-intro .l-visual .shape {
    background: center/cover no-repeat
  }
  .l-container.isEdge .l-intro.js-inview.in-view .l-visual .shape, .l-container.isIE .l-intro.js-inview.in-view .l-visual .shape {
    transition: opacity .6s
  }
  .l-container.isEdge .l-intro .l-visual .shape>*, .l-container.isIE .l-intro .l-visual .shape>* {
    display: none
  }
  .message-intro.js-inview.in-view .c-link {
    transition-delay: 1.7s
  }
  .l-topContents .message-intro .l-visual {
    top: 144px
  }
  .message-intro .l-visual {
    top: 0;
    right: -180px;
    left: auto;
    width: 828px;
    height: 878px
  }
  .message-intro .l-visual .boy {
    top: 450px;
    right: 140px;
    z-index: 1;
    width: 200px
  }
  .message-intro .l-visual .girl {
    top: 232px;
    right: 180px;
    width: 430px
  }
  .message-intro .l-visual .boy-smp {
    top: 650px;
    right: 90px;
    width: 250px
  }
  .message-intro .l-visual .girl-smp {
    top: 56px;
    right: 122px;
    z-index: -1;
    width: 126px
  }
  .message-intro .l-visual .shape {
    top: 170px;
    right: 0
  }
  .message-intro .l-visual .shape .bg-boy {
    left: -62px;
    width: 828px;
    height: 576px
  }
  #indexPage .message-intro .l-visual .shape .bg-boy {
    bottom: -14px
  }
  
   .app-intro.js-inview.in-view .c-link {
    transition-delay: 1.7s
  }
  .l-topContents .app-intro .l-visual {
    top: 144px
  }
  .app-intro .l-visual {
    top: 0;
    right: -180px;
    left: auto;
    width: 828px;
    height: 878px
  }
  .app-intro .l-visual .boy {
    top: 400px;
    right: 480px;
    z-index: 1;
    width: 300px
  }
  .app-intro .l-visual .girl {
    top: 232px;
    right: 180px;
    width: 430px
  }
  .app-intro .l-visual .boy-smp {
    top: -130px;
    right: 120px;
    width: 500px;
  }

  .app-intro .l-visual .shape {
    top: 170px;
    right: 0
  }
  .app-intro .l-visual .shape .bg-boy {
    left: -62px;
    width: 828px;
    height: 576px
  }
  #indexPage .message-intro .l-visual .shape .bg-boy {
    bottom: -14px
  }

  
  .message-intro .l-visual .shape .about-bg {
    top: -76px;
    right: -13px;
    width: 828px;
    height: 576px
  }
  
    .app-intro .l-visual .shape .app-bg {
    top: -76px;
    right: -13px;
    width: 828px;
    height: 576px
  }

  .message-intro .l-visual .shape .about-bg {
    top: -150px
  }
  
  .app-intro .l-visual .shape .app-bg {
    top: -150px
  }
  .l-container:not(.isIE):not(.isEdge) .l-intro .shape {
    -webkit-clip-path: polygon(37.2% 0, 100% 0, 62.7% 100%, 0 100%);
    clip-path: polygon(37.2% 0, 100% 0, 62.7% 100%, 0 100%)
  }
  .l-container.isEdge .message-intro .l-visual .shape, .l-container.isIE .message-intro .l-visual .shape {
    background-image: url(../img/top/concept_shape.png)
  }
  #conceptPage.paging:not(.send) .c-link {
    transition-delay: 1.7s
  }
  .l-topContents .works-intro {
    padding-bottom: 150px;
    padding-left: 40%
  }
  .works-intro .l-visual {
    top: 200px;
    left: -160px;
    width: 828px;
    height: 953px;
  }
  .works-intro .l-visual .boy {
    top: 130px;
    left: 55px;
    width: 500px
  }
  .works-intro .l-visual .girl {
    top: 330px;
    left: -20px;
    width: 300px;
  }
  .works-intro .l-visual .boy-smp {
    top: -70px;
    left: 100px;
    width: 400px;
  }
  .works-intro .l-visual .shape {
    top: 230px;
    left: 0
  }
  .works-intro .l-visual .shape .bg-boy {
    right: 0;
    bottom: -136px;
    width: 828px;
    height: 576px
  }
  .works-intro .l-visual .shape .ad-bg {
    bottom: 15px;
    left: 0;
    width: 823px;
    height: 576px
  }
  .l-container:not(.isIE):not(.isEdge) .works-intro .l-visual .shape {
    -webkit-clip-path: polygon(0 0, 61.5% 0, 100% 100%, 38.5% 100%);
    clip-path: polygon(0 0, 61.5% 0, 100% 100%, 38.5% 100%)
  }
  #worksPage .works-intro .l-visual {
    top: -104px;
    left: 50.7%;
    width: 470px;
    height: 620px
  }
  #worksPage .works-intro .l-visual .boy {
    top: 0;
    left: 27px;
    width: 490px
  }

  body.out.send .l-kv .l-cover {
    -webkit-transform: translateX(-8%);
    transform: translateX(-8%)
  }
  .p-error {
    padding-bottom: 150px
  }
}

@media screen and (max-width:374px) {
  .reason-list .item {
    padding: 24px 16px
  }
  .wp-pagenavi a:not(:first-child), .wp-pagenavi span:not(:first-child) {
    margin-left: 8px
  }
}

@media print, (min-width:375px) {
  .wp-pagenavi a:not(:first-child), .wp-pagenavi span:not(:first-child) {
    margin-left: 16px
  }
}

@media screen and (max-width:767px) {
  .l-toggleWrap {
    background: #553dcc
  }
  .l-toggle {
    max-width: none;
    background: 0 0;
    transition: opacity .3s
  }
  .l-toggle:not(.-show) {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

.c-table--col2 > .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #d2ff00;
}

.c-table--col2 > .item .key {
  width: 140px;
  padding-right: 15px;
  font-size: 16px;
  line-height: 1.74;
  margin-bottom: -4px;
  margin-top: -4px;
}
.c-table--col2 > .item .value {
    width: calc(100% - 140px);
    font-size: 14px;
    line-height: 1.74;
    margin-bottom: -4px;
    margin-top: -4px;
}
.c-table--col2 > .item .value span{
  display: block;;
  margin-bottom: 5px;
}

.l-kv .tx-mask, .l-kv .tx-mask span .ruby{
  display:inline;
}

[data-ruby] {
  position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1.5em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    letter-spacing:0.5em;
}

.l-txtContainer .br {
  margin-bottom:20px;
}

.privacy-policy {
  padding: 30px;
}

.privacy-policy .privacy-text{
  display: block;
}

.privacy-policy .br {
  margin-bottom:20px;
}