@charset "utf-8";
.overlay {
    mix-blend-mode: overlay;
}
.soft-light {
    mix-blend-mode: soft-light;
}
.lighten {
    mix-blend-mode: lighten;
}

.algae {
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5;
    opacity: 0;
    transition: 1s;
    animation: algae_fadeIn 2s forwards;
}
@keyframes algae_fadeIn {
	0% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
.algae_blur.blur {
    filter: blur(5px);
}

.algae .algae_inner .algae_content .algae_a._1{
    position: absolute;
    top: -14vh;
    left: 9.5vw;
    animation:
        rotate_1 110s infinite;
}

.algae .algae_inner .algae_content .algae_b._1{
    position: absolute;
    top: -7vh;
    right: 8.4vw;
    animation: fadePop 12s linear infinite;
}

.algae .algae_inner .algae_content .algae_b._2{
    position: absolute;
    bottom: -17vh;
    left: -8.5vw;
    transform: rotate(56.33deg);
    opacity: 0.6;
}

.algae .algae_inner .algae_content .algae_c._1{
    position: absolute;
    bottom: -8.1vh;
    right: 15.3vw;
    animation:
        rotate_1 100s infinite;
}
#kv.low .algae .algae_inner .algae_content .algae_c._1{
    display: none;
}

.algae .algae_inner .algae_content .algae_c._2{
    position: absolute;
    top: 12.3vh;
    left: -3.5vw;
    animation: rotate_2 90s infinite;
}

.algae .algae_inner .algae_content .algae_d._1{
    position: absolute;
    top: 1.5vh;
    right: 6.4vw;
    animation: stretch 30s ease-out infinite alternate;
}

.algae .algae_inner .algae_content .algae_d._2{
    position: absolute;
    bottom: -19.5vh;
    left: 8.9vw;
    animation: fadePop 22s linear infinite;
}

#kv.low .algae .algae_inner .algae_content .algae_d._2{
    display: none;
}

.algae .algae_inner .algae_content .algae_e._1{
    position: absolute;
    bottom: -18.9vh;
    right: -4.5vw;
    animation:
        fadePop 16s linear infinite;
}

.algae .algae_inner .algae_content .algae_f._1{
    position: absolute;
    top: -3vh;
    left: 17.4vw;
    animation:
        fadePop 11s linear infinite,
        rotate_2 95s infinite;
}

.algae .algae_inner .algae_content .algae_f._2{
    position: absolute;
    top: 23vh;
    left: 25vw;
    animation:
        fadePop 20s linear infinite,
        rotate_3 60s infinite;
}

.algae .algae_inner .algae_content .algae_g._1{
    position: absolute;
    top: 19.6vh;
    left: 9.7vw;
    animation:
        fadePop 15s linear infinite,
        rotate_1 100s infinite;
}

.algae .algae_inner .algae_content .algae_g._2{
    position: absolute;
    top: 32.6vh;
    left: 6.7vw;
    animation:
        fadePop 30s linear infinite,
        rotate_3 70s infinite;
}

.algae .algae_inner .algae_content .algae_h._1{
    position: absolute;
    bottom: 18.9vh;
    left: -5.3vw;
    animation:
        fadePop 8s linear infinite,
        rotate_1 90s infinite;
}

.algae .algae_inner .algae_content .algae_h._2{
    position: absolute;
    top: 0.9vh;
    left: -2.3vw;
    animation:
        fadePop 15s linear infinite,
        rotate_3 120s infinite;
}

.algae .algae_inner .algae_content .liquid-bubble img{
    animation: stretch 20s ease-out infinite alternate;
    opacity: 0.5;
}
.algae .algae_inner .algae_content .liquid_a._1{
    position: absolute;
    top: 26vh;
    left: 10vw;
}
.algae .algae_inner .algae_content .liquid_b._1{
    position: absolute;
    top: 2vh;
    left: -3vw;
}
.algae .algae_inner .algae_content .liquid_c._1{
    position: absolute;
    top: 15vh;
    left: 45vw;
    /* animation: fadePop 25s linear infinite; */
}
.algae .algae_inner .algae_content .liquid_d._1{
    position: absolute;
    top: 17vh;
    left: 14vw;
}
.algae .algae_inner .algae_content .liquid_e._1{
    position: absolute;
    top: 0;
    left: 0;
}
.algae .algae_inner .algae_content .liquid_f._1{
    position: absolute;
    bottom: 13vh;
    left: 10vw;
}
#kv.low .algae .algae_inner .algae_content .liquid_f._1{
    display: none;
}
.algae .algae_inner .algae_content .liquid_g._1{
    position: absolute;
    bottom: 36vh;
    left: 6vw;
}
.algae .algae_inner .algae_content .liquid_h._1{
    position: absolute;
    top: 20vh;
    right: 2vw;
}

