@import url('variables.css');

#concept h2 {
    padding-top: 12rem;
}

#concept h2,
#company h2 {
    margin-bottom: 4rem;
}

#services h2 {
    margin-bottom: 7rem;
}

#services,
#company {
    padding-inline: var(--width-sm);
}

#hero video {
    top: 0;
    left: 0;
    height: 85vh;
    z-index: -1;
}

#hero>div {
    top: 73%;
    padding-left: var(--width-md);
    z-index: -1;
    line-height: 1.2em;
}

#hero span {
    font-size: clamp(2rem, 2vw, 3rem);
    font-weight: 500;
    margin-bottom: .5em;
}

#hero-space {
    height: 85vh;
}

#concept p,
#catch p {
    font-size: clamp(1.2rem, 1.5vw, 1.6rem);
}

#concept div div span,
#catch span {
    margin-bottom: .5em;
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: 500;
}

#hero p, #catch span, #catch p {
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

#services ul {
    flex-wrap: wrap;
    row-gap: 6rem;
    max-width: var(--max-width-md);
}

figure div {
    overflow: hidden;
}

#services li {
    width: 30%;
    overflow: hidden;
}

figure img {
    transition: all var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  figure:hover img {
    transform: scale(1.05);
  }
}

figcaption {
    padding-top: .5em;
}

#catch {
    position: relative;
}

#catch>div {
    position: absolute;
}

#catch video {
    height: 40rem;
}

dl {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--max-width-sm);
}

dt,
dd {
    padding: 3rem 1.5em;
    border-bottom: 1px solid var(--line-color);
}

dt {
    width: 30%;
    padding-left: 1em;
    color: var(--sub-color);
}

dd {
    padding-left: 2rem;
}

#company dd {
    width: 70%;
}

.slider::after {
    background-image: url(/assets/img/slider/slider_01.png);
}

@media screen and (max-width:992px) {
    #hero>div,
    section:not(#hero, #catch),
    #catch>div {
        padding-inline: var(--width-sp);
    }

    #services li {
        width: 47%;
    }

    #home h2 {
        padding-top: 6rem;
        margin-bottom: 0;
    }

    #concept h2 {
        margin-bottom: 2rem;
    }

    #services h2 {
        margin-bottom: 4rem;
    }

    #catch video {
        height: 30rem;
    }

    dt,
    dd {
        padding: 1.5em 0;
        line-height: 1.5em;
    }

    dd {
        padding-left: 1rem;
    }
}