@charset "UTF-8";
/* -------------------------
  foundation
-------------------------　*/
/*!
 * ress.css • v2.0.4
 * MIT License
 * github.com/filipelinhares/ress
 */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4; }

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

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

* {
  padding: 0;
  margin: 0; }

hr {
  overflow: visible;
  height: 0; }

details, main {
  display: block; }

summary {
  display: list-item; }

small {
  font-size: 80%; }

[hidden] {
  display: none; }

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

a {
  background-color: transparent; }

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

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

pre {
  font-size: 1em; }

b, strong {
  font-weight: bolder; }

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

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

input {
  border-radius: 0; }

[disabled] {
  cursor: default; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  resize: vertical; }

button, input, optgroup, select, textarea {
  font: inherit; }

optgroup {
  font-weight: 700; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  color: inherit; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted ButtonText; }

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button; }

button, input, select, textarea {
  background-color: transparent;
  border-style: none; }

select {
  -moz-appearance: none;
  -webkit-appearance: none; }

select::-ms-expand {
  display: none; }

select::-ms-value {
  color: currentColor; }

legend {
  border: 0;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit; }

img {
  border-style: none; }

progress {
  vertical-align: baseline; }

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

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

[aria-controls] {
  cursor: pointer; }

[aria-disabled] {
  cursor: default; }

/* -------------------------
  layout
-------------------------　*/
.l-main {
  /* -------------------------
  background-color: #333333;
  color: #f1f1f1;
  -------------------------　*/
  font-family: "SkipProN-E","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }

/* -------------------------
  component
-------------------------　*/
@media screen and (min-width: 768px) {
  .c-sp {
    display: none !important; } }

@media screen and (max-width: 767px) {
  .c-pc {
    display: none !important; } }

.c-mouse {
  background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #f1f1f1 50%, #f1f1f1 100%);
  position: relative;
  width: 32px;
  height: 54px;
  border-radius: 100px;
  background-size: 100% 200%;
  animation: colorSlide 6s linear infinite, nudgeMouse 6s ease-out infinite; }
  .c-mouse:before, .c-mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; }
  .c-mouse:before {
    width: 26px;
    height: 48px;
    background-color: #333333;
    border-radius: 100px; }
  .c-mouse:after {
    background-color: #f1f1f1;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    animation: trackBallSlide 6s linear infinite; }
  .c-mouse span {
    margin-top: 50px;
    letter-spacing: 12px;
    text-indent: 12px;
    color: #f1f1f1;
    animation: colorText 6s ease-out infinite, nudgeText 6s ease-out infinite; }

@keyframes colorSlide {
  0% {
    background-position: 0% 100%; }
  20% {
    background-position: 0% 0%; }
  21% {
    background-color: #4e5559; }
  29.99% {
    background-color: #f1f1f1;
    background-position: 0% 0%; }
  30% {
    background-color: #4e5559;
    background-position: 0% 100%; }
  50% {
    background-position: 0% 0%; }
  51% {
    background-color: #4e5559; }
  59% {
    background-color: #f1f1f1;
    background-position: 0% 0%; }
  60% {
    background-color: #4e5559;
    background-position: 0% 100%; }
  80% {
    background-position: 0% 0%; }
  81% {
    background-color: #4e5559; }
  90%, 100% {
    background-color: #f1f1f1; } }

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-20px); }
  6% {
    opacity: 1;
    transform: scale(0.9) translateY(5px); }
  14% {
    opacity: 0;
    transform: scale(0.4) translateY(40px); }
  15%, 19% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px); }
  28%, 29.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px); }
  30% {
    opacity: 1;
    transform: scale(1) translateY(-20px); }
  36% {
    opacity: 1;
    transform: scale(0.9) translateY(5px); }
  44% {
    opacity: 0;
    transform: scale(0.4) translateY(40px); }
  45%, 49% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px); }
  58%, 59.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px); }
  60% {
    opacity: 1;
    transform: scale(1) translateY(-20px); }
  66% {
    opacity: 1;
    transform: scale(0.9) translateY(5px); }
  74% {
    opacity: 0;
    transform: scale(0.4) translateY(40px); }
  75%, 79% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px); }
  88%, 100% {
    opacity: 1;
    transform: scale(1) translateY(-20px); } }

