@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

img {
    vertical-align: bottom;
}


body {
    width: 100%;
    height:360vw;
    background-image: url(../images/background.png);
    background-size: 100% 100%;
    color: #303030;
}

    header {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12.5%;
        padding-top: 11%;
        /* background-color: #00f3ff; */
    }
            
        header img {
            width: 70%;
            margin-left: 7%;
        }

        header img:nth-of-type(1) {
            margin-bottom: 5%;
        }

        header img:nth-of-type(2) {
            width: 50%;
            margin-left: 44.5%;
        }

    main {
        margin-left: 12.5%;
    }

        main section {
            width: 85.6%;
        }

            main section h2 {
                margin-bottom: 0.9%;
                color: #f97e02;
                font-weight: 900;
                font-size: 4vw;

            }

            .section-parent {
                display: flex;
                height: 48.4vw;
                /* margin-bottom: 0.5%; */
                /* background-color: aqua; */
            }

                main section .section-parent img {
                    width: 50%;
                    vertical-align: bottom;
                }

                 .section-child {
                    width: 42%;
                    padding-top: 12%;
                    padding-left: 8%;
                    font-size: 1.5vw;
                    font-weight: 500;
                }

                     .name p:nth-of-type(2) {
                        line-height: 1;
                        margin-bottom: 16%;
                        font-size: 4vw;
                    }

                    .career {
                        line-height: 2;
                    }

                        .career p:nth-of-type(3) {
                            line-height: 1;
                            margin-left: 25.5%;
                            margin-bottom: 4%;
                        }

                        .career p:nth-of-type(4) {
                            margin-left: 30%;
                        }

                        .career p:nth-of-type(5) {
                            margin-left: 30%;
                            margin-bottom: 10%;
                        }

            .hobby1-flex {
                display: flex;
                height: 48.4vw;
                margin-bottom: 9.3%;
                font-size: 1.5vw;
                font-weight: 500;
                /* background-color: #00f3ff; */
            }

                .hobby1-flex div:nth-of-type(1) {
                    width: 34%;
                }

                    .photo img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .photo h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .photo p {
                        line-height: 1.7;
                        text-align: center;
                    }

                .hobby1-flex div:nth-of-type(2) {
                    width: 34%;
                }

                    .travel img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .travel h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .travel p {
                        line-height: 1.7;
                        text-align: center;
                    }

                .hobby1-flex div:nth-of-type(3) {
                    width: 34%;
                }

                    .puzzle img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .puzzle h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .puzzle p {
                        line-height: 1.7;
                        text-align: center;
                    }


            .hobby2-flex {
                display: flex;
                height: 48.4vw;
                margin-bottom: 0.9%;
                font-size: 1.5vw;
                font-weight: 500;
                /* background-color: aqua; */
            }

                .hobby2-flex div:nth-of-type(1) {
                    width: 34%;
                }

                    .comic img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .comic h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .comic p {
                        line-height: 1.7;
                        text-align: center;
                    }

                .hobby2-flex div:nth-of-type(2) {
                    width: 34%;

                }

                    .game img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .game h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .game p {
                        line-height: 1.7;
                        text-align: center;
                    }

                .hobby2-flex div:nth-of-type(3) {
                    width: 34%;
                }

                    .creation img {
                        display: block;
                        width: 100%;
                        height: 70%;
                        margin-bottom: 5%;
                    }

                    .creation h3 {
                        margin-bottom: 5%;
                        text-align: center;
                        font-size: 3vw;
                    }

                    .creation p {
                        line-height: 1.7;
                        text-align: center;
                    }
            

                .section-vision{
                    height: 54.5vw;
                    margin-bottom: 15%;
                    font-size: 2vw;
                    font-weight: 500;
                }

                    .goal {
                        text-align: center;
                        margin-top: 5%;
                        margin-bottom: 3%;
                        font-weight: 900;
                        font-size: 2.5vw;
                    }

                    .section-vision div {
                        line-height: 1.9;
                        margin-left: 10%;
                    }

                    .phase01 h3 {
                        color: #00f3ff;
                    }

                    .phase02 h3 {
                        color: #ff0000;
                    }

                    .phase03 h3 {
                        color: #00f00c;
                    }

                        .section-vision div p {
                            margin-left: 5%;
                        }

                        .andmore {
                            width: 17%;
                            margin-top: 4%;
                            margin-left: 83%;
                            color: #666666;
                            font-weight: 900;
                            font-size: 2vw;
                        }

                .section-mindset {
                    line-height: 2.5;
                    text-align: center;
                    margin-bottom: 11%;
                    font-size: 2.5vw;
                    font-weight: 500;
                    color: #fff;
                }
    
    footer p {
        text-align: center;
        font-weight: 900;
    }

        footer p:nth-of-type(1) {
            font-size: 4vw;
            color: #ff0000;
        }

        footer p:nth-of-type(2) {
            margin-top: 1%;
            margin-bottom: 4.5%;
            font-size: 2vw;
            color: #666666;
        }

        footer p small {
            font-size: 1.5vw;
            color: #00f00c;
        }