header .title_logo{
    font-size: medium;
    margin-left: 40px;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
}

@media (max-width: 600px) {
    header .title_logo{
        font-size: 5px;
        margin-left: 5px;
        border-radius: 10px;
        padding: 13px;
    }
}

header .title{
    color: #000;
}

@media (max-width: 600px) {
    header .title{
        font-size: x-small;
    }
}

header .user_menu{
    text-align: center;
    width: auto;
    float: right;
    padding: 15px;
    margin-right: 10px;
}

@media (max-width: 600px) {
    header .user_menu{
        padding: 5px;
        margin-right: 1%;
        font-size: small;
        margin-top: 5px;
    }
}

body {
    background-color: #FFC489;
}
/* トップページのCSS */
.top_page_box{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    background-color: #F3F3F3;
    border-radius: 10px;
    color: black;
    padding-left: 2%;
    padding-right: 2%;
}

@media (max-width: 600px) {
    .top_page_box{
        width: 95%;
        font-size: small;
    }


}

.entrance_buttons{
    justify-content: center;
    display: flex;
}

@media (max-width: 600px){
    .entrance_buttons{
        display: contents;
    }

    .responsive_buttons_entrance{
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .responsive_entrance{
        width: 100%;
    }
}

.rooting_button{
    background-color: #F3F3F3;
    border-radius: 10px;
    color: black;
    border-bottom: 5px solid #b5b5ad;
}

.rooting_button:hover {
  margin-top: 3px;
  color: #000;
  background: #b5b5ad;
  border-bottom: 2px solid #b5b5ad;
}

/* ユーザー登録画面のCSS */

.form_container{
    border-width: 4px;
    border-color: #88B1FD;
    width: 80%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    overflow: scroll;
}

.form_box{
    background-color: #F3F3F3;
    border-color: #88B1FD;
    border-width: 1px;
    height: 560px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.title_and_button{
    display: flex;
}

.forms{
    margin-top: 50px;
}

.forms p{
    text-align: end;
    font-size: 13px;
}

.input_form{
    display: flex;
}

.confirm_label{
    width: 40%;
    text-align: center;
}

.category_select{
    background-color: #ffffff;
}

.category_form{
    display: flex;
    
}

.category_label{
    text-align: center;
    width: 40%;
}

.category_name{
    text-align: center;
    width: 57%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #e9ecef;
    margin-right: 7%;
    
}

.category_name_input{
    text-align: center;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #ffffff;
    margin-right: 13%; 
}

.category_name_input_show{
    text-align: center;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #e9ecef;
    margin-right: 13%; 
}

.purchase_interval_input{
    width: 100%;
    display: flex;
}

.purchase_interval{
    width:60%;
}

.forms p{
    margin-right: 5%;
}

.quantity_input{
    width: 100%;
    display: flex;
}

.quantity{
    width: 60%;
}

.d-flex > span{
    white-space: nowrap;
}

.label{
    margin-left: 40px;
    width:400px;
    white-space: nowrap;
    text-align: center;
}

.submit_button{
    background-color: #88b1fdbb;
    padding: 15px 30px;
    border-radius: 20px;
    border-color: #88B1FD;
    float: right;
    margin-right: 10px;
}

.submit_button:hover{
    background-color: #6da0ffbb;
}

.external_login_button{
    width: 20%;
    margin-left: auto;
    margin-right: 5%;
}

.line_button{
    float: right;
    margin-top: 17px;
    padding: 10px;
}

/* ユーザー登録画面のレスポンシブデザイン（フォームの共通部分あり） */
@media (max-width: 600px){
    .form_container{
        width: 90%;
        font-size: 1rem;
    }

    .title_user_create{
        font-size: 1.3rem;
    }

    .forms{
        width: 90%;
        margin: auto;
        margin-top: 3%;
    }

    .forms p{
        text-align: start;
        font-size: 0.7rem;
    }

    .label{
        text-align: left;
        margin-left: 5%;
        margin-top: 5%;
        width: auto;
    }

    .input_form{
        display: contents;
    }

    .submit_button{
        margin-top: 5%;
    }

    .line_button{
        padding: 10%;
    }

    .title_user_login{
        font-size: 1.3rem;
    }
    
}


@media (min-width: 1000px){
    .form_container{
        width: 50%;
    }
}









/* ストック管理画面のCSS */
@media(max-width: 1000px){
    .topics{
        display: none;
    }
}






.search{
    justify-content: center;
    display: flex;
    width: 100%;
    height: 37px;
    margin-left: auto;
    margin-right: 30px;
    margin-top: 8px;
    margin-bottom: 5px;
}

.search p{
    margin-top: 0.5rem;
}

.category_search{
    display: flex;
}

.AddStockBtn{
    margin-left: 7%;
}

.container{
    display: flex;
    width: fit-content;
}

.button_container{
    display: flex;
}


.index_container{
    border-width: 4px;
    border-color: #88B1FD;
    border-top: none;
    width: 100%;
    margin-right: auto;
    height: 580px;
}

.index_box{
    background-color: #F3F3F3;
    border-color: #88B1FD;
    border-width: 1px;
    height: 92%;
    overflow: scroll;
}

.index_button{
    text-align: center;
    font-size: large;
    width: 33.3%;
    background-color: #F3F3F3;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-color: #88B1FD;
    border-width: 4px;
    margin-left: auto;
    margin-right: auto;
}

.index_button.active{
    background-color: rgb(254, 255, 255);
    border-bottom: none;
}

.introduce p{
    text-align: center;
}

.stocks{
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.stock_card{
    text-decoration: none;
    color: #000;
}

.stock_index{
    background-color: #ffffff;
    height: 45px;
    width: 550px;
    border-color: #88B1FD;
    border-width: 1px;
    font-size: larger;
    padding-top: 5px;
    margin-left: 1%;
}

.stock_index:hover{
    background-color: #cff4df;
}

.stock_amount{
    float: right;
    margin-right: 10%;
}

.edit_button{
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    width: 60px;
    background-color: #88B1FD;
    text-align: center;
    border-radius: 30px;
    margin-left: 30px;
}


@media(max-width: 600px){
    .container{
        width: 100%;
        display: block;
    }

    .button_container{
        display: grid;
    }

    .buttons{
        width: 100%;
    }

    .index_button{
        width: 100%;
        font-size: 0.9rem;
        border-bottom: none;
        border-radius: 0px;
    }

    .index_button.active{
        background-color: #f7cfd3;
    }

    .index_container{
        width: 100%;
        height: 550px;
        font-size: 0.7rem;
    }

    .introduce p{
        font-size: 0.7rem;
        margin-left: 9px;
    }

    .search{
        margin-left: auto;
        margin-right: auto;
        font-size: 0.7rem;
        width: 95%;
        margin-bottom: 10%;
        display: contents;
    }

    .search p{
        padding-top: 0.3rem;
    }

    .category_search{
        justify-content: center;
        margin-top: 2%;
    }

    .category_search select{
        font-size: 0.5rem;
    }

    .category_search_btn{
        height: fit-content;
    }

    .insert_button{
        display: grid;
        margin-left: 0px;
        margin-right: 7%;
    }

    .form-control{
        font-size: 1.0rem;
    }

    .stock_index{
        margin-top: 5%;
        font-size: 1.0rem;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .edit_button{
        display: none;
    }

    .stocks{
        display: contents;
    }

    .stock_index{
        font-size: 0.9rem;
        padding-top: 8px;
    }

    .category_form{
        display: contents;
    }

    .purchase_interval{
        width: 40%;
    }

    .quantity{
        width: 30%;
    }

    .forms p{
        font-size: 0.7rem;
    }

}







/* 記事一覧画面のCSS */

.article_search{
    justify-content: center;
    display: flex;
    width: 100%;
    height: 45px;
    padding-top: 8px;
}

.container_left_side{
    width: 700px;
}

.article_container{
    width: 100%;
    height: 87%;
    margin-top: 2vh;
    overflow-y: scroll;
}

.article{
    display: flex;
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    padding: 2%;
    border-radius: 10px;
    background-color: #F3F3F3;
}

.left_contents{
    width: 55%;
    height: auto;
}

.article_header p{
    font-size: small;
    margin-left:  1%;
}

.right_contents{
    width: 45%;
    text-align: center;
    height: auto;
}

.good_icon{
    font-size: 28px;
}

.good_button{
    font-size: 28px;
}

.good_button:hover{
    color: #88B1FD;
}

.already_good{
    font-size: 28px;
}

.like_and_edit_buttons{
    justify-content: center;
}

.img{
    width: fit-content;
    display: block;
    background-color: #ffffff;
    border-color: #000;
    border-width: 2px;
    margin-left: auto;
    margin-right: auto;
}

.photo{
    width: 290px;
    height: 220px;
}

.photo_now{
    margin-left: 50%;
}

.topics{
    background-image: url("https://i.gyazo.com/604cf6784a2e7573bb4658d6d96984fa.png") ;
    background-size: contain;
    width: 300px;
    height: 600px;
    margin-top: 50px;
    background-repeat:  no-repeat;
}

.phone_display{
    width: 265px;
    height: 490px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-top: 15%;
}

.phone_display h5{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 30px;
    
    background-color: #FFC489;

}

.article_container_phone{
    width: 100%;
    height: 400px;
    margin-top: 2vh;
    overflow-y: scroll;
}

.article_phone{
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    padding: 2%;
    border-radius: 10px;
    background-color: #F3F3F3;
    color: #000;
    text-decoration: none;
}

.article_phone:hover{
    text-decoration: none;
    background-color: #cbcbc1;
}



.article_phone p{
    font-size: xx-small;
    margin-left: 5%;
}

.article_text_phone{
    font-size: 10px;
}

/* 記事投稿画面 */
.art_confirm{
    display: flex;
}

@media(max-width: 600px){

    .art_confirm{
        display: contents;
    }


    .create_art_button{
        padding-top: 5px;
    }

    .article_search{
        display: contents;
    }

    .article_container{
        height: 78%;
    }

    .container_left_side{
        width: auto;
    }

    .article{
        font-size: 0.7rem;
    }

    .left_contents h5{
        font-size: 0.7rem;
    }

    .left_contents p{
        font-size: 0.6rem;
    }

    .art_edit_delete_button{
        display: none;
    }

}











/* 記事詳細（コメント欄）画面のCSS */

.article_show_container{
    border-width: 4px;
    border-color: #88B1FD;
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    overflow-y: scroll;
}

.comments_container{
    width: 100%;
    height: 180px;
    margin-top: 2vh;
}

.comment_title{
    margin-left: 23%;
}

.commenter{
    display: flex;
}

.comment{
    width: 65%;
    height: auto;
    margin-left: auto;
    margin-right: 6%;
    margin-top: 3%;
    padding: 2%;
    border-radius: 10px;
    background-color: #F3F3F3;
}

.comment_submit_button{
    background-color: #88b1fdbb;
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 20px;
    border-color: #88B1FD;
    float: right;
    font-size: 10px;
    margin-right: 5px;
    margin-left: 5px;
}

.comment_submit_button:hover{
    background-color: #6da0ffbb;
}

.comment_destroy_button{
    background-color: #88b1fdbb;
    color: #000;
    text-align: center;
    width: 70px;
    padding: 5px;
    padding-top: 5px;
    padding-bottom: 3px;
    border-radius: 20px;
    border-color: #88B1FD;
    font-size: 13px; 
    margin-left: auto;
    margin-right: 5px;
    border: none;
}

.comment_destroy_button:hover{
    background-color: #6da0ffbb;
}

.comment_area textarea{
    height: 45px;

}

.comment_button{
    width: 10px;
    margin-left: auto;
    margin-right: 20%;
}

@media(max-width: 600px){
    .article_show_container{
        width: fit-content;
    }

    .comment_title{
        font-size: 0.8rem;
        margin-left: 5%;
    }

    .comment_area textarea{
        font-size: 0.7rem;
    }

    .comment{
        font-size: 0.7rem;
        width: 90%;
    }

    .art_show_edit_delete_button{
        display: flex;
    }

    .art_edit_button{
        font-size: 0.8rem;
    }

    .art_delete_button{
        font-size: 0.8rem;
    }


}