html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;

}
@font-face {
    font-family: 'Gyate-Luminescence';
    src: url("./Fonts/Gyate-Luminescence.ttf") format("TrueType");
}
@font-face {
    font-family: 'keifont';
    src: url("./Fonts/keifont.ttf") format("TrueType");
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url("./Fonts/NotoSansJP-VariableFont_wght.ttf") format("TrueType");
}
body{
    font-family :'Noto Sans JP';
}
.HiraiImgForm{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    background-color: #828282;
}
.HiraiFontMain{
    position: absolute;
    width: 75%;
    z-index: 3400;
    margin: 0;

}
.HiraiImG1{
    position: relative;
    width: 100%;
    margin: 0;
    object-fit: cover;
    z-index: 3000;
}
.ProfiletleForm{
    display: flex;
    background-color: #828282;
    justify-content: center;
    align-items: center;
    height: 6.1%;
    border: 1px solid;
}

.bar{
    
    justify-content: right;
    display: flex;
    position: fixed;
    background-color: white;
    writing-mode: vertical-rl;
    text-align: right;
    right:0;
    top: 0;
    font-family: "keifont";
    height: 100%;
    z-index: 1000;
    text-align: center;

    border: solid 2px;
}

.BorderTexts{
    font-family: bold;
    font-size: 24px;
    padding-right: 3%;
    padding-top: 3.4%;
    padding-bottom: 3.4%;
    text-align: center;
    margin: 0;
    font-family: "keifont";
    color: black;
    border-bottom: solid 2px;
    text-decoration: none;
    
    
}
.Border{
    justify-items: center;
    align-items: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    height: 35%;
    padding: 2.4%;
    padding-bottom: 10%;

}
.BorderImgX{
    display: none;
}
.HiraiName2{
    margin: 0;
    font-size: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 5px;
    border: solid 1px black;
    font-weight: bold;
    
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
    width: 164px;
    background-color: #FEEB00;
    text-shadow:1px 1px 0 black, -1px -1px 0 black,
              -1px 1px 0 black, 1px -1px 0 black,
              0px 1px 0 black,  0 -1px 0 black,
              -1px 0 0 black, 1px 0 0 black;

}


.WorksTitleForm{
    display: flex;
    background-color: #828282;
    justify-content: center;
    align-items: center;
    height: 6.1%;
    border: 1px solid;
}
.EventsTitleForm{
    display: flex;
    background-color: #828282;
    justify-content: center;
    align-items: center;
    height: 6.1%;
    border: 1px solid;
}

