@charset "utf-8";


/* ----------------------------------------------------------------------
	mainimg
---------------------------------------------------------------------- */

.l-home-mainimg {
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.l-home-mainimg__cover {
    position: relative;
    width: 100%;
    height: 100%;
}

.l-home-mainimg__cover::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    display: block;
}

.l-home-mainimg__video {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.l-home-main-catch {
    position: absolute;
    top: 50%;
    right: auto;
    left: auto;
    transform: translateY(-50%);
    margin: 0 auto;
    max-width: 1410px;
}

.l-home-main-catch__txt {
    color: var(--color-white);
    font-family: var(--font-mincho);
    font-weight: normal;
    font-size: 5.2rem;
    line-height: 1.6;
    letter-spacing: .2em;
}

.l-home-main-scroll {
	position: absolute;
	right: 40px;
	bottom: 0;
}

.l-home-main-scroll a {
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
	padding-left: 16px;
	height: 140px;
	overflow: hidden;
	writing-mode: vertical-lr;
	vertical-align: bottom;
    display: inline-block;
}

.l-home-main-scroll a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 140px;
	background: #333;
}

.l-home-main-scroll a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 140px;
	background: #eee;
}

.l-home-main-scroll a::after { animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite; }

@keyframes sdl {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }
    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

@media screen and (max-width: 990px) {
    .l-home-main-scroll { right: 20px; }

    .l-home-main-scroll a { color: var(--color-white); }
    
    .l-home-main-catch { top: 48%; }
    .l-home-main-catch__txt { font-size: 6.4vw; }
}


/* ----------------------------------------------------------------------
	philosopy
---------------------------------------------------------------------- */

.l-home-philosopy {
    padding: 30px 25px 250px;
    margin: 0 auto;
    max-width: 1074px;
    display: flex;
    align-items: center;
}

.l-home-philosopy__inner { width: 370px; }

.l-home-philosopy__catch {
    font-size: 2.8rem;
    line-height: 1.5;
    margin: 0 0 0.6em;
}

.l-home-philosopy__txt { margin: 0 0 1.6em; }

.l-home-philosopy__txt p {
    line-height: 2em;
    margin: 0 0 0.8em;
}

.l-home-philosopy__txt p:last-child { margin: 0; }

.l-home-philosopy__ph {
    position: relative;
    width: 570px;
    height: 620px;
}

.l-home-philosopy__ph p {  position: absolute; }

 .l-home-philosopy__ph-01 {
    top: 90px;
    left: 0;
}

 .l-home-philosopy__ph-02 {
    top: 0;
    right: 0;
}

 .l-home-philosopy__ph-03 {
    top: 380px;
    left: 170px;
}

.l-home-philosopy__en {
    top: 68%;
    right: -80px;
    transform: translateY(-50%);
    color: var(--color-blue);
    font-size: 4rem;
    letter-spacing: .03em;
    line-height: 1;
    writing-mode: vertical-rl;
    width: 80px;
    height: 100%;
}

@media screen and (max-width: 1074px) {
    .l-home-philosopy__inner { width: 34.45vw; }
        
    .l-home-philosopy__ph {
        width: 53.07vw;
        height: 57.728vw;
    }
    
    .l-home-philosopy__ph-01 {
        top: 8.37vw;
        left: 0;
    }
    
    .l-home-philosopy__ph-01 img { width: 27.93vw; }

    .l-home-philosopy__ph-02 {
        top: 0;
        right: 0;
    }
    
    .l-home-philosopy__ph-02 img { width: 20.48vw; }

    .l-home-philosopy__ph-03 {
        top: 35.19vw;
        left: 15.82vw;
    }
    
    .l-home-philosopy__ph-03 img { width: 33.51vw; }

    .l-home-philosopy__en {
        right: -7.44vw;
        font-size: 3.72vw;
        width: 7.44vw;
    }
}

