@charset "UTF-8"; @import url(./notosansjp.css); body { font-family: "Noto Sans JP", sans-serif; margin: 0 auto; color: #323743; margin-bottom: 70px; overflow-x: hidden; } a:hover { text-decoration: none; } a:link { color: black; } .none { display: none !important; } /**************************** nav *************************/ nav { height: 60px; position: fixed; top: 0; width: 100%; border-bottom: 1px solid #cdcdcd; background: #fff; z-index: 2; } main { margin-top: 60px; } .nav-item { padding: 0 10px; } .nav-ttl { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav_prev a { color: #323743; display: inline-block; } .nav_prev a:before { content: "\f053"; font: 16px FontAwesome; color: #323743; margin-right: 5px; } .fas.fa-chevron-left { margin-right: 10px; } /**************************** search form *************************/ .search_form input { padding-left: 10px; width: 100%; border: 1px solid #bdbdbd; border-radius: 5px; height: 40px; margin: 10px 0; padding-left: 35px; } .search_form { position: relative; margin: 0 5px; } .search_form .src_icon { position: absolute; top: 23px; left: 10px; background-image: url("../icon/icon_search.png"); background-size: contain; width: 16px; height: 16px; } .chat_room_src_form.none { display: none !important; } .search_form input.focus { width: calc(100% - 100px); } .search_form input:focus, .chat_room_src_form input:focus { border-color: #71a2ff; outline: 0; box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%); } .search_form .cancel { width: 100px; font-size: 14px; padding: 0 10px; color: #8f8f8f; text-align: center; } /**************************** color *************************/ .bg_gray { background: #f3f3f3; } .bg_blue { background: #0070ca; } .bg_navy { background: #1d3557; } .bg_red { background: #ff4747; } .bg_green { background: #89e54d; } .bg_white { background: #fff; } .border_gray { border: 1px solid #dadce0; } .text_blue { color: #0070ca; } .text_white { color: #fff; } /**************************** modal *************************/ /* プロフィールモーダル */ .profile_modal .modal-footer button { color: #fff; border-radius: 10px; min-width: 100px; font-size: 14px; } .profile_modal .modal-footer button img { width: 30px; height: 30px; } .profile_modal .modal-body p { max-height: 200px; overflow-y: scroll; } .profile_modal .modal-header img { width: 60px; height: 60px; border-radius: 50%; } .profile_modal #userNameCard-scroll { height: 150px; overflow: scroll; padding-top: 0rem; padding-right: 1rem; margin-top: 1rem; } .disabled { background: darkgray !important; } .profile_modal .modal-header { display: table; } .profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; } .profile_modal .modal-footer button { width: 33%; padding: 5px; } .profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px; } .profile_modal .modal-header .profile_desc { width: 100%; } .profile_modal .modal-header .profile_name { width: 100%; text-align: center; line-height: 1.2; font-size: 16px; margin-left: auto; margin-right: auto; } .modal-header { width: 100%; } .profile_modal .modal-header .profile_name span { line-height: 60px; font-weight: bold; font-size: 20px; } @media screen and (max-width: 768px) { /* navi */ .nav-ttl { font-size: 16px; } .nav_prev a span { font-size: 16px; } /* search form */ .search_form input { font-size: 14px; } input::placeholder { font-size: 14px; } }