@charset "utf-8";

body {
    color: var(--font-white);
}

/*========= LOADING ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--main-blue);
	z-index: 2;
	text-align:center;
	color:var(--font-white);
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    letter-spacing: 0.3em;
}

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

.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.appear .splashbg{
	display:block;
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 1;
    width: 50%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: translateX(-300%) skewX(-45deg);
    background-color: var(--main-blue);
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:translateX(-300%) skewX(-45deg);
	}
	100% {
		transform-origin:left;
		transform:translateX(500%) skewX(-45deg);
	}
}

#container{
	opacity: 0;
}

body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
    }
}

/***** SP *****/
@media (max-width: 768px) {
    body.appear .splashbg {
        animation-duration: 0.9s;
    }
} /* SP 768px */

/* =========================
main
========================= */
#canvas {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/***** SP *****/
@media screen and (max-width: 768px){

    .nav__btn span {
        background-color: var(--font-white);
    }
} /* SP 768px */

/*========= FV ===============*/
/* GRID IMG */
.mainImg-grid-container {
    position: absolute;
    top: 100px;
    right: 0;
    width: 70%;
    height: 65vh;
    min-height: 580px;
    max-height: calc(100vh - 120px);
    z-index: 5;
    overflow: hidden;
}

.mainImg-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: dense;
}

.grid-cell {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    grid-column: span 1;
    grid-row: span 1;
    background-color: rgba(var(--font-black-rgb), 0.2);
}

.grid-cell.visible {
    opacity: 1;
    transform: scale(1);
}

.grid-cell-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    transform: scale(1.1);
    will-change: transform, opacity;
}

.grid-cell-inner.fade-in {
    opacity: 0;
    transform: scale(1.25);
    animation: gridFadeIn 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.grid-cell-inner.fade-out {
    opacity: 1;
    transform: scale(1.1);
    animation: gridFadeOut 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--font-black-rgb), 0.15);
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.grid-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 70% 30%, rgba(var(--font-white-rgb), 0.2), rgba(var(--font-black-rgb), 0.2));
    pointer-events: none;
    z-index: 2;
}

.grid-cell.changing {
    z-index: 10;
    box-shadow: 0 0 20px rgba(var(--font-white-rgb), 0.1);
}

.size-1x1 {
    grid-column: span 1;
    grid-row: span 1;
}

.size-1x2 {
    grid-column: span 1;
    grid-row: span 2;
}

.size-2x1 {
    grid-column: span 2;
    grid-row: span 1;
}

.size-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.size-3x1 {
    grid-column: span 3;
    grid-row: span 1;
}

@keyframes gridFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.25);
        filter: brightness(1.3) blur(5px);
    }
    40% {
        opacity: 0.7;
        filter: brightness(1.1) blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1) blur(0);
    }
}

@keyframes gridFadeOut {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: blur(0);
    }
    40% {
        opacity: 0.2;
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(5px);
    }
}

.mainVisual {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: flex-end;
}

.mainTitle {
    position: relative;
    margin-bottom: 5vh;
    mix-blend-mode: difference;
    z-index: 10;
}

.mainTitle .topic {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    color: var(--font-white);
}

.mainVisual .TextTyping {
    padding-left: 0;
}

/* MAINVISUAL SP */
@media (max-width: 768px) {
    .mainImg-grid-container {
        top: 64px;
    }
    
    .mainImg-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }
} 

@media (max-width: 480px) {
    .mainTitle {
        bottom: -13vh;
    }

    .mainTitle .topic {
        font-size: 2.8rem;
    }

    .mainImg-grid {
        grid-template-rows: repeat(4, 1fr);
    }
} 

@media (max-width: 375px) {
    .mainTitle .topic {
        font-size: 2.4rem;
    }
} 

/*========= VISION ===============*/
#vision {
    max-width: 450px;
    margin: 15% auto 0;
}

#vision .title {
    max-width: 274px;
    margin: 0 auto;
}

.vision__contents {
    margin: 0 auto;
}

#vision .btn {
    display: block;
    margin: 3rem auto 0;
}

/* VISION SP */
@media (max-width: 768px) {
    .vision__contents {
        padding: 0 0 0 8%;
    }
} /* VISION SP 768px */

@media (max-width: 480px) {
    #vision {
        margin: 40% auto 0;
    }

    .vision__contents {
        padding: 0 7%;
    }
} /* VISION SP 480px */

