@charset "UTF-8";

/* mv
---------------------------------------------------*/
#mv {
    position: relative;
    width: 100%;
    padding: 60px 0 100px;
}
#mv .inner {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#mv .inner .logo {
    width: 80%;
    margin: 0 auto;
}
#mv .inner .logo svg {
    fill: var(--main-color);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8));
}


/* < 768 */
@media screen and (max-width: 768px) {
    #mv {
        padding: 9.375vw 0 3.125vw;
    }
    #mv .inner {
        position: relative;
        display: block;
        height: 46.875vw;
    }
    #mv .inner .logo {
        position: relative;
        top: 0;
        left: 0;
        width: 62.5vw;
        z-index: 2;
    }
    #mv .inner .logo svg {
        transform: translate(0, 0);
        filter: drop-shadow(0 0 0.78125vw rgba(255, 255, 255, .8));
    }
    #mv .inner .shape {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 62.5vw;
        height: 46.875vw;
        border-radius: 7.8125vw;
        z-index: 1;
    }
}


/* tools
---------------------------------------------------*/
#tools {
    padding: 20px 0 60px;
}
#tools .tools-navi ul {
}
#tools .tools-navi ul li {
    width: 100%;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
#tools .tools-navi ul li:last-child {
    margin-bottom: 0;
}
#tools .tools-navi ul li .title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid var(--main-color);
    padding: 10px;
}
#tools .tools-navi ul li .title .icon {
    width: 40px;
    margin-right: 20px;
}
#tools .tools-navi ul li .title .icon svg {
    fill: var(--primary-color);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#tools .tools-navi ul li a:hover .title .icon svg {
    fill: var(--main-color);
}
#tools .tools-navi ul li .title .txt {
    font-size: var(--font-size-l);
    font-weight: 700;
}
#tools .tools-navi ul li .description {
    padding: 10px;
}
#tools .tools-navi ul li .description p {
    line-height: 1.8em;
}

/* < 768 */
@media screen and (max-width: 768px) {
    #tools {
        padding: 3.125vw 0 9.375vw;
    }
    #tools .tools-navi ul li {
        border-radius: 1.5625vw;
        padding: 1.5625vw;
        margin-bottom: 3.125vw;
    }
    #tools .tools-navi ul li .title {
        padding: 1.5625vw;
    }
    #tools .tools-navi ul li .title .icon {
        width: 6.25vw;
        margin-right: 3.125vw;
    }
    #tools .tools-navi ul li .description {
        padding: 1.5625vw;
    }
}