body{
    font-family: serif;
    background-color: black;
    overflow-x: hidden;
}
body hr{
    height: 0px;
    border: none;
    border-top: 1px solid;
    color: rgb(130, 130, 130);
}
@keyframes select_pass1{
    from{
        background-color: rgb(0, 0, 0);
        transform: scale(1.00) translateY(0px);;
        
    }
    to{
        background-color: rgb(44, 44, 44);
        transform: scale(1.06) translateY(0px);
        /* box-shadow: 
            0 0 1rem 0.5rem rgb(44, 44, 44)
        ; */
        border-top:rgb(199, 0, 249);
    }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 768px){
    #main{
        position: static;
        display: flex;
    }
    .main_page{
        width: 100%;
        border-top:1px solid rgb(146, 146, 146);
        padding: 0px 2px;
        color: white;
    }
    .side_menue{
        width: 20rem;
        border-top:1px solid rgb(146, 146, 146);
    }
    .menue_page {
        background-color: rgba(0, 0, 0, 0.853);
        padding: 0.3rem 0.3rem ;
        border-top:1px solid rgb(146, 146, 146);
        width: 100%;
        display: flex;
    }
}
@media (max-width: 768px){

    #main{
        position: static;
        display: block;
    }
    .main_page{
        width: 100%;
        border-top:1px solid rgb(146, 146, 146);
        color: white;
    }
    .side_menue{
        width: 100%;
        border-top:1px solid rgb(146, 146, 146);
    }
    .menue_page {
        background-color: rgba(0, 0, 0, 0.853);
        padding: 0.2rem 0.2rem;
        border-top:1px solid rgb(146, 146, 146);
        width: 100%;
        display: flex;
    }
}

.main_page_nomal_format{
    margin-left: 0.8rem ;
    font-size: 1rem;
}
.main_page_nomal_format h1{
    font-size: 2rem;
}
.main_page_nomal_format h2{
    font-size: 1.5rem;
}

.space_6px{
    width: 0.5rem;
}
.menue_in_main{
    display: flex;
    height: 2rem;
}
.pass_a{
    text-decoration: none;
}
.pass_1{
    margin-right: 0.3rem;
    font-family: serif;
    border-top:1px solid rgb(146, 146, 146);
    background-color: rgb(0, 0, 0);
    width:10rem;
    height: 2rem;
    text-align: center;
}
.pass_1:hover{
    animation: select_pass1 0.3s forwards;
}
.pass_1_under_bar{
    color: white;
    /* box-shadow:
        0 0 1rem 0.5rem rgb(44, 44, 44)
    ; */
    background-color: rgb(44, 44, 44);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.1s ease, visibility 0.3s;
}
.pass_1:hover .pass_1_under_bar{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pass_1 h2{
    font-weight: 100;
    color: white;
    font-size:1.3rem;
    margin: 0;
    text-decoration: none;
}
.pass_a div{
    font-size: 0.9rem;
    color:white;
}
.flex_temp_format{
    display: flex;
}
.flex_temp_format div{
    padding: 0.2rem 0.5rem ;
}
.pass_a div:hover{
    background-color: rgb(75, 75, 75);
    color:rgb(146, 146, 146);
}
.profile_sidebar{
    color: white;
    font-family: unset;
    text-align: center;
}
.profile_cat_anko{
    width: 20rem;
    height: 20rem;
    margin: 0px auto;
}
.profile_cat_anko img{
    width: 100%;
    height: 100%;
    border-radius: 33%;
}
.shadow_head1{
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 0.6rem 2rem;
    font-family: unset;
    font-weight: 900;
    color:white;
    background-color: transparent;
    box-shadow: 
        0 0 1rem 0.5rem rgb(44, 44, 44)
    ;
    border-radius: 1rem;
}
.side_menue a{
    color:rgb(176, 176, 176);
    text-decoration: none;
    font-size: 1.2rem;
}
.footer{
    font-size: 0.7rem;
    color:rgb(76, 76, 76);
    text-align: center;
}
.footer a{
    text-decoration: none;
    color:rgb(76, 76, 76);
}
.btn_shadow_bw {
    padding: 0.3rem 2rem;
    background-color: black;
    color :white;
  border: none;
  border-radius: 1rem;
  font-size: 1.5rem;
  box-shadow: 0 0 1rem 0.5rem rgb(44, 44, 44);
  
  transition: 
    box-shadow 0.5s ease-out,
    transform 0.5s ease-out
  ; /* 0.5秒かけて変化させる */
}

.btn_shadow_bw:hover {
  transform:scale(1.1);
  box-shadow: none; /* hover時にシャドウを消す */
}
.heigt_space{
    margin: 5rem;

}