@keyframes nudgeMouse {
  0% {
    transform: translateY(0); }
  20% {
    transform: translateY(8px); }
  30% {
    transform: translateY(0); }
  50% {
    transform: translateY(8px); }
  60% {
    transform: translateY(0); }
  80% {
    transform: translateY(8px); }
  90% {
    transform: translateY(0); } }

@keyframes nudgeText {
  0% {
    transform: translateY(0); }
  20% {
    transform: translateY(2px); }
  30% {
    transform: translateY(0); }
  50% {
    transform: translateY(2px); }
  60% {
    transform: translateY(0); }
  80% {
    transform: translateY(2px); }
  90% {
    transform: translateY(0); } }

@keyframes colorText {
  21% {
    color: #4e5559; }
  30% {
    color: #f1f1f1; }
  51% {
    color: #4e5559; }
  60% {
    color: #f1f1f1; }
  81% {
    color: #4e5559; }
  90% {
    color: #f1f1f1; } }

.c-title {
  line-height: 1;
  letter-spacing: 0.08em; }

@media screen and (min-width: 768px) {
  .c-title {
    font-size: 3.75vw; } }

@media screen and (max-width: 767px) {
  .c-title {
    font-size: 7.4vw; } }

.c-read {
  text-align: center;
  letter-spacing: 0.07em; }
  .c-read small {
    display: block;
    font-size: 80%; }

@media screen and (min-width: 768px) {
  .c-read {
    font-size: 1.642vw;
    line-height: 48px; }
    .c-read small {
      margin-top: 8px; } }

@media screen and (max-width: 767px) {
  .c-read {
    font-size: 4.733vw;
    line-height: 1.8; }
    .c-read small {
      margin-top: 4px;
      line-height: 2.2; } }

.c-card__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #222222;
  border-radius: 5px;
  box-sizing: border-box;
  letter-spacing: 0.05em; }

.c-card__title {
  letter-spacing: 0.1em; }

.c-card__list {
  list-style: none;
  font-family: "SkipProN-M","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }

@media screen and (min-width: 768px) {
  .c-card {
    display: flex;
    justify-content: center; }
    .c-card__item {
      width: 320px;
      padding: 64px 32px; }
      .c-card__item + .c-card__item {
        margin-left: 32px; }
    .c-card__title, .c-card__list {
      margin-top: 32px; }
    .c-card__title {
      font-size: 1.338vw;
      white-space: nowrap; }
    .c-card__list li {
      text-indent: -0.7em;
      padding-left: 0.7em;
      font-size: 0.98vw; }
    .c-card__list li + li {
      margin-top: 8px; } }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .c-card {
    flex-wrap: wrap; }
    .c-card__item:nth-of-type(n + 3) {
      margin-top: 32px; } }

@media screen and (max-width: 767px) {
  .c-card {
    width: 100%; }
    .c-card__item {
      width: calc(100% - 32px);
      padding: 32px 16px;
      margin: auto; }
      .c-card__item + .c-card__item {
        margin-top: 16px; }
    .c-card__title, .c-card__list {
      margin-top: 16px; }
    .c-card__title {
      font-size: 4.733vw; }
    .c-card__list li {
      font-size: 4.2vw; }
    .c-card__list li + li {
      margin-top: 8px; } }

.c-index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 10; }
  .c-index__item {
    border-radius: 50%;
    background-color: #f1f1f1;
    opacity: 0.4; }
    .c-index__item--current {
      opacity: 0.7; }

@media screen and (min-width: 768px) {
  .c-index {
    right: 32px; }
    .c-index__item {
      width: 16px;
      height: 16px; }
      .c-index__item + .c-index__item {
        margin-top: 16px; } }

@media screen and (max-width: 767px) {
  .c-index {
    right: 8px; }
    .c-index__item {
      width: 8px;
      height: 8px; }
      .c-index__item + .c-index__item {
        margin-top: 16px; } }

/* -------------------------
  project
-------------------------　*/
@keyframes typing {
  from {
    width: 0; } }

@keyframes caret {
  50% {
    border-color: transparent; } }

.p-mv {
  min-width: 100%;
  height: 100vh;
  position: relative; }
  .p-mv__title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
    .p-mv__title span {
      display: inline-block;
      width: 4em;
      border-right: .08em solid;
      overflow: hidden;
      white-space: nowrap;
      animation: typing 4s steps(24, end), caret 1.8s step-end infinite; }
  .p-mv__bg {
    min-width: 100%;
    height: 100vh; }
  .p-mv .c-mouse {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto; }
  .p-mv .particles-js-canvas-el {
    height: 100vh !important; }

@media screen and (min-width: 768px) {
  .p-mv {
    min-height: 800px; }
    .p-mv__title {
      font-size: 4vw; }
    .p-mv .c-mouse {
      top: calc(100vh - 88px); }
    .p-mv .particles-js-canvas-el {
      min-height: 800px; } }

@media screen and (max-width: 767px) {
  .p-mv__title {
    font-size: 4vw; }
  .p-mv .c-mouse {
    bottom: 24px; } }

.p-content {
  overflow: hidden;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative; }
  .p-content > * {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease; }
  .p-content--current > * {
    opacity: 1;
    transform: translateY(0); }
  .p-content::after {
    content: "";
    display: block;
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20871.8%20721.1%22%20style%3D%22enable-background%3Anew%200%200%20871.8%20721.1%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st2%7Bfill%3A%23151618%3B%7D%20.st3%7Bfill%3A%23231815%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%22%3E%20%3Cpath%20class%3D%22st3%22%20d%3D%22M443.8%2C254.3c0-3.4-2.8-6.2-6.2-6.2H320.5c-3.4%2C0-4.2-2-1.8-4.4l82.8-82.8c2.4-2.4%2C2.4-6.4%2C0-8.8l-19.3-19.3%20c-2.4-2.4-6.4-2.4-8.8%2C0l-82.8%2C82.8c-2.4%2C2.4-4.4%2C1.6-4.4-1.8V96.8c0-3.4-2.8-6.2-6.2-6.2h-27.3c-3.4%2C0-6.2%2C2.8-6.2%2C6.2v117.2%20c0%2C3.4-2%2C4.2-4.4%2C1.8l-82.8-82.8c-2.4-2.4-6.4-2.4-8.8%2C0l-19.3%2C19.3c-2.4%2C2.4-2.4%2C6.4%2C0%2C8.8l82.8%2C82.8c2.4%2C2.4%2C1.6%2C4.4-1.8%2C4.4%20H95.2c-3.4%2C0-6.2%2C2.8-6.2%2C6.2v27.3c0%2C3.4%2C2.8%2C6.2%2C6.2%2C6.2h117.2c3.4%2C0%2C4.2%2C2%2C1.8%2C4.4L131.3%2C375c-2.4%2C2.4-2.4%2C6.4%2C0%2C8.8l19.3%2C19.3%20c2.4%2C2.4%2C6.4%2C2.4%2C8.8%2C0l82.8-82.8c2.4-2.4%2C4.4-1.6%2C4.4%2C1.8v117.1c0%2C3.4%2C2.8%2C6.2%2C6.2%2C6.2H280c3.4%2C0%2C6.2-2.8%2C6.2-6.2V322%20c0-3.4%2C2-4.2%2C4.4-1.8l82.8%2C82.8c2.4%2C2.4%2C6.4%2C2.4%2C8.8%2C0l19.3-19.3c2.4-2.4%2C2.4-6.4%2C0-8.8l-82.8-82.8c-2.4-2.4-1.6-4.4%2C1.8-4.4h117.2%20c3.4%2C0%2C6.2-2.8%2C6.2-6.2V254.3z%22%2F%3E%20%3Cpath%20class%3D%22st3%22%20d%3D%22M798.6%2C435.9c0-3.4-2.8-6.2-6.2-6.2H675.3c-3.4%2C0-4.2-2-1.8-4.4l82.8-82.8c2.4-2.4%2C2.4-6.4%2C0-8.8L737%2C314.5%20c-2.4-2.4-6.4-2.4-8.8%2C0l-82.8%2C82.8c-2.4%2C2.4-4.4%2C1.6-4.4-1.8V278.3c0-3.4-2.8-6.2-6.2-6.2h-27.3c-3.4%2C0-6.2%2C2.8-6.2%2C6.2v117.2%20c0%2C3.4-2%2C4.2-4.4%2C1.8l-82.8-82.8c-2.4-2.4-6.4-2.4-8.8%2C0l-19.3%2C19.3c-2.4%2C2.4-2.4%2C6.4%2C0%2C8.8l82.8%2C82.8c2.4%2C2.4%2C1.6%2C4.4-1.8%2C4.4H450%20c-3.4%2C0-6.2%2C2.8-6.2%2C6.2v27.3c0%2C3.4%2C2.8%2C6.2%2C6.2%2C6.2h117.2c3.4%2C0%2C4.2%2C2%2C1.8%2C4.4l-82.8%2C82.8c-2.4%2C2.4-2.4%2C6.4%2C0%2C8.8l19.3%2C19.3%20c2.4%2C2.4%2C6.4%2C2.4%2C8.8%2C0l82.8-82.8c2.4-2.4%2C4.4-1.6%2C4.4%2C1.8v117.1c0%2C3.4%2C2.8%2C6.2%2C6.2%2C6.2h27.3c3.4%2C0%2C6.2-2.8%2C6.2-6.2V503.6%20c0-3.4%2C2-4.2%2C4.4-1.8l82.8%2C82.8c2.4%2C2.4%2C6.4%2C2.4%2C8.8%2C0l19.3-19.3c2.4-2.4%2C2.4-6.4%2C0-8.8l-82.8-82.8c-2.4-2.4-1.6-4.4%2C1.8-4.4h117.2%20c3.4%2C0%2C6.2-2.8%2C6.2-6.2V435.9z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto; }

@media screen and (min-width: 768px) {
  .p-content {
    height: 100vh;
    min-height: 940px; }
    .p-content #promotion {
      height: 58px; }
    .p-content #creative {
      height: 58px; }
    .p-content #management {
      height: 58px; }
    .p-content .c-title {
      margin-bottom: 4vh; }
    .p-content .c-read {
      margin-bottom: 4vh; }
    .p-content::after {
      width: 39.583vw;
      height: 28.802vw;
      top: calc(50vh - 14.401vw); }
    .p-content#services::after {
      top: calc(50% - 45.401%); }
    .p-content#about::after {
      top: 0;
      bottom: 0; } }

@media screen and (max-width: 767px) {
  .p-content {
    min-height: 100vh;
    padding-top: 88px;
    box-sizing: border-box; }
    .p-content #promotion {
      width: 72px; }
    .p-content #creative {
      width: 86px; }
    .p-content #management {
      width: 66px; }
    .p-content .c-title {
      margin-bottom: 32px; }
    .p-content .c-read {
      margin-bottom: 32px; }
    .p-content::after {
      width: 90.533vw;
      height: 71.6vw;
      top: calc(50% - 35.8vw); }
    .p-content#services::after {
      top: calc(2.5%); }
    .p-content#about {
      padding-top: 0; } }

/* -------------------------
  utility
-------------------------　*/