#company .company_algae,
#other_business .other_business_algae {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0.7;
    z-index: 5;
}
#company .company_algae .algae_inner_a,
#company .company_algae .algae_inner_b,
#company .company_algae .algae_inner_c,
#other_business .other_business_algae .algae_inner_a,
#other_business .other_business_algae .algae_inner_b,
#other_business .other_business_algae .algae_inner_c {
}
#company .company_algae ul li, 
#other_business .other_business_algae ul li {
    width: fit-content;
    position: absolute;
}
#company .company_algae .algae_inner_a ul li:first-child,
#other_business .other_business_algaee .algae_inner_a ul li:first-child {
    left: -1%;
    top: -20%;
    opacity: 1;
}
#company .company_algae .algae_inner_b ul li:first-child,
#other_business .other_business_algae .algae_inner_b ul li:first-child {
    right: 3%;
    bottom: -3%;
    opacity: 0.5;
    scale: 1.3;
}
#company .company_algae .algae_inner_c ul li:first-child,
#other_business .other_business_algae .algae_inner_c ul li:first-child {
    left: -13%;
    top: 10%;
    opacity: 0.7;
}
#company .company_algae .algae_inner_c ul li:nth-child(2),
#other_business .other_business_algae .algae_inner_c ul li:nth-child(2) {
    left: -12%;
    bottom: -13%;
    opacity: 0.5;
}
#company .company_algae .algae_inner_c ul li:nth-child(3),
#other_business .other_business_algae .algae_inner_c ul li:nth-child(3) {
    right: 0;
    bottom: -10%;
    opacity: 1;
    scale: 1.3;
}
#company .company_algae .algae_inner_c ul li:nth-child(4),
#other_business .other_business_algae .algae_inner_c ul li:nth-child(4) {
    right: -5%;
    bottom: 14%;
    opacity: 1;
    scale: 1;
}

#contact .contact_algae {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
#contact .contact_algae ul li {
    width: fit-content;
    /* position: absolute; */
}
#contact .contact_algae .algae_content .algae_f._1 {
    position: absolute;
    top: 0;
    left: 0;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_3 70s infinite;
}
#contact .contact_algae .algae_content .algae_f._2 {
    position: absolute;
    bottom: 0;
    right: 6%;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_1 80s infinite;
}
#contact .contact_algae .algae_content .algae_g._1 {
    position: absolute;
    bottom: 6%;
    left: -4vw;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_3 90s infinite;
}
#contact .contact_algae .algae_content .algae_g._2 {
    position: absolute;
    top: 6%;
    right: 7vw;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_1 90s infinite;
}
#contact .contact_algae .algae_content .algae_h._1 {
    position: absolute;
    top: 10%;
    left: -3%;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_1 100s infinite;
}
#contact .contact_algae .algae_content .algae_h._2 {
    position: absolute;
    top: 50%;
    right: 7%;
    animation:
        /* fadePop 30s linear infinite, */
        rotate_3 100s infinite;
}

.rotate_a {
    animation-name: rotate_a;
    animation-duration: 90s;
    animation-iteration-count:infinite;
}

.rotate_b {
    animation-name: rotate_b;
    animation-duration: 120s;
    animation-iteration-count:infinite;
}

