@charset "UTF-8";

main {
    width: 100%;
    margin: 0 auto 0;
    padding: 110px 0 0;
    position: relative;

    video{
        height: 700px;
        width: 100%;
        object-fit: cover;
    }

    .text{
        max-width: 660px;
        width: 80%;
        position: absolute;
        top: 45%;
        left: 10%;
        z-index: 1;

        img{
            display: block;
            width: 90%;

            &:nth-child(1){
                margin: 0 auto 10px 0;
            }
            &:nth-child(2){
                margin: 0 0 0 auto;
            }
        }
    }

    #topics {
        background: var(--colorW);
        border: 2px solid var(--color01);
        box-sizing: border-box;
        box-shadow: 5px 5px 10px 0 #666;
        width: 60%;
        /* min-height: 185px; */
        padding: 20px 30px;
        position: absolute;
        bottom: -90px;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 2;

        .titleset{
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin: 0 0 10px;

            h2{
                color: var(--color01);
                font-weight: 500;
            }

            a{
                color: var(--colorR);
                padding: 0 20px 0 0;
                position: relative;

                &:after{
                    content:"";
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-top: 5px solid transparent;
                    border-bottom: 5px solid transparent;
                    border-left: 10px solid var(--colorR);
                    border-right: 0;
                    position: absolute;
                    top:56%;
                    right: 0;
                    transform: translate(0,-50%);
                }
            }
        }

        ul{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin: 2% auto;

            li.up_ymd{
                width: 15%;
                padding: 0 0 10px;
            }
            li.title{
                display: flex;
                align-items: center;
                flex-grow: 1;
                padding: 0 0 10px;
                border-bottom: 1px solid var(--colorL);
                position: relative;

                span{
                    border: 1px solid var(--colorL);
                    font-size: var(--font-mini);
                    height: fit-content;
                    margin: 0 10px 0 0;
                    padding: 0 10px;

                    &.newMark{
                        border: none;
                        background: var(--colorR);
                        color:#fff;
                    }
                }

                &:after{
                    content:"";
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-top: 5px solid transparent;
                    border-bottom: 5px solid transparent;
                    border-left: 10px solid var(--color01);
                    border-right: 0;
                    position: absolute;
                    top:50%;
                    right: 0;
                    opacity: 0;
                    transform: translate(0,-50%);
                    transition: all ease 0.5s;
                }

                &:hover{
                    color: var(--color01);
                }
                &:hover:after{
                    opacity: 1;
                }
            }
        }
    }
}

section{
    width: 100%;
    margin: 0 auto 0;
    padding: 0;

    .inner{
        max-width: var(--width01);
        width: 95%;
        margin: 0 auto;
        padding: 0;

        .titleset{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin: 0 0 20px;

            h2{
                font-size: 27px; 
                font-weight: 600;
                line-height: 1.4em;
                width: 100%;
                margin: 0 0 20px;
                padding: 0 0 15px 0;
            }

            h3{
                font-size: var(--font24-30);
                width: 27%;

                a{
                    color: var(--colorR);
                    font-size: var(--font-normal);
                    font-weight: 400;
                    margin: 0 0 0 20px;
                    padding: 0 20px 0 0;
                    position: relative;

                    &:after{
                        content:"";
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 10px solid var(--colorR);
                        border-right: 0;
                        position: absolute;
                        top:50%;
                        right: 0;
                        transform: translate(0,-50%);
                    }
                }
            }

            p{
                width: 73%;
                padding: 0 20px 0 0;
            }
        }
    }
    
}

#content01{
    background: url(/images/top/content01_bg.png);
    background-size: cover;
    background-position: top center;
    width: 100%;
    margin: 0 auto;
    padding: 12% 0;

    #service {
        margin: 0 auto 5%;

        .titleset{
            h2{
                color: var(--color03);
                border-bottom: 4px solid var(--color03);
            }
            h3{
                color: var(--color03);
                display: flex;
                align-items: baseline;
            }
        }
    }

    #merit {
        .titleset{
            h2{
                color: var(--color01);
                border-bottom: 4px solid var(--color01);
                line-height: 1.4em;
            }
        }
    }

    #merit .part{
        display: flex;
        flex-wrap: wrap;

        .partBox{
            width: 48%;
            margin: 0 1% 2%;
            position: relative;
            box-shadow: 5px 5px 10px 0 #ccc;

            dl{
                background: var(--clear01);
                /* line-height: 1.4em; */
                width: 70%;
                position: absolute;
                top: 3%;
                left: 2%;

                dt{
                    background: var(--clear02);
                    color: var(--colorW);
                    width: 100%;
                    padding: 3% 4%;
                }
                dd{
                    width: 100%;
                    padding: 3% 4%;
                }
            }
        }
    }
}

