@charset "utf-8";

/*========= LOADING ===============*/
#splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--font-white);
  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: 50%;
    }
}

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

.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
}
/* =========================
main
========================= */
.nav__btn.active span:nth-of-type(1),
.nav__btn.active span:nth-of-type(2) {
    background: var(--font-white);
}

.nav__list {
    color: var(--font-black);
}

.header.is-bg::before {
  background: rgba(var(--font-white-rgb), 0.8);
}

.mainVisual {
  position: relative;
  background: url(../images/mainvisual.webp) center / cover;
  height: 73vh;
}

.mainVisual h2,
.mainVisual .TextTyping {
    color: var(--main-blue);
}

.mainTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    mix-blend-mode: overlay;
}

.spBr {
    display: none;
}

/***** MAIN SP *****/
@media screen and (max-width: 768px){
    .nav__list {
        color: var(--font-white);
    }

    .mainVisual {
        background: url(../images/mainvisual_sp.webp) center / cover;
    }

    .mainTitle .TextTyping {
        font-size: 1.4rem;
    }

    .spBr {
        display: block;
    }
} /* 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 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        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: 10%;
    right: 0;
    width: 45%;
}

/* BG EXTEND */
.inner {
    width: 85%;
    z-index: 1;
    background: rgba(var(--font-black-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 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%;
    }
} /* 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: 3%;
        right: 12%;
    }

    .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;
    }

} /* 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 {
        max-width: 100%;
    }
} /* ABOUT SP 540px */

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

    .about__topic h4 {
        margin-top: 3em;
    }

    .aboutImg01 {
        width: 45%;
    }

    .about__contents {
        gap: 0;
    }

    .about__txt {
        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 {
    position: relative;
    margin-top: 0;
    padding: 0;
}

.business__contents02 {
    margin: 10% auto 0;
    padding: 0 7%;
}

.section--business .title {
    width: initial;
}

.section--business .ruby {
    text-align: center;
    margin-bottom: 2em;
}

.business__topic h4 {
    text-align: center;
}

.business__topic p {
    margin: 0 auto;
    max-width: 920px;
    text-align: left;
}

.business__img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    width: 100%;
    max-width: 920px;
    margin: 2.5em auto 0;
}

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

/*****  BUSINESS SP *****/
@media screen and (max-width: 768px){
    .business__txt {
        font-size: 1.3rem;
        left: 3vw;
        bottom: 3vw;
        max-width: 80vw;
    }

    .business__txt h3 {
        font-size: 2.4rem;
        margin: 0;
    }

    .businessImg {
        width: 100vw;
        min-width: 0;
    }

    .business__contents {
        aspect-ratio: 16/10;
    }
} /* business SP 768px */

@media screen and (max-width: 425px) {
  .business__img {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    width: 100%;
    max-width: 100%;
    margin: 2em auto 0;
  }
  .business__img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media screen and (max-width: 375px){
    .business__txt h3 {
        font-size: 2rem;
    }

    .business__txt p {
        font-size: 1rem;
    }

    .business__topic h4 {
        font-size: 1.5rem;
    }
} /* business SP 375px */

/*========= VISION ===============*/
.section--vision {
    padding: initial;
    position: relative;
}

.section--vision .inner {
    margin-left: auto; 
    margin-right: 0;
    padding: 4% 0 4% 36%;
}

.vision__topic {
    width: 75%;
}

#vision .title {
    width: initial;
    text-align: center;
}

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

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

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

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

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

    .vision__topic {
        width: 100%;
    }

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

    .vision__contents a {
        width: 42%;
        min-width: 154px;
        margin-bottom: 1.5em;
    }
    .visionImg {
        width: 100%;
        display: block;
    }
    #vision .btn {
        margin: 2em auto 0;
    }
} /* VISION SP 960px */

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

} /* VISION SP 540px */