@media screen and (max-width: 990px) {
    .l-home-philosopy {
        padding: 16vw 0 26.66vw;
        display: block;
    }
    
    .l-home-philosopy__inner {
        text-align: center;
        width: 100%;
        margin: 0 0 60px;
    }
    
    .l-home-philosopy__catch { font-size: 2.4rem; }
    
    .l-home-philosopy__ph {
        margin: 0 6.66vw;
        width: 73.6vw;
        height: 80vw;
    }
    
    .l-home-philosopy__ph-01 {
        top: 12vw;
        left: 0;
    }
    
    .l-home-philosopy__ph-01 img { width: 38.66vw; }
    
    .l-home-philosopy__ph-02 img { width: 28.53vw; }
    
    .l-home-philosopy__ph-03 {
        top: 48.8vw;
        left: 22.1vw;
    }
    
    .l-home-philosopy__ph-03 img { width: 46.66vw; }
    
    .l-home-philosopy__en {
        right: -11vw;
        font-size: 5.33vw;
        width: 11vw;
    }
}


/* ----------------------------------------------------------------------
	business
---------------------------------------------------------------------- */

.l-home-businesses {
    position: relative;
    background: var(--color-white-gray);
    padding: 0 0 270px;
}

.l-home-businesses::before,
.l-home-businesses::after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
}

.l-home-businesses::before {
    top: -170px;
    background: var(--color-blue);
    width: calc(100vw - 210px);
    height: 170px;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.l-home-businesses::after {
    top: -200px;
    background: var(--color-white-gray);
    width: 100%;
    height: 211px;
    clip-path: polygon(0 200px, 100% 0, 100% 100%, 0 100%);
}

.l-home-businesses .page-ttl { margin: 0 0 140px; }

.l-home-businesses-section { margin: 0 0 140px; }

.l-home-businesses-section:last-child { margin-bottom: 0; }

.l-home-businesses-section-inner {
    position: relative;
    display: flex;
    margin: 0 auto;
    padding: 0 25px;
    max-width: 1074px;
}

.l-home-businesses-ttl {
    position: absolute;
    top: -40px;
    left: 25px;
    mix-blend-mode: multiply;
    font-size: 8rem;
    letter-spacing: 0.05em;
    line-height: 1;
    font-weight: bold;
}

.l-home-businesses-ph {
    flex: 0 1 64%;
    order: 2;
}

.l-home-businesses-box {
    flex: 0 1 36%;
    align-self: flex-end;
    order: 1;
    padding: 0 25px 0 0;
}

.l-home-businesses-box--center { align-self: center; }

.l-home-businesses-box__txt { margin: 0 0 2em; }

.l-home-businesses-box__ttl {
    font-size: 2.8rem;
    margin: 0 0 0.4em;
    text-align: left;
}

.l-home-businesses-section--reverse { position: relative; }

.l-home-businesses-section--reverse::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    background: var(--color-white);
    clip-path: polygon(0 200px, 100% 0, 100% calc(100% - 200px), 0 100%);
    width: 100%;
    height: 740px;
    display: block;
}

.l-home-businesses-section--reverse .l-home-businesses-ttl {
    top: -22px;
    left: 38.5%;
    writing-mode: vertical-rl;
}

.l-home-businesses-section--reverse .l-home-businesses-ph {
    flex: 0 1 58%;
    order: 1;
}

.l-home-businesses-section--reverse .l-home-businesses-box {
    flex: 0 1 42%;
    order: 2;
    padding: 0 0 0 48px;
}

.l-home-businesses-section--reverse .l-home-businesses-box__ttl,
.l-home-businesses-section--reverse .l-home-businesses-box__btn { text-align: right; }

@media screen and (max-width: 1074px) {
    .l-home-businesses-ttl { top: -3.72vw; }
    
    .l-home-businesses-section--reverse::before {
        top: -11.17vw;
        clip-path: polygon(0 18.62vw, 100% 0, 100% calc(100% - 18.62vw), 0 100%);
        height: 68.9vw;
    }
        
    .l-home-businesses-ttl { font-size: 7.44vw; }
}

