.static-first {
    position: relative;
    &--grey {
        background-color: $micBackGrey;
    }
    &--area {
        @extend .static-first;
    }

    &__wrapper {
        position: relative;
        z-index: 10;
        overflow: hidden;
        background-color: white;
    }
    &__visual {
        height: 220px;
        overflow: hidden;
        width: 100%;
        background-size: cover;
        background-position: center;
    }
    &__info {
        width: 632px;
        background-color: white;
        margin: -100px auto 0 auto;
        padding: 50px 0 0 0;
        position: relative;
        .static-first--area & {
            background-color: $micOrange;
            width: 700px;
        }
    }
    &__title {
        font-size: 28px;
        color: $micOrange;
        text-align: center;
        margin: 0;
        & span {
            font-size: 56px;
            color: $micOrange;
            margin: 0 0 0 10px;
        }
        .static-first--area & {
            color: white;
            font-size: 37px;
            position: relative;
            z-index: 10;
        }
    }
    &__JP {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        margin: 10px 0 30px 0;
        .static-first--area & {
            margin: 10px 0 0 0;
            position: relative;
            z-index: 10;
            padding: 0 0 30px 0;
            color: white;
            font-size: 20px;
            & span {
                font-size: 30px;
                color: white;
                margin: 0 3px;
            }
        }
    }
    &__line {
        width: 62px;
        background-color: $micOrange;
        height: 3px;
        margin: 0 auto;
    }
    &__line1 {
        position: absolute;
        transform: rotate(-45deg);
        top: 50px;
        width: 350px; 
        height: 55px;
        left: 0;
        &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: $micDeepOrange;  
            opacity: 0.3;
        }
        &::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: $micSoftOrange;
            top: 40px;
            left: -60px;
            opacity: 0.3;
        }
    }
    &__line2 {
       @extend .static-first__line1;
       right: 80px;
       top: 70px;
       left: auto;
       &::after {
        right: -60px;
        left: auto;
        top: 70px;
       } 
    }
    &__text {
        text-align: center;
        margin: 50px 0 0 0;
        font-weight: bold;
        line-height: 1.5em;
        white-space: pre-line;
        .static-first--area & {
            margin: 0 auto 30px auto;
            padding: 10px 0 30px 0;
            width: 700px;
            box-shadow: 0 0 5px 3px $micBackGrey;
        }
    }
}
