@charset "UTF-8";

.icon {
    position: relative;
    display: inline-block;
}

.icon::before,
.icon::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow-down::before {
    top: -24px;
    left: -24px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);

    transition: transform 0.2s ease;
}
.mainMenuItem.hover .arrow-down::before {
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
}
.mainMenuItem.open .arrow-down::before {
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(225deg);
}

.scroll-arrow-area {
    margin-left: -32px;
    text-align: center;
    height: 1px;
    cursor: pointer;
}

.scroll-arrow-top::before{
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4c4c4c;
    opacity: 0.5;
}
.scroll-arrow-top::after{
    top: 6px;
    left: 9px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-moz-document url-prefix() {
    .scroll-arrow-top::after {
        top: 4px;
    }
}

.scroll-arrow-bottom::before{
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4c4c4c;
    opacity: 0.5;
}
.scroll-arrow-bottom::after{
    bottom: 6px;
    left: 9px;
    width: 12px;
    height: 12px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-moz-document url-prefix() {
    .scroll-arrow-bottom::before {
        margin-top: -32px;
    }
    .scroll-arrow-bottom::after {
        margin-top: -26px;
    }
}