@media screen and (max-width: 990px) {
    .l-home-businesses { padding: 5.33vw 0 26.66vw; }

    .l-home-businesses::before {
        top: -12vw;
        height: 12vw;
    }

    .l-home-businesses::after {
        top: -16vw;
        height: calc(16vw + 10px);
       clip-path: polygon(0 16vw, 100% 0, 100% 100%, 0 100%);
    }
    
    .l-home-businesses .page-ttl { margin: 0 0 80px; }

    .l-home-businesses-section { margin: 0 0 80px; }
    
    .l-home-businesses-section-inner {
        padding: 0;
        display: block;
    }
    
    .l-home-businesses-ttl,
    .l-home-businesses-section--reverse .l-home-businesses-ttl {
        position: absolute;
        top: -20px;
        left: inherit;
        right: 15px;
        font-size: 3.6rem;
    }
    
    .l-home-businesses-section--reverse .l-home-businesses-ttl {
        top: -12px;
        right: 12px;
    }
    
    .l-home-businesses-ph,
    .l-home-businesses-section--reverse .l-home-businesses-ph { margin: 0 25px 25px 0; }
    
    .l-home-businesses-ph img { width: 100%; }
    
    .l-home-businesses-box,
    .l-home-businesses-section--reverse .l-home-businesses-box { padding: 0; }
    
     .l-home-businesses-box__ttl,
     .l-home-businesses-section--reverse .l-home-businesses-box__ttl {
         font-size: 2rem;
         text-align: center;
         margin: 0 25px 0.6em;
     }
     
     .l-home-businesses-box__txt { margin: 0 25px 1.4em; }
     
     .l-home-businesses-box__btn,
     .l-home-businesses-section--reverse .l-home-businesses-box__btn { text-align: center; }
     
     .l-home-businesses-section--reverse::before {
        top: 50%;
        transform: translateY(-50%);
        clip-path: polygon(0 14.66vw, 100% 0, 100% calc(100% - 14.66vw), 0 100%);
        height: 136vw;
    }
}


/* ----------------------------------------------------------------------
	recruit
---------------------------------------------------------------------- */

.l-home-recruit {
    position: relative;
    background: var(--color-blue);
    padding: 0 0 30px;
}

.l-home-recruit::before,
.l-home-recruit::after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
}

.l-home-recruit::before {
    top: -170px;
    background: var(--color-white);
    width: calc(100vw - 210px);
    height: 170px;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.l-home-recruit::after {
    top: -200px;
    background: var(--color-blue);
    width: 100%;
    height: 210px;
    clip-path: polygon(0 calc(100% - 10px), 100% 0, 100% 100%, 0% 100%);
}

.home .l-content .l-home-recruit .page-ttl { color: var(--color-white); }

.l-home-recruit__inner {
    color: var(--color-white);
    padding: 0 25px;
    margin: 0 auto;
    max-width: 1150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-home-recruit__ph { max-width: calc(60% - 40px); }

.l-home-recruit__box { max-width: 40%; }

.l-home-recruit__catch {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 0 0 0.6em;
}

.l-home-recruit__txt {
    line-height: 1.8;
    margin: 0 0 1.6em;
}

@media screen and (max-width: 990px) {
    .l-home-recruit { padding: 5.33vw 0 8vw; }

    .l-home-recruit::before {
        top: -12vw;
        width: calc(100vw - 16vw);
        height: 12vw;
    }

    .l-home-recruit::after {
        top: calc(-16vw + 10px);
        height: 16vw;
    }
    
    .l-home-recruit__inner { display: block; }
    
    .l-home-recruit__ph {
        margin: 0 0 25px;
        max-width: inherit;
    }

    .l-home-recruit__ph img { width: 100%; }

    .l-home-recruit__box { max-width: inherit; }
    
    .l-home-recruit__catch {
        font-size: 2rem;
        text-align: center;
    }
    
    .l-home-recruit__btn { text-align: center; }
}