@charset "UTF-8";
/*	cmn-color
------------------------------------ */
/*	transition,hover
------------------------------------ */
/*	media-screen
------------------------------------ */
/*	font
------------------------------------ */
@font-face {
  font-family: "NotoSansCJKjp-Regular";
  src: url("../fonts/NotoSansCJKjp-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansCJKjp-Medium";
  src: url("../fonts/NotoSansCJKjp-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansCJKjp-Bold";
  src: url("../fonts/NotoSansCJKjp-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansCJKjp-Black";
  src: url("../fonts/NotoSansCJKjp-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DelaGothicOne-Regular";
  src: url("../fonts/DelaGothicOne-Regular.ttf");
  font-display: swap;
}
/*	layout
------------------------------------ */
/* animation
例）animation: fadedown .5s ease-in-out;
遅延）animation-delay: 0.5s;
最後の状態維持）animation-fill-mode: forwards;
------------------------------------ */
@keyframes fadedown {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeup {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes faderight {
  0% {
    transform: translateX(10px);
    opacity: 0;
  }
  50% {
    transform: translateX(5px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes grad-fill {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes floatY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--amp));
  }
}
/* キーフレーム（短く細かく動かす — ジョジョの擬音感） */
@keyframes dododo {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -1px) rotate(-0.6deg);
  }
  20% {
    transform: translate(2px, 0px) rotate(0.8deg);
  }
  30% {
    transform: translate(-1px, 1px) rotate(-0.4deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(0.3deg);
  }
  50% {
    transform: translate(-2px, 0px) rotate(-0.9deg);
  }
  60% {
    transform: translate(1px, 1px) rotate(0.6deg);
  }
  70% {
    transform: translate(-1px, 0px) rotate(-0.3deg);
  }
  80% {
    transform: translate(2px, -1px) rotate(0.9deg);
  }
  90% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/* 強め（振幅大きめ） */
@keyframes dododo-strong {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-3px, -2px) rotate(-1.2deg);
  }
  20% {
    transform: translate(4px, 0px) rotate(1.6deg);
  }
  30% {
    transform: translate(-3px, 2px) rotate(-1deg);
  }
  40% {
    transform: translate(3px, -2px) rotate(0.8deg);
  }
  50% {
    transform: translate(-4px, 0px) rotate(-1.6deg);
  }
  60% {
    transform: translate(3px, 2px) rotate(1.2deg);
  }
  70% {
    transform: translate(-2px, 0px) rotate(-0.7deg);
  }
  80% {
    transform: translate(4px, -2px) rotate(1.8deg);
  }
  90% {
    transform: translate(-3px, 2px) rotate(-1.1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/* ソフト（振幅小さめ・遅め）*/
@keyframes dododo-soft {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  12% {
    transform: translate(-1px, 0px) rotate(-0.3deg);
  }
  25% {
    transform: translate(1px, -1px) rotate(0.4deg);
  }
  37% {
    transform: translate(-1px, 1px) rotate(-0.2deg);
  }
  50% {
    transform: translate(0, 0) rotate(0deg);
  }
  62% {
    transform: translate(1px, 0px) rotate(0.3deg);
  }
  75% {
    transform: translate(-1px, -1px) rotate(-0.4deg);
  }
  87% {
    transform: translate(1px, 1px) rotate(0.2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/*	font-size  cmn
------------------------------------ */
/*	cmn parts
------------------------------------ */
.md-inner {
  width: 100%;
  max-width: 1280px;
  margin: auto;
}

/* =========================================

  main layout  all

========================================= */
/* top-about  PC
------------------------------------ */
#top-about .about-inner {
  padding: 96px 0 78px;
}

/* top-character  PC
------------------------------------ */
#top-character .character-inner {
  padding: 73px 0 116px;
}

/* top-works  PC
------------------------------------ */
#top-works .works-inner {
  padding: 102px 0 174px;
}

/* top-charm  PC
------------------------------------ */
#top-charm .charm-inner {
  padding: 116px 0 0;
}
#top-charm .charm-inner02 {
  padding-bottom: 82px;
}

/* top-data  PC
------------------------------------ */
#top-data .data-inner {
  padding: 93px 0 98px;
}

/* top-career  PC
------------------------------------ */
#top-career .career-inner {
  padding: 95px 0 50px;
}

/* top-salary  PC
------------------------------------ */
#top-salary .salary-inner {
  padding: 48px 0 90px;
}

/* top-person  PC
------------------------------------ */
#top-person .person-inner {
  padding: 95px 0 100px;
}

/* top-job  PC
------------------------------------ */
#top-job .job-inner {
  padding: 100px 0;
}

/* top-flow  PC
------------------------------------ */
#top-flow .flow-inner {
  padding: 91px 0 154px;
}

/* top-entry  PC
------------------------------------ */
#top-entry .entry-inner {
  padding: 95px 0 100px;
}

/* top-message  PC
------------------------------------ */
#top-message .message-inner {
  padding: 90px 0 110px;
}
@media screen and (min-width: 768px) and (max-width: 1654px) {
  #top-message .message-inner {
    padding-bottom: 300px;
  }
}

/* top-news  PC
------------------------------------ */
#top-news .news-inner {
  padding: 146px 0 100px;
}

/* top-company  PC
------------------------------------ */
#top-company .company-inner {
  padding: 100px 0;
}

/* =========================================

  sub layout  all

========================================= */
/* work  PC
------------------------------------ */
#work .work-inner {
  padding: 120px 0 210px;
}
#work .job-inner {
  padding: 100px 0;
}

/* flow  PC
------------------------------------ */
#flow .flow-inner {
  padding: 200px 0 0;
}/*# sourceMappingURL=style.css.map */