/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* テキストのフォントカラーを赤に設定 */
 .text-color-white {
     color:white;
 }

 .overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 120px;
}
.list-item .image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    object-fit:cover;
}

.list {
  grid-template-columns: 1fr 1fr 2fr 2fr 1fr 1fr;
}

.column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-width1 {
  width: 114px;
  margin-right: 10px;
}

.use-btn2 {
  display: none;
}

.quantity-sp {
  display: none;
}

.btn_space {
  width: 155px;
}

@media screen and (max-width: 700px) {
  .btn-div {
    flex-direction: column;
  }

  .btn-width1 {
    font-size: .75rem;
    margin-right: 0px;
  }
  .btn-width2 {
    font-size: .75rem;
  }

  .list {
    grid-template-columns: 1fr 1fr 2fr 3fr 1fr 2fr;
  }

  .use-btn1 {
    display: none;
  }
  .all-btn {
    display: none;
  }
  .use-btn2 {
    display: flex;
  }
  .btn_space {
    width: 132px;
  }
}

@media screen and (max-width: 810px) {
  .quantity-width1 {
    display: none;
  }
  .quantity-width2 {
    display: flex;
  }
}
@media screen and (max-width: 930px) {
  .img-width {
    display: none;
  }
  .btn-width2 {
    width: 95px;
  }
  .btn-width2-open {
    width: 155px;
  }
  .btn-width1 {
    width: 95px;
  }
  .btn-space-width {
    width: 75px;
  }
}
.food .image {
    width: 175px;
    height: 175px;
    object-fit:cover;
}
.link-hover:hover{
  color: lightgray;
}
.btn-hover{
  color: white;
  border-color: white;
}
.btn-hover:hover{
  color: lightgray;
  border-color: lightgray;
}
.input-text {
  border: solid 2px #4258ff;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  appearance: none;
  font-size: var(--bulma-size-medium);
  padding: 5px;
  height: 2.5rem;
  border-radius: 10px;
  background-color: #E5E8FF;
}
.input-text:focus {
  border: solid 3px #4258ff;
  background-color: #ffffff;
}
.file-btn {
  border: solid 2px #4258ff;
  font-size: var(--bulma-size-medium);
  padding: 5px;
  height: 2.5rem;
  border-radius: 10px;
  background-color: #E5E8FF;
  margin-top: 5px;
  width: 260px;
  cursor: pointer;
}
.file-btn:focus {
  border: solid 3px #4258ff;
  background-color: #ffffff;
}

.image-div img {
  object-fit: cover;
  width: 85px;
  height: 85px;
}
.noimage-text {
  display: none;
}
.no-image {
  display: flex;
}

.cookpad {
  text-align:center;margin-top: 30px; margin-bottom: 20px;  margin-left: 10px; background: #FF9933;
}

.cookpad:hover {
  background-color: #f79e31;
}
.name-list {
  display: grid;
}

.width-expr {
  display: none;
}

.quantity-dt {
  display: flex;
}

.block-1 {
  display: flex;
}
.block-2 {
  display: none;
}

@media screen and (max-width: 550px) {
  .table-div {
    display: none;
  }

  .list {
    grid-template-columns: 50px 70px 1fr 140px 85px;
  }
  .name-list {
    display: none;
  }

  .width-expr {
    display: flex;
  }
  .width2-expr {
    display: none;
  }
  .quantity-dt {
    display: none;
  }
  .use-btn2 {
    font-size: 14px;
  }
  .use-btn1 {
    display: none;
    position: absolute;
    left: -9999px;
  }
  .quantity-sp {
    display: flex;
  }
  .use_up_btn {
  display: none;
  }
  .all-br form:nth-child(1) {
    position: absolute;
    left: -9999px;
  }
  .btn_space {
    width: 86px;
  }
  .block-1 {
    display: none;
  }
  .block-2 {
    display: flex;
  }
}


@media screen and (max-width: 600px) {
  .title {
    flex-direction: column;
  }
}

.list2 {
  grid-template-columns: 1fr 1fr 2fr 1fr 4fr;
}