@charset "utf-8";

/** ヒーローエリア
---------------------------------------------------------*/
section#hero {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** 概要見出し
---------------------------------------------------------*/
section#overview {}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** 3つの価値
---------------------------------------------------------*/
section#value {
    padding-block: var(--m10);
    color: white;
    position: relative;
    z-index: 1;
}
section#value .wrap {
    padding-inline: 0;
}
section#value .block {
    margin-top: var(--m6);
    position: relative;
}
section#value .text {
    flex: 0;
    width: 65%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
section#value .block:nth-of-type(even) .text {
    left: auto;
    right: 0;
}
section#value .numbering {
    width: 175px;
    line-height: 1;
    position: relative;
    margin-left: calc(-1 * var(--m4));
}
section#value .block:nth-of-type(even) .numbering {
    margin-left: auto;
}
section#value .numbering span {
    display: block;
    width: 100%;
    padding-block: 0.5lh;
    padding-inline: 1em;
    background: var(--green);

    font-size: 10px;
    color: black;
    font-weight: 700;

    position: absolute;
    right: 0;
    bottom: 1.75lh;
    z-index: -1;
}
section#value .numbering .lato {
    text-align: right;
    font-size: 100px;
    color: #1c1c1c;
}
section#value .headline {
    padding-bottom: 0.3lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: var(--m5);
    position: relative;    
}
section#value .headline::after {
    display: block;
    width: 21px;
    height: 18px;
    background: url('../imgs/common/icon-list.svg') no-repeat center / contain;
    position: absolute;
    right: 0;
    bottom: 0;
    translate: 50% 50%;
    rotate: 180deg;
    filter: brightness(10);
}
section#value .block:nth-of-type(even) .headline {
    text-align: right;
}
section#value .block:nth-of-type(even) .headline::after {
    right: auto;
    left: 0;
    translate: -50% 50%;
    rotate: 0deg;
}
section#value ul {
    width: fit-content;
}
section#value .block:nth-of-type(even) ul {
    margin-left: auto;
}
section#value .image {
    flex: 0;
    width: 65%;
    filter: brightness(0.5);
}
section#value .block:nth-of-type(odd) .image {
    margin-left: auto;
}


@media screen and (min-width: 768px) {
    section#value .headline {
        font-size: calc(var(--headline-size) * 1.5);
    }

}
@media screen and (max-width: 767px) {
    section#value {
        padding-block: var(--m8) var(--m4);
    }
    section#value .wrap {
        padding-inline: var(--wrap-padding-inline);
    }
    section#value .block {
        display: flex;
        flex-flow: column-reverse wrap;
    }
    section#value .text {
        margin-top: calc(-1 * var(--m6));
        width: 100%;
        position: relative;
    }
    section#value .numbering {
        width: 50%;
        margin-left: calc(-1 * var(--wrap-padding-inline));
    }
    section#value .block:nth-of-type(even) .numbering {
        margin-right: calc(-1 * var(--wrap-padding-inline));
    }
    section#value .headline {
        margin-block: 0.5lh 1lh;
    }
    section#value .block:nth-of-type(even) .headline {
        text-align: left;
    }
    section#value .headline::after {
        display: none;
    }
    section#value .image {
        width: 100%;
        filter: brightness(0.8);
    }
}


/** 導入事例
---------------------------------------------------------*/
section#case-study {
    padding-block: var(--m10) calc(180 * var(--px));
    background: black;
    position: relative;
    z-index: 0;
}
section#case-study .container {
    margin-top: var(--m6); 
}
section#case-study .swiper-slide {
    padding-inline: var(--m2);
}
section#case-study .swiper-slide .headline {
    margin-block: 0.75lh 0.5lh;
}
section#case-study :is(p, dl, ul) + :is(p, dl, ul) {
    margin-top: 1lh;
}
section#case-study li + li {
    margin-top: 0.5lh;
}
section#case-study li::before {
    filter: invert(1);
}
section#case-study dd {
    display: inline-block;;
}
section#case-study dt {
    display: inline-block;
    font-size: var(--small-size);
    color: white;
    padding-inline: 0.5ic;
    background: var(--slate);
    border-radius: 3px;
    vertical-align: text-bottom;
}
section#case-study .background {
    max-width: 120%;
    position: absolute;
    left: 50%;
    top: 60%;
    translate: -50% -50%;
    z-index: -1;
    filter: drop-shadow(0 0 60px rgb(from var(--green) r g b / 0.4));
}

@media screen and (min-width: 768px) {
    section#case-study .swiper-slide .headline {
        font-size: calc(var(--headline-size) * 1.5);
    }
}
@media screen and (max-width: 767px) {
    section#case-study {
        padding-block: var(--m8);
    }

    section#case-study .background {
        max-width: 270%;
    }
}



/** 強み
---------------------------------------------------------*/
section#strength {
    margin-top: var(--m6);
    padding-block: var(--m10);
    color: white;
    position: relative;
    z-index: 1;
}
section#strength .wrap {}
section#strength .block {
    margin-top: var(--m8);
    display: flex;
    align-items: center;
    gap: var(--m4);
}
section#strength .block:nth-of-type(even) {
    flex-direction: row-reverse
}
section#strength .text {
    flex: 0 0 50%;
    position: relative;
}
section#strength .numbering {
    font-size: calc(250 * var(--px));
    color: #1c1c1c;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    translate: 25% -35%;
    z-index: -1;
}
section#strength .block:nth-of-type(even) .numbering {
    right: auto;
    left: 0;
    translate: -25% -35%;
}
section#strength .headline {
    font-size: calc(var(--headline-size) * 1.5);
    padding-bottom: 0.75lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.75lh;
}
section#strength .image {
    flex-shrink: 0;
    width: 61.66%;
    aspect-ratio: 7 / 5;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#strength {
        margin-top: var(--m4);
        padding-block: var(--m4);
    }
    section#strength .block {
        display: block;
        position: relative;
    }
    section#strength .image {
        width: 100%;
        position: absolute;
        right: calc(-1 * var(--wrap-padding-inline));
        top: calc(-1 * var(--m2));;
        z-index: -1;
        filter: brightness(0.3);
    }
}



/** ハードウェア
---------------------------------------------------------*/
section#hardware-provision {
    --accent-color: var(--emerald);
    --button-bg: var(--emerald);
    padding-block: var(--m10);
    color: white;
    position: relative;
}
.banners {
    position: relative;
}
.banners::after {
    display: block;
    width: calc(100% - var(--wrap-padding-inline) * 2);
    border-bottom: 1px solid white;
    position: absolute;
    left: var(--wrap-padding-inline);
    top: 0;
}
section#hardware-provision .container {
    margin-top: var(--m6);
}
section#hardware-provision .swiper-slide {
    padding-inline: var(--m);
}
section#hardware-provision .headline {
    font-size: calc(var(--headline-size) * 1.5);
    margin-block: 0.75lh 0.5lh;
}
section#hardware-provision .nav-contact {
    margin-top: var(--m8);
    margin-inline: auto;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#hardware-provision .swiper-slide {
        padding-inline: 0;
    }
    section#hardware-provision .nav-contact {
        width: auto;
        margin-inline: var(--wrap-padding-inline);
    }
}