@keyframes pulse {
  0% {
    opacity: 0;
  }
  10% {
    transform-origin: 50% 50%;
    transform: rotate(-20deg) scale(3);
    transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    opacity: 0.8;
    transform: rotate(0deg) scale(1);
  }
  90% {
    opacity: 1;
    transform: rotate(0deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
@keyframes boin {
  0% {
    opacity: 0;
    transform: translate(106%, -32%) scale(0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: translate(106%, -32%) scale(1) rotate(0);
  }
}
@keyframes boinsp {
  0% {
    opacity: 0;
    transform: translate(106%, -24%) scale(0) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: translate(106%, -24%) scale(1) rotate(0);
  }
}
body {
  margin: 0;
}

.hybridcraft {
  --range-font-size: 1.3vw;
  overflow: hidden;
}
.hybridcraft * {
  box-sizing: border-box;
}
.hybridcraft img {
  vertical-align: top;
}
.hybridcraft h2, .hybridcraft p {
  margin: 0;
}
@media screen and (max-width: 1200px) and (min-width: 767px) {
  .hybridcraft {
    font-size: var(--range-font-size);
  }
}
.hybridcraft h1 {
  margin: 0;
}
.hybridcraft img {
  height: auto;
  max-width: 100%;
}
.hybridcraft .hc-fv {
  background: #00ae8c;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv {
    background: #00b08d;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-fv__logo {
    padding: 3.625em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__logo {
    padding: 4.7008547009vw 4.7008547009vw 0 4.7008547009vw;
  }
}
.hybridcraft .hc-fv__logo a {
  display: block;
  width: 15.375em;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__logo a {
    width: 33.3333333333vw;
  }
}
.hybridcraft .hc-fv__logo img {
  font-size: 10px;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-fv__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0 1.875em;
  }
}
.hybridcraft .hc-fv__text {
  position: relative;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-fv__text {
    width: 35.5625em;
  }
}
.hybridcraft .hc-fv__str {
  position: relative;
  z-index: 2;
}
.hybridcraft .hc-fv__stamp {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-fv__stamp {
    width: 14.75em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__stamp {
    right: 5.1282051282vw;
    width: 32.9914529915vw;
  }
}
.hybridcraft .hc-fv__stamp.is-fire {
  animation: pulse 0.6s forwards;
}
.hybridcraft .hc-fv__man {
  pointer-events: none;
  position: relative;
  width: 25.3125em;
}
.hybridcraft .hc-fv__man img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__man {
    margin: 0 auto;
    margin-top: 9.8290598291vw;
    width: 72.6495726496vw;
  }
}
.hybridcraft .hc-fv__line {
  top: 25.375em;
  left: 0;
  width: 100%;
  padding: 0 8.6875em 0 8.0625em;
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__line {
    width: 72.6495726496vw;
    top: 72.6495726496vw;
    padding: 0 24.7863247863vw 0 23.0769230769vw;
  }
}
.hybridcraft .hc-fv__miken {
  width: 3px;
  height: 3px;
}
.hybridcraft .hc-fv__eye {
  position: relative;
  width: 3.5em;
  height: 3.5em;
  border-radius: 100px;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__eye {
    width: 10.0854700855vw;
    height: 10.0854700855vw;
  }
}
.hybridcraft .hc-fv__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  z-index: 1000;
}
.hybridcraft .hc-fv__circle {
  transition: 0.3s transform;
  position: absolute;
  left: calc(50% - 0.25em);
  top: calc(50% - 0.25em);
  background: #000;
  width: 0.625em;
  height: 0.625em;
  border-radius: 100px;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-fv__circle {
    left: calc(50% - 0.9401709402vw);
    top: calc(50% - 0.5982905983vw);
    width: 1.7094017094vw;
    height: 1.7094017094vw;
  }
}
.hybridcraft .hc-unit-0 {
  margin-top: 1.7094017094vw;
  background: #18a686;
  padding-top: 11.9658119658vw;
  padding-bottom: 8.547008547vw;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-0 {
    padding-top: 5em;
    padding-bottom: 6.25em;
    margin-top: 0.625em;
  }
}
.hybridcraft .hc-unit-0__text {
  position: relative;
  margin: 0 auto;
  width: 39.9375em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-0__text {
    width: 75.4700854701vw;
  }
}
.hybridcraft .hc-unit-0__img {
  position: relative;
  margin: 0 auto;
  margin-top: 8.9743589744vw;
  width: 84%;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-0__img {
    margin-top: 2.1875em;
    width: 61.25em;
  }
}
.hybridcraft .hc-unit-0__link {
  position: absolute;
  right: 0;
  top: 0;
  width: 49%;
  height: 100%;
}
.hybridcraft .hc-unit-1 {
  background-color: #e88020;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-1 {
    padding-top: 6.25em;
    padding-bottom: 28.9375em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-1 {
    padding-top: 8.547008547vw;
    padding-bottom: 4.4444444444vw;
    background: #e88020 url("../images/unit_1_bg_sp.svg") 0 100%/100% auto no-repeat;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-1__box {
    position: relative;
    margin: 0 auto;
    width: 40em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-1__text {
    margin-left: 4.2735042735vw;
    width: 78.2905982906vw;
  }
}
.hybridcraft .hc-unit-1__nani {
  position: absolute;
  bottom: -13.75em;
  left: -13.125em;
  width: 20.1875em;
}
.hybridcraft .hc-unit-1__ph {
  position: absolute;
  right: -7.375em;
  top: 4.0625em;
  width: 10.6875em;
}
.hybridcraft .hc-unit-2 {
  position: relative;
  z-index: 2;
  background: #18a686;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-2 {
    height: 33.125em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-2 {
    padding-bottom: 5.9829059829vw;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-2::before, .hybridcraft .hc-unit-2::after {
    background: #18a686;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: -21.625em;
    width: 100vw;
    height: 20vw;
    transform: skewY(-16deg);
  }
}
.hybridcraft .hc-unit-2::after {
  width: 100vw;
  height: 40vw;
  translate: 0 40%;
}
.hybridcraft .hc-unit-2__box {
  position: relative;
  z-index: 3;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-2__box {
    transform: translateY(-15.625em);
    width: 43em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-2__box {
    transform: translateY(-4.2735042735vw);
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-2__text {
    width: 70.0854700855vw;
    margin-left: 20.5128205128vw;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-2__doredore {
    position: absolute;
    z-index: 3;
    width: 16.8125em;
    bottom: 2.5em;
    left: 50%;
    transform: translateX(17.875em);
  }
}
.hybridcraft .hc-unit-2__stamp {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-unit-2__stamp {
    width: 12.9375em;
    right: -4.375em;
    top: -10.75em;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-unit-2__stamp {
    right: 5.1282051282vw;
    top: 3.4188034188vw;
    width: 17.9487179487vw;
  }
}
.hybridcraft .hc-unit-2__stamp.is-fire {
  animation: pulse 0.6s forwards;
}
.hybridcraft .hc-sec {
  padding-top: 6.875em;
  padding-bottom: 6.25em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec {
    padding: 12.8205128205vw 6.8376068376vw;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec__ttl {
    margin: 0 auto 1.5em auto;
    text-align: center;
  }
}
@media screen and (max-width: 1200px) and (min-width: 767px) {
  .hybridcraft .hc-sec__ttl {
    font-size: var(--range-font-size);
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec__ttl {
    margin-bottom: 4.2735042735vw;
  }
}
.hybridcraft .hc-sec__lead {
  position: relative;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec__lead {
    margin: 0 auto;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec__lead {
    margin-left: 3.0769230769vw;
  }
}
.hybridcraft .hc-sec__hcm {
  position: absolute;
  right: 0;
  top: 0;
  width: 8.125em;
  transform: translate(106%, -32%) scale(0);
  transform-origin: 0% 50%;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec__hcm {
    transform: translate(106%, -24%) scale(0);
    width: 18.4615384615vw;
  }
}
.hybridcraft .hc-sec__hcm.is-fire {
  animation: boin 0.5s forwards ease-in-out;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec__hcm.is-fire {
    animation-name: boinsp;
  }
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec__img {
    margin: 3.4375em auto 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec__img {
    margin-top: 8.547008547vw;
    margin-left: 3.0769230769vw;
  }
}
.hybridcraft .hc-sec-1 {
  position: relative;
  z-index: 4;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-1 {
    padding-top: 20.5128205128vw;
  }
}
.hybridcraft .hc-sec-1__ttl {
  width: 37.375em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-1__ttl {
    width: 72.2222222222vw;
  }
}
.hybridcraft .hc-sec-1__lead {
  width: 47.125em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-1__lead {
    width: 55.9829059829vw;
  }
}
.hybridcraft .hc-sec-1__img {
  width: 44.1875em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-1__img {
    width: 76.9230769231vw;
  }
}
.hybridcraft .hc-sec-2 {
  position: relative;
  z-index: 4;
  background: #e0f0e9;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec-2 {
    background: #ccefe8;
    padding-top: 5em;
    padding-bottom: 3.125em;
  }
}
.hybridcraft .hc-sec-2__ttl {
  width: 46.0625em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-2__ttl {
    width: 81.1111111111vw;
  }
}
.hybridcraft .hc-sec-2__lead {
  width: 37.5em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-2__lead {
    width: 50.3418803419vw;
  }
}
.hybridcraft .hc-sec-2__img {
  width: 44.375em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-2__img {
    width: 80.2564102564vw;
  }
}
.hybridcraft .hc-sec-3 {
  background: #fff;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec-3 {
    padding-top: 5em;
    padding-bottom: 3.125em;
  }
}
.hybridcraft .hc-sec-3__ttl {
  width: 42.9375em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-3__ttl {
    width: 70.4273504274vw;
  }
}
.hybridcraft .hc-sec-3__lead {
  width: 33.625em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-3__lead {
    width: 63.0769230769vw;
  }
}
.hybridcraft .hc-sec-3__img {
  width: 44.8125em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-3__img {
    width: 81.0256410256vw;
  }
}
.hybridcraft .hc-sec-4 {
  position: relative;
  z-index: 4;
  background: #e0f0e9;
}
@media screen and (min-width: 768px) {
  .hybridcraft .hc-sec-4 {
    background: #ccefe8;
    padding-top: 5em;
    padding-bottom: 5em;
  }
}
.hybridcraft .hc-sec-4__ttl {
  width: 46.3125em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-4__ttl {
    width: 72.3076923077vw;
  }
}
.hybridcraft .hc-sec-4__lead {
  width: 43.25em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-4__lead {
    width: 57.4358974359vw;
  }
}
.hybridcraft .hc-sec-4__img {
  width: 43.5625em;
}
@media screen and (max-width: 767px) {
  .hybridcraft .hc-sec-4__img {
    width: 79.4871794872vw;
  }
}

.hc-lineup {
  background: #00ae8c;
  padding: 7.1875em 0 1.5625em 0;
}
@media screen and (max-width: 767px) {
  .hc-lineup {
    padding: 17.094017094vw 0 1.7094017094vw 0;
  }
}
.hc-lineup__text {
  position: relative;
}
@media screen and (min-width: 768px) {
  .hc-lineup__text {
    width: 56.0625em;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .hc-lineup__sentence {
    margin-left: auto;
    margin-right: auto;
    width: 80.7692307692vw;
  }
}
.hc-lineup__stamp {
  position: absolute;
  right: -8.5em;
  top: 2.875em;
  opacity: 0;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .hc-lineup__stamp {
    width: 12.9375em;
  }
}
@media screen and (max-width: 767px) {
  .hc-lineup__stamp {
    top: 32.4786324786vw;
    right: 2.5641025641vw;
    width: 17.6923076923vw;
  }
}
.hc-lineup__stamp.is-fire {
  animation: pulse 0.6s forwards;
}
.hc-lineup__ph {
  width: 88%;
}
@media screen and (min-width: 768px) {
  .hc-lineup__ph {
    margin: 5.625em auto 0 auto;
    width: 61.25em;
  }
}
@media screen and (max-width: 767px) {
  .hc-lineup__ph {
    margin-top: 10.2564102564vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.hc-lineup__link {
  margin: 1.25em auto 0 auto;
  width: 30.5em;
  transition: 0.25s opacity;
}
@media screen and (max-width: 767px) {
  .hc-lineup__link {
    margin-top: 2.5641025641vw;
    width: 56.4102564103vw;
  }
}
@media (hover: hover) {
  .hc-lineup__link:hover {
    opacity: 0.8;
  }
}
.hc-lineup__note {
  margin: 12.8205128205vw auto 0 auto;
  width: 45.1282051282vw;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .hc-lineup__note {
    margin: 6.875em auto 0 auto;
    width: 22em;
  }
}

@media screen and (max-width: 767px) {
  .hc-hidden-ltSP {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .hc-hidden-ltTAB {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .hc-hidden-gtTAB {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .hc-hidden-gtPC {
    display: none;
  }
}

.hc-footer {
  background: #e88020;
  color: #fff;
  padding: 2.5em 0 1.25em 0;
}
@media screen and (max-width: 767px) {
  .hc-footer {
    padding: 5.9829059829vw 0;
  }
}
@media screen and (min-width: 768px) {
  .hc-footer__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 3em;
  }
}
@media screen and (max-width: 767px) {
  .hc-footer__list {
    margin-left: 11.1111111111vw;
  }
}
.hc-footer__list > li {
  width: calc(var(--w) / 16 * 1em);
}
@media screen and (max-width: 767px) {
  .hc-footer__list > li {
    width: calc(var(--w) / 18 * 1em);
  }
  .hc-footer__list > li + li {
    margin-top: 2.5641025641vw;
  }
}
.hc-footer__copy {
  width: 24.875em;
  margin: 3.125em auto 0 auto;
}
@media screen and (max-width: 767px) {
  .hc-footer__copy {
    width: 88.547008547vw;
    margin-top: 6.8376068376vw;
  }
}
.hc-footer__copy small {
  display: block;
  font-size: 10px;
}
.hc-footer__copy img {
  width: 100%;
}
.hc-footer a {
  font-size: 10px;
  display: inline-block;
  transition: 0.25s opacity;
}
@media (hover: hover) {
  .hc-footer a:hover {
    opacity: 0.8;
  }
}