/*========= BUSINESS ===============*/
#business {
    position: relative;
}

.business__list {
    display: flex;
    width: 53%;
    position: absolute;
    top: 7%;
    right: 0;
    z-index: 1;
}

.business__item {
    position: relative;
}

.business__item .btn {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 264px;
    z-index: 2;
}

.mask {
    display: block;
    line-height: 0;
    overflow: hidden;
}

.zoomIn img {
    transform: scale(1);
    transition: .3s ease-in-out;
    border: 2mm ridge var(--font-white);
}

.zoomIn a:hover img {
    transform: scale(1.2);
}

/* BG EXTEND */
.inner {
    width: 85%;
    z-index: 1;
    background: var(--font-white);
    padding: 6% 0 6% 13%;
    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);
    } 
}

#business .topic,
.business__topic,
#recruit .topic,
.recruit__topic {
    color: var(--main-blue);
    max-width: 347px;
}

.business__content,
.recruit__content {
    color: var(--font-black);
}

/* BUSINESS SP */
@media (max-width: 1200px) {
    .inner {
        padding: 6% 0 6% 9%;
    }

    .business__item .btn {
        max-width: 208px;
        height: 52px;
        line-height: 50px;
    }

} /* BUSINESS SP 1200px */

@media (max-width: 960px) {
    .business__topic {
        margin: 0 auto;
    }

    #business h4 {
        margin: 2em 0 0;
    }

    .business__list {
        position: static;
        width: 75%;
        margin: -3rem 0 0 auto;
        z-index: 2;
    }

} /* BUSINESS SP 960px */

@media (max-width: 680px) {
    .business__list {
        width: 90%;
    }

    .business__item .btn {
        max-width: 172px;
        height: 44px;
        line-height: 42px;
        font-size: 1.2rem;
    }

} /* BUSINESS SP 680px */

@media (max-width: 480px) {
    .inner {
        width: 95%;
    }

    #business .topic,
    .business__topic {
        max-width: 280px;
    }

    .business__list {
        margin: -1rem 0 0 auto;
    }

    .business__item .btn {
        max-width: 112px;
        height: 36px;
        line-height: 34px;
        font-size: 1rem;
    }

} /* BUSINESS SP 480px */

@media (max-width: 375px) {
    #business .topic,
    .business__topic {
        max-width: 220px;
    }

    .business__list {
        width: 95%;
    }

} /* BUSINESS SP 375px */

/*========= SLIDER ===============*/
.section--slider {
    margin: 0;
}

.slider img {
    width:100%;
    height:auto;
}

/*========= RECRUIT ===============*/
.section--recruit .inner {
    margin-left: auto; 
    margin-right: 0;
    padding: 6% 0 4% 30%;
}

#recruit .title {
    max-width: initial;
}

/* RECRUIT SP */
@media (max-width: 960px) {
    .recruit__topic {
        max-width: 304px;
    }
} /* RECRUIT SP 960px */

@media (max-width: 768px) {
    .recruit__topic {
        max-width: 274px;
    }
} /* RECRUIT SP 768px */

@media (max-width: 480px) {
    .section--recruit .inner {
        padding: 6% 0 4% 22%;
    }

    .recruit__topic {
        max-width: 244px;
    }
} /* RECRUIT SP 480px */

@media (max-width: 375px) {
    .section--recruit .inner {
        padding: 6% 0 4% 14%;
    }

} /* RECRUIT SP 375px */

/*========= FOOTER ===============*/
.footer {
    color: var(--font-white);
}
.footer__list {
    border-top: 1px solid rgba(var(--font-white-rgb), 0.5);
}

.footer__nav02 li {
    border-left: 1px solid rgba(var(--font-white-rgb), 0.5);
}

/* FOOTER SP */
@media (max-width: 952px) {
    .footer__list {
        border-top: none;
    }

    .footer__nav02 li:first-child {
        border-left: 1px solid rgba(var(--font-white-rgb), 0.5);
    }
} /* FOOTER SP 952px */

@media (max-width: 480px) {
    .footer__nav {
        border-bottom: 1px solid rgba(var(--font-white-rgb), 0.5);
    }

    .footer__nav02 li,.footer__nav02 li:first-child {
        border-left: none;
    }
} /* FOOTER SP 480px */