@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*!
 *   Smart2 CSS
 *   AdminLTEのフォントを上書く
!*/

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Arial, Roboto, 'Droid Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
}

/* H1 - H6 font */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: Arial, Roboto, 'Droid Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}

.main-header .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 15px 15px;
    font-family: Arial, Roboto, 'Droid Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif, fontAwesome;
}

.main-header .logo {
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    /*font-size: プロジェクトによって変える*/
    font-size: 15px;
    line-height: 50px;
    text-align: center;
    width: 230px;
    font-family: Arial, Roboto, 'Droid Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 15px;
    font-weight: 300;
    overflow: hidden;
}

.content-header>h1 {
    font-size: 20px;
    margin: 0;
}

.h4,
h4 {
    font-size: 12px;
}

.alert-memo {
    background-color: #92D4E7 !important;
    border-color: #92D4E7;
}

.alert-sm2-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #CC0000;
}

.alert-sm2-success {
    background-color: #dff0d8;
    border-color: #dff0d8;
    color: #3c763d;
}

.memo-sm2-success {
    background-color: #f7f7f9;
    /*border-color: #dff0d8;*/
    /*color: #3c763d;*/
}

/*.btn-sm2-menu {*/

/*background-color: #FFCC00;*/

/*color: #fff;*/

/*border-color: #ebccd1;*/

/*}*/

.login-logo,
.register-logo {
    /*font-size: プロジェクトによって変える*/
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 25px;
    text-align: center;
}

.table>thead>tr>th {
    vertical-align: middle;
    /*background: #337AB7;*/
    /*color: #ffffff;*/
}

tr.bg-gray {
    background-color: #c0c0c0
}

tr.bg-gray-blue {
    background-color: #b0c4de
}
tr.bg-green {
    background-color: #7fa895
}

.navbar-custom-menu {
    width: 90%;
}
.navbar-custom-menu .navbar-nav {
    float: none;
    display: flex;
    justify-content: flex-end;
    flex-grow: 2;
}
.navbar-custom-menu .navbar-nav li:first-child {
    max-width: 80%;
}
.navbar-custom-menu .navbar-nav a {
    text-align: right;
}
.navbar-custom-menu .navbar-nav li:nth-child(2) {
    width: 120px;
    min-width: 120px;
}

.fa.fa-user {
    display: flex;
    justify-content: flex-end;
}

.fa.fa-user strong {
    margin-left: .5em;
    max-width: 60%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* bootstrap4 */

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.mx-auto {
    margin: 0 auto;
}

/*** bootstrap4 ***/

.btn-lg {
    width: 230px;
    max-width: 100%;
}
.top-addShop-table select.form-control {
    max-width: 100%;
}
.shop-edit-table span.item {
    display: inline-block;
}

.shop-edit-table .sns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
}
.shop-edit-table .sns input {
    flex-grow: 2;
    margin-left: 5px;
    
}

@media (max-width: 1200px) {
    .shop-edit-table td {
        display: block;
        width: 100%;
    }
    .shop-edit-table .address .col-sm-2,
    .shop-edit-table .address .col-sm-6 {
        width: 100%;
        float: none;
        padding: 0;
    }
    
}


@media (max-width: 768px) {
  .main-header .logo {
    width: 100%;
  }
  .main-header .navbar {
    display: flex;
    justify-content: space-between;
  }
  .main-header {
      max-height: 150px;
  }
  .main-sidebar {
      padding-top: 150px;
  }
  .navbar-custom-menu .navbar-nav {
      display: block;
  }
  .fa.fa-user strong {
    max-width: 40%;
  }
  .navbar-custom-menu .navbar-nav li:nth-child(1),
  .navbar-custom-menu .navbar-nav li:nth-child(2) {
      width: 100%;
      max-width: 100%;
  }
  .calendar-first-table td,
  .calendar-search-table td,
  .article-search-table td,
  .review-search-table td,
  .staff-search-table td,
  .shop-search-table td,
  .top-addShop-table td {
      display: block;
      width: 100%!important;
  }
  .scroll-x {
      overflow-x: scroll; 
  }
  .article-list-table,
  .review-list-table {
      width: 1500px;
  }
  .staff-list-table,
  .shop-list-table,
  .top-list-table {
      width: 800px;
  }

  .article-edit-table td,
  .article-edit-table2 td,
  .review-edit-table td,
  .staff-edit-table td,
  .shop-edit-table td,
  .top-editShop-table td {
      display: block;
      width: 100%;
  }

  
  .article-edit-table tr:nth-of-type(2) select:nth-of-type(1),
  .article-edit-table tr:nth-of-type(3) select:nth-of-type(1) {
      width: 80%;
  }
  .article-edit-table tr:nth-of-type(2) select:nth-of-type(n+2),
  .article-edit-table tr:nth-of-type(3) select:nth-of-type(n+2) {
      width: 100px;
  }

    .article-edit-table2 input[type=file],
    .staff-edit-table input[type=file],
    .shop-edit-table input[type=file]{
        width: 100%;
    }

}