@charset "utf-8";

/*========= LOADING ===============*/
#splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--main-blue);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#splash-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#splash-logo img {
  width: 50%;
}

@media screen and (max-width: 768px){
    #splash-logo img {
    width: 100%;
    }
}

/*========= SCREEN TRANS ===============*/
.splashbg{
    display: none;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
}
/* =========================
main
========================= */
.mainVisual {
  position: relative;
  background: url(../images/mainvisual.webp) center / cover;
  height: 73vh;
}

.mainVisual h2 {
    color: rgba(var(--font-white-rgb), 0.9);
}

.mainTitle {
    position: absolute;
    right: 7%;
    bottom: 7%;
}

/***** MAIN SP *****/
@media screen and (max-width: 768px){
    .mainVisual {
        background: url(../images/mainvisual_sp.webp) center / cover;
    }

    .mainTitle .TextTyping {
        font-size: 1.4rem;
    }
} /* MAIN SP 768px */

@media screen and (max-width: 540px){
    .mainTitle .TextTyping {
        font-size: 1.2rem;
    }

} /* MAIN SP 540px */

@media screen and (max-width: 425px){
    .mainTitle {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 7%;
        text-align: center;
    }

} /* MAIN SP 425px */

@media screen and (max-width: 360px){
    .mainTitle .TextTyping {
        font-size: 1rem;
    }
} /* MAIN SP 360px */

/*========= ABOUT ===============*/
#about,
#business {
    position: relative;
}

.section--about,
.section--business {
    padding: initial;
}

.aboutImg01 {
    position: absolute;
    display: block;
    top: 5%;
    right: 0;
    width: 46%;
}

/* BG EXTEND */
.inner {
    width: 85%;
    z-index: 1;
    background: rgba(var(--font-white-rgb), 0.1);
    padding: 5% 0 5% 8%;
    margin-right: auto;
    margin-left: 0;
}

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
   0% {
    opacity: 0;
    transform: translateX(100px);
   }
   100% {
    opacity: 1;
    transform: translateX(0px);
   } 
}

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    0% {
     opacity: 0;
     transform: translateX(-100px);
    }
    100% {
     opacity: 1;
     transform: translateX(0px);
    } 
}

.about__topic {
    width: 75%;
}

.about__contents {
    display: flex;
    margin: 10% auto 0;
    padding: 0 6%;
    gap: 5em;
    justify-content: center;
}

.about__contents02 {
    display: flex;
    margin: 6% auto 0;
    padding: 0 9%;
    gap: 0;
    justify-content: center;
}

.about__contents02 .about__topic {
    width: 80%;
    min-width: 280px;
}

.about__contents02 h4 {
    margin-top: 1.5em;
    width: 20em;
}

.about__txt {
    width: 40%;
}

.about__txt h4 {
    line-height: 1.7;
}

.aboutImg02 {
    width: 50%;
    aspect-ratio: 914/741;
    object-fit: contain;
}

.aboutImg03 {
    width: 60%;
    min-width: 200px;
    aspect-ratio: 4/3;
    object-fit: contain;
}

/* ABOUT SP */
@media (max-width: 1200px) {
    .inner {
        padding: 5% 0 5% 7%;
    }

    .aboutImg01 {
        width: 44%;
    }

} /* ABOUT SP 1200px */

@media (max-width: 1120px) {
    .about__txt {
        width: 45%;
    }

    .aboutImg02 {
        width: 46%;
    }

    .aboutImg03 {
        width: 63%;
    }
} /* ABOUT SP 1120px */

@media (max-width: 960px) {
    .about__contents02 {
        padding: 0 7%;
    }

    .about__contents02 h4 {
        margin-top: 1.5em;
        width: 16em;
    } 
}/* ABOUT SP 960px */

@media (max-width: 768px) {
    .inner {
        width: 96%;
        padding: 15% 0 5% 6%;
    }

    .about__topic {
        width: 96%;
    }

    #about .inner .mrg2 {
        margin-top: 8.5em;
    }

    #about .inner .title {
        margin-left: 2em;
    }

    .about__topic .btn {
        margin: 2rem auto;
    }

    .aboutImg01 {
        width: 40%;
        top: 2%;
        right: 20%;
    }
    
    .about__contents {
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }

    .about__txt,
    .aboutImg02 {
        width: 100%;
        max-width: 560px;
    }

    .aboutImg02 {
        margin-top: 2em;
    }

    .about__contents02 {
        display: block;
        padding: 0 5%;
        margin-top: 3em;
    }

    .about__contents02 .title {
        width: initial;
    }

    .about__contents02 .about__topic {
        width: 81%;
        min-width: 0;
        margin: 0 auto 3em auto;
    }

    .about__contents02 h4 {
        width: 18em;
    }

    .aboutImg03 {
        max-width: 560px;
        min-width: 0;
        margin: 0 auto;
        display: block;
        aspect-ratio: 4/3;
        object-fit: contain;
    }

} /* ABOUT SP 768px */

@media (max-width: 540px) {
    #about .inner .mrg2 {
        margin-top: 7em;
    }

    .about__contents02 {
        padding: 0 2%;
    }

    .about__contents02 .about__topic {
        width: 92%;
    }

    .about__contents02 .about__topic,
    .aboutImg03 {
        max-width: 100%;
    }

    .aboutImg03 {
        width: 80%;
    }
} /* ABOUT SP 540px */

@media (max-width: 425px) {
    #about .inner .title {
        margin-left: 1em;
    }

    .aboutImg01 {
        width: 45%;
        right: 15%;
    }

    .about__contents {
        gap: 0;
    }

    .about__txt,
    .aboutImg02 {
        max-width: 100%;
    }

    .about__contents02 h4 {
        width: 15em;
        font-size: 1.8rem;
        line-height: 1.8;
    }

    .about__contents02 .about__topic {
        margin: 0 auto 1.5em auto;
    }
} /* ABOUT SP 425px */

/*========= BUSINESS ===============*/
.section--business .inner {
    margin-left: auto; 
    margin-right: 0;
    padding: 6% 0 4% 44%;
}

.business__topic {
    width: 71%;
}

#business .title {
    width: initial;
}

#business .ruby {
    padding-left: 0;
}

.business__contents {
    position: absolute;
    top: 20%;
    display: flex;
    gap: 2em;
    width: 100%;
}

.business__contents a {
    display: block;
    width: 25%;
}

#business .btn {
    margin: 3em auto 0;
}

.businessImg {
    width: 100%;
    display: block;
}

/* BUSINESS SP */
@media (max-width: 960px) {
    .section--business .inner {
        padding: 6% 10% 7% 12%;
    }

    .business__topic {
        width: 100%;
    }

    .business__contents {
        position: static;
        gap: 1em;
    }

    .business__contents a {
        width: 42%;
        min-width: 154px;
        margin-bottom: 1.5em;
    }
    .businessImg {
        width: 100%;
        display: block;
    }
    #business .btn {
        margin: 2em auto 0;
    }
} /* BUSINESS SP 960px */

@media (max-width: 540px) {
    .section--business .inner {
        padding: 8% 14% 7% 15%;
    }

} /* BUSINESS SP 540px */