@media (max-width: 768px) {
    html {
        font-size: calc(100vw * 16 / 768);
/*        font-size: 12px;*/
    }
}

@media (min-width: 768px) {
    html {

        font-size: 100%;
    }
}

*, *:before, *:after, *:hover {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    max-width: 720px;
    margin: 0;
    margin: 0 auto;
    padding: 0px;
    background-color: rgb(223, 225, 226);
    color: rgba(60, 60, 60);
    font-family: Arial, Helvetica,hirakakupro-w3,Osaka,"ms pgothic", sans-serif;
}

.base{
    position: relative;
/*    margin: 0 10px;*/
    background-color: rgb(236, 236, 236);
    text-align: center;
    box-shadow: 0 0 5px rgb(175, 175, 175);

    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;


/*    background-color: #DCE9F0;*/
}


.field{
    /*display: flex;*/
}


.ul-square{
    text-align: left;
}


.header-border{
    /*background: url('img/menubar01.gif');*/
    max-width: 300px;
    border-bottom: 1px solid;
    padding-bottom: 8px;
    padding-left: 10px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
}

.infomation{
    padding: 10px;
}

.content{
    text-align: left;
    padding: 10px;
}

ul{
    padding-left: 10px;
}

li{
    padding-top: 5px;
    list-style-position: inside;
}



table{
    border: 1px solid rgb(155, 155, 155); 
}

.header{
    position: relative;
    box-shadow: 0 0 5px rgb(175, 175, 175);
}

.header-background{
    width: 100%;
}

.GlobalHeader{
    /*display: inline-block;
    text-align: left;
    width: 100%;
    margin-bottom: 0px;
    background-color: #DCE9F0;*/
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0px;
    background-color: #DCE9F0;
}

.GlobalHeader .left-group{
    display: flex;
    gap: 10px;
}


.GlobalHeader .logo{
    height: 64px;
    margin: 10px;
}

.GlobalHeader .name{
    height: 64px;
    margin: 10px;
}

.GlobalHeader .ProfileButton{
    height: 32px;
}

.GlobalFooter{
    box-shadow: 0 0 5px gray;
    background: linear-gradient(#DCE9F0, rgb(177, 202, 216));
    text-align: center;
}

.FooterCopyrigt{
    text-align: center;
}


.ProfileButton {
    position: absolute;
    /*    width: fit-content;*/
    width: 8rem;
    height: 3rem;
/*    margin-right: 10px;*/
/*        margin: 10px;*/
    top: 50%;
    /*    bottom: 0%;*/
    /*    right: 100%;*/
    left: 100%;
    transform: translate(-110%, -50%);
}

.ProfileButtonDesign {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(230, 230, 230, 0.8);
    color: rgba(30, 30, 30);
    font-weight: bolder;
    padding: 0 0.25rem;
    text-decoration: none;
    border-radius: 1rem;
/*    box-shadow: #6282bd 1px 1px;*/
    font-size: 1em;
}

.ProfileButtonDesign:hover {
    
/*    color: #6282bd;*/
/*    background-color: #f0fff0;*/
}

.ImgBack {
    display: inline-flex;
    justify-content: center;

/*    text-align: center;*/
/*    background-color: #DCE9F0;*/
    width: fit-content;
    height: fit-content;
    padding: 0.5rem;
/*    margin: 0.5rem;*/
/*    border-radius: 50%;*/
}