@keyframes rotate_a {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate_b {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 縦横の伸びを控えめに・ゆっくり */
@keyframes stretch {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  25% {
    transform: scaleX(1.1) scaleY(0.9);
  }
  50% {
    transform: scaleX(0.9) scaleY(1.1);
  }
  75% {
    transform: scaleX(1.1) scaleY(0.9);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

/* 消えたり現れたり */
@keyframes fadePop {
0%   { opacity: 1; transform: scale(0.95); }
50%  { opacity: 0.2; transform: scale(1); }
100% { opacity: 1; transform: scale(0.95); }
}

/* 回転アニメーション */
.rotate_1 {
    animation-name: rotate_1;
    animation-duration: 90s;
    animation-iteration-count:infinite;
}

.rotate_2 {
    animation-name: rotate_2;
    animation-duration: 120s;
    animation-iteration-count:infinite;
}

@keyframes rotate_1 {

    0% {
        transform: rotate(0deg) translateX(15%) translateY(-30%);
    }

    50% {
        transform: rotate(180deg) translateX(0) translateY(30%);
    }

    100% {
        transform: rotate(360deg) translateX(5%) translateY(-30%);
    }
}

@keyframes rotate_2 {

    0% {
        transform: rotate(0deg) translateX(-10%) translateY(30%);
    }

    50% {
        transform: rotate(180deg) translateX(10%) translateY(-30%);
    }

    100% {
        transform: rotate(360deg) translateX(-10%) translateY(30%);
    }
}

@keyframes rotate_3 {

    0% {
        transform: rotate(0deg) translateX(15%) translateY(-30%);
    }

    50% {
        transform: rotate(-180deg) translateX(0) translateY(30%);
    }

    100% {
        transform: rotate(-360deg) translateX(5%) translateY(-30%);
    }
}

@media (max-width: 1280px) {
    .algae ul .algae_content img {
        scale: 0.7;
        transition: 1s;
    }
    .algae .algae_inner .algae_content .algae_a._1 {
        top: -24vh;
    }
    .algae .algae_inner .algae_content .algae_b._1 {
        right: -11.6vw;
    }
    .algae .algae_inner .algae_content .algae_b._2 {
        left: -16.5vw;
    }
    .algae .algae_inner .algae_content .algae_c._2 {
        left: -9.5vw;
    }
    .algae .algae_inner .algae_content .algae_e._1 {
        right: -10.5vw;
    }
    #kv_sp.low .algae .algae_inner .algae_content .algae_e._1 {
        display: none;
    }
    .algae .algae_inner .algae_content .algae_f._1 {
        left: 11.4vw;
    }
    .algae .algae_inner .algae_content .algae_g._1 {
        left: 3.7vw;
    }
    #kv_sp.low .algae .algae_inner .algae_content .algae_g._1 {
        display: none;
    }
    .algae .algae_inner .algae_content .algae_h._1 {
        left: -8.3vw;
    }
}

@media (max-width: 767px) {
    #company .company_algae ul li {
        scale: 0.7 !important;
    }
    .algae .algae_inner .algae_content .algae_c._1 {
        bottom: -2.1vh;
        right: -44.7vw;
    }
    #kv_sp.low .algae .algae_inner .algae_content .algae_c._1{
        display: none;
    }
    .algae .algae_inner .algae_content .algae_c._2 {
        left: -26.5vw;
        top: 42.3vh;
    }
    .algae .algae_inner .algae_content .algae_d._1 {
        right: -33.6vw;
    }
    #kv_sp.low .algae .algae_inner .algae_content .algae_d._2{
        display: none;
    }
    .algae .algae_inner .algae_content .algae_h._1 {
        left: -30.3vw;
        scale: 0.5;
    }
    .algae .algae_inner .algae_content .algae_h._2 {
        scale: 0.3;
    }
    .algae .algae_inner .algae_content .liquid_b._1 {
        top: -1vh;
        left: -18vw;
    }
    .algae .algae_inner .algae_content .liquid_c._1 {
        top: 22vh;
        left: -10vw;
        scale: 0.5;
    }
    .algae .algae_inner .algae_content .liquid_d._1 {
        top: 13vh;
        left: 24vw;
        scale: 0.6;
    }
    #kv_sp.low .algae .algae_inner .algae_content .liquid_d._1 {
        display: none;
    }
    .algae .algae_inner .algae_content .liquid_f._1,
    #kv_sp.low .algae .algae_inner .algae_content .liquid_f._1 {
        display: none;
    }
    .algae .algae_inner .algae_content .liquid_g._1 {
        bottom: 10vh;
        left: 12vw;
    }
    #kv_sp .algae .algae_inner .algae_content .liquid_g._1 {
        display: none;
    }
    .algae .algae_inner .algae_content .liquid_h._1 {
        top: 5vh;
        right: -15vw;
        scale: 0.4;
    }
    #company .company_algae .algae_content figure img,
    #other_business .other_business_algae .algae_content figure img {
        scale: 0.5;
    }
    #company .company_algae .algae_inner_a ul li:first-child,
    #other_business .other_business_algae .algae_inner_a ul li:first-child {
        left: -31%;
    }
    #company .company_algae .algae_inner_b ul li:first-child,
    #other_business .other_business_algae .algae_inner_b ul li:first-child {
        right: -57%;
    }
    #company .company_algae .algae_inner_c ul li:first-child,
    #other_business .other_business_algae .algae_inner_c ul li:first-child {
        left: -53%;
    }
    #company .company_algae .algae_inner_c ul li:nth-child(2),
    #other_business .other_business_algae .algae_inner_c ul li:nth-child(2) {
        left: -62%;
        bottom: -33%;
    }
    #company .company_algae .algae_inner_c ul li:nth-child(3),
    #other_business .other_business_algae .algae_inner_c ul li:nth-child(3) {
        right: -88vw;
        bottom: -50%;
    }
    #company .company_algae .algae_inner_c ul li:nth-child(4),
    #other_business .other_business_algae .algae_inner_c ul li:nth-child(4) {
        right: -55%;
    }

    #contact .contact_algae .algae_content figure img,
    #other_business .other_business_algae .algae_content figure img {
        scale: 0.5;
    }
    #contact .contact_algae .algae_content .algae_h._1,
    #other_business .other_business_algae .algae_content .algae_h._1 {
        top: -7%;
    }
    #contact .contact_algae .algae_content .algae_h._2,
    #other_business .other_business_algae .algae_content .algae_h._2 {
        top: 40%;
    }
}