.PlpfileTitle{
    font-family: "keifont";
    color: white;
    text-align: center;
    background-color: #828282;
    font-size: 36px;

}
.ProfileForm{
    background-color: #E1E1E1;
    border: 1px solid;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.HiraiPlofileArea{
    background-color: #E1E1E1;
    margin-top: 64px;
    margin-left: 80px;
}
.HiraiName{
    margin: 0;
    display: block;
    margin-bottom: 21px;
    font-size: 36px;
    -webkit-text-stroke:1px black;
    background:linear-gradient(transparent 70%,#FEEB00 30%,#FEEB00 100%);
    width: 153px;
}
.borderYellow{
    background:linear-gradient(transparent 60%,#FEEB00 40%,#FEEB00 100%);
}
.Title{
    font-weight: bold;
    font-size: 24px;
    width: 252px;
    height: 48px;
}
.Day{
    font-weight: bold;
}
.Text{
    width: 704px;
    margin: 0;
    margin-bottom: 1.6%;
    font-size: 16px;
    font-weight: light;
    line-height: 24px;
    white-space: pre-line;
}
.SkillArea{
    margin: 0;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    background-color: white;
    box-shadow: 6px 7px #919191;
    width: 290px;
    height: 75px;
}
.SkillTitle{
    margin: 0;
    margin-top: 7px;
    margin-left: 11px;
    font-family: "keifont";
    font-size: 32px;
    color: #ADADAD;
    
}
.ImgBackSkill{
    display: flex;
    flex-direction: row; 
}
.SkillImg{
    width: 55px;
    height: 55px;
}
.NameImgX{
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
}
.TeamName{
    margin: 0;
    display: flex;
    font-size: 16px;
    font-family: "Noto Sans JP";
    font-weight: medium;
}
.eMaleName{
    margin: 0;
    margin-bottom: 64px;
    display: flex;
    font-size: 16px;
    font-family: "Noto Sans JP";
    font-weight: medium;
}
.iconImg{
    margin: 0;
    display: block;
    margin-right: 9px;
    margin-top: 4px;
    width: 19px;
    height: 19px;
    align-items: center;

}
.WorksTittle{
    font-family: "keifont";
    color: white;
    background-color: #828282;
    font-size: 36px;
}

.WorksForm{

    justify-content: left;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    background-color: #E1E1E1;
}
.HiraiImgArea2{
    display: flex;
    width: 50%;
    margin: 0;
    right: 0;
    margin-right: 72px;

}
.HiraiImgSize2{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.WorksClass {
    position: relative;
    padding-right: 8%;
    padding-left: 8%;
    padding-top: 2.7%;
    padding-bottom: 2.7%;
    justify-content: center;
    border-left: 1px solid black;
    border-right: none;
    display: block;
    box-sizing: border-box;
}

.WorksClass::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 1px;
    background-color: black;
}

.WorksImg{

    width: 252px;
    height: 252px;
    object-fit: cover;
    margin: 0;
}

.SeeMoreBtn{

    color: white;
    font-size: 24px;
    height: 8.1%;
    width: 252px;
    background-color: #828282;
    border-radius: 3.15px;

}
.SeeMoreBtn:hover {
    color: white;
    background-color: #FEEB00;
    text-shadow:1px 1px 0 black, -1px -1px 0 black,
              -1px 1px 0 black, 1px -1px 0 black,
              0px 1px 0 black,  0-1px 0 black,
              -1px 0 0 black, 1px 0 0 black;
}
.seeBar{
    display: none;
}
.EventsTittle{

    background-color: #828282;
    font-family: "keifont";
    color: white;
    font-size: 36px;
    
}
.EventsForm{
    background-color: #E1E1E1;
    display: flex;
}
.HiraiImgForm2{
    display: flex;
    background-color: #E1E1E1;
}
.HiraiImG5{
    display: flex;
    margin: 0;
    margin-top: 64px;
    margin-left: 121px;
    margin-right: 114px;
    margin-bottom: 40px;
    width: 440px;
    height: 440px;
    object-fit: cover;
    border: 1px solid black;
}
.YearForm{
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    margin-left: 27px;
    margin-bottom: 57px;
    
    
    
}
.YearClass{
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.Year{
    display: flex;
    flex-direction: row;
    margin: 0;
    margin-top: 40px;
    margin-right: 40px;

    font-size: 24px;
    font-family: "keifont";
    
}
.Events{
    display: flex;
    flex-direction: column;
    
}
.EventsArea{
    display: flex;

    flex-direction: row;
    margin-top: 40px;
    
}
.EventsDay{
    margin: 0;
    margin-left: 3.6%;
    display: flex;
    inline-size: 60px;

}
.EventsName{
    margin: 0;
    margin-left: 4.8%;

    inline-size: 364px;
    overflow-wrap: break-word;

}
.NiceBorder{
    background:linear-gradient(transparent 60%,#FEEB00 40%,#FEEB00 100%);
}
@media screen and (max-width: 1040px) {
    .HiraiImG5{
        display: none;
    }
    .HiraiFontMain{
        position: absolute;
        width: 75%;
        z-index: 3500;
        margin: 0;    
    }
}

@media screen and (max-width: 430px) {
    html, body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .BorderTexts{
        display: none;
    }
    .Border{
        padding: 0;
        padding-right: 11.5px;
        height: 100%;
        font-size: 16px;
    }
    .BorderImgX{
        display: flex;
        padding: 4px;
        width: 40px;
    }
    .HiraiImgForm2{
        display: none;
    }
    .HiraiImG1{
        height: 844px;
    }
    .HiraiName2{
        margin: 0;
        font-size: 16px;
        text-align: center;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 3px;
        padding-left: 3px;
    
    }
    .HiraiImG5{
        display: none;
    }
    .ProfiletleForm{
        padding-right: 48px;
    }
    .ProfileForm{
        flex-direction: column;
    }
    .PlpfileTitle{
        font-size: 20px;
    
    }

    .Text{
        width: 294px;

    }
    .WorksTitleForm{
        padding-right: 48px;
    }
    .HiraiFontMain{
        margin: 0;    
    }
    .HiraiImgArea2{
        margin: 0;
        margin-left: 24px;
        width: 226px;
        height: 285px;
    }
    .WorksTittle{
        font-size: 20px;
    }
    .EventsTitleForm{
        padding-right: 48px;
    }
    .EventsTittle{
        font-size: 20px;
    }
    .HiraiPlofileArea{
        margin-top: 24px;
        margin-left: 24px;
    }
    .WorksClass {
        width: 170px;
        height: 170px;
        padding: 0;
    }
    .WorksImg{
        position: relative;
        width: 170px;
        height: 170px;
    }
    .Title{
        display: none;
    }
    .Day{
        display: none;
    }

    .SeeMoreBtn {
        display: none;
        text-decoration: none;
    }
    .SeeBarColum{
        display: flex;
        flex-direction: row;
        width: 153px;
        background-color: white;

    }
    .seeBar{
        margin: 0;
        bottom: 11px;
        left: 10px;
        display: flex;
        position: absolute;
        width: 153px;
        background-color: white;
        color: black;
        text-decoration: none;
        font-weight: bold;
        
    }
    .iconSize{
        margin: 0;
        display: flex;
        width: 19px;
        height: 19px;
        margin-top: 3px;
        margin-left: auto;
        margin-right: 6px;

       
    }
    .Text{
        
        width: 294px;
    }
    .YearForm{
        margin: 0;
        width: 75%;
        margin-left: 6%;
        margin-top: 4.5%;
        display: flex;
        flex-direction: column;
        margin-left: 27px;
        margin-bottom: 57px;
            
            

    }
    .Year{
        margin: 0;
        font-size: 24px;
        font-family: "keifont";
        flex: 0;
    }
    .EventsDay{
        margin: 0;
        display: flex;
        flex-direction: row;
    
    }
    .EventsName{
    
    
        inline-size: 219px;
        overflow-wrap: break-word;
    
    }
}
@media screen and (max-height: 430px){
    .BorderTexts{
        font-family: bold;
        font-size: 12px;
        padding-right: 3%;
        padding-top: 3.4%;
        padding-bottom: 3.4%;
        text-align: center;
        margin: 0;
        font-family: "keifont";
        color: black;
        border-bottom: solid 2px;
        text-decoration: none;
        
        
    }
    .Border{
        justify-items: center;
        align-items: center;
        font-family: "Noto Sans JP";
        font-size: 6px;
        height: 35%;
        padding: 2.4%;
        padding-bottom: 10%;
    
    }
    .BorderImgX{
        display: none;
    }
    .HiraiName2{
        margin: 0;
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 5px;
        padding-left: 5px;
        border-radius: 5px;
        border: solid 1px black;
        font-weight: bold;
        
        font-optical-sizing: auto;
        font-style: normal;
        color: white;
        width: 164px;
        background-color: #FEEB00;
        text-shadow:1px 1px 0 black, -1px -1px 0 black,
                  -1px 1px 0 black, 1px -1px 0 black,
                  0px 1px 0 black,  0-1px 0 black,
                  -1px 0 0 black, 1px 0 0 black;
    
    }
    .HiraiFontMain{
        margin: 0;    
    }
    .Text{
        width: 500px;

    }
}