#content02{
    background: url(/images/top/content02_bg.png);
    background-size: cover;
    background-position: top center;
    width: 100%;
    margin: 0 auto;
    padding: 5% 0;

    #access{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        
        .titleset{
            color: var(--colorW);
            width: 45%;
            padding: 0 5% 0 0;

            h2{
                border-bottom :4px solid var(--colorW);
            }

            h3 {
                display: flex;
                align-items: baseline;
                margin: 0 0 20px;
                a{
                    color: var(--colorW);
                    width: 100%;

                    &:after{
                        border-left: 10px solid var(--colorW);
                    }
                }
            }
            p{
                width: 100%;
            }
        }
        .part{
            width: 55%;

            .part_card{
                background: var(--colorW);
                display: flex;
                margin: 0 0 4%;

                figure{
                    width: 30%;
                    overflow: hidden;

                    img{
                        height: 100%;
                        object-fit: cover;
                    }
                }

                dl{
                    box-sizing: border-box;
                    width: 70%;
                    padding: 6% 5%;
                    
                    dt{
                        color: var(--color01);
                        margin: 0 0 20px;
                    }
                }
            }
        }
    }
}

#content03{
    background: url(/images/top/content03_bg.png);
    background-size: cover;
    background-position: top center;
    width: 100%;
    margin: 0 auto;
    padding: 5% 0;

    #company{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        
        .titleset{
            width: 45%;
            padding: 0 5% 0 0;

            h2{
                color: var(--color01);
                border-bottom :4px solid var(--color01);
            }
        }

        .list{
            width: 55%;

            a{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                max-width: 580px;
                margin: 0 0 5%;
                position: relative;
                left: 0;
                transition: all ease 0.5s;

                &:hover{
                    left:-20px;
                }

                img{
                    clip-path: circle(50% at 50% 50%);
                    width: 120px;
                    height: 120px;
                }

                h3{
                    color: var(--color02);
                    font-size: 48px;
                    padding: 0 0 0 30px;
                    width: calc(100% - 300px);
                }

                h4{
                    color: var(--color02);
                    font-size: 18px;
                    min-width: 180px;
                    padding: 0 0 0 30px;
                    position: relative;

                    &:after{
                        content:"";
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 10px solid var(--color02);
                        border-right: 0;
                        position: absolute;
                        top:52%;
                        right: 0;
                        transform: translate(0,-50%);
                    }
                }

                &:hover h3,&:hover h4{
                    color: var(--color01);
                }

                &:hover h4:after{
                    border-left: 10px solid var(--color01);
                }
            }
        }
    }
}
@media all and (min-width:769px) and (max-width:1029px){
#content03{
    #company{
        .titleset{
            width: 100%;
            padding: 0;
        }
        .list{
            width: 100%;
        }
    }
}
}

@media all and (max-width:768px){
    main{
        padding: 0 0 0;

        video{
            height: 480px;
        }

        #topics{
            width: 88%;
            max-height: 180px;
            overflow-y: scroll;
            padding: 20px 20px;

            ul{
                li.title{
                    width: 100%;
                }
            }
        }
    }
    section{
        .inner{
            width: 90%;

            .titleset{
                h3{
                    width: 100%;
                    margin: 0 0 20px;
                }
                p{
                    width: 100%;
                }
            }
        }
    }
    #content01{
        padding: 32% 0 5%;

        #merit {
            .part{
                .partBox{
                    width: 100%;
                    height: 170px;
                    overflow: hidden;
                    margin: 0 0 5%;

                    dl{
                        width: 83%;

                        dd{
                            padding: 5% 4%;
                            font-size: 0.8em;
                        }
                    }
                }
            }
        }
    }
    #content02{
        padding: 10% 0 5%;

        #access{
            .titleset{
                width: 100%;
                margin: 0 0 20px;
            }
            .part{
                width: 100%;
            }
        }
    }
    #content03{
        padding: 10% 0 0;
        #company{
            .titleset{
                width: 100%;
                margin: 0 0 20px;
            }
            .list{
                width: 95%;
                margin: 0 auto;

                a{
                    flex-wrap: unset;
                    justify-content: space-between;
                    width: 100%;

                    img{
                        width: 60px;
                        height: 60px;
                    }
                    h3{
                        font-size: 32px;
                        width: unset;
                        padding: 0 0 0 20px;
                    }
                    h4{
                        font-size: 12px;
                        min-width: 120px;
                        padding: 0 0 0 10px;
                    }
                }
            }
        }
    }
}
@media all and (max-width:400px){
    #content03{
        #company{
            .list{
                a{
                    img{
                        width: 40px;
                        height: 40px;
                    }
                    h3{
                        font-size: 27px;
                    }
                    h4{
                        min-width: unset;
                        width: 110px;
                    }
                }
            }
        }
    }
}
@media all and (min-width:481px) and (max-width:768px){
    #content03{
        #company{
            .list{
                a{
                    justify-content: unset;
                }
            }
        }
    }
}