/*
 * app/assets/stylesheets/application.css
 */


  /* =========================
     基本設定
     ========================= */

    html{
      font-size: 10px; /* 初期サイズ */
    }

    body {
      font-family: 'Noto Sans JP', sans-serif;
    }

    .resizable-text {
      font-size: 1em;
    }


  /* =========================
     フォーム
     ========================= */

  .long-input {
    width: 400px; /* 任意の幅に変更可能 */
    max-width: 100%; /* レスポンシブ対応 */
    padding: 8px;
    font-size: 16px;
  }

  input[type=checkbox] {
    transform: scale(1.5);
  }


  /* =========================
     メッセージ
     ========================= */

  .notice {
    background-color: #e0f7fa; /* 背景水色 */
    color: #00695c;            /* 文字色ダークグリーン */
    /*padding: 10px;*/
    /*border-radius: 4px;*/
    /*margin-bottom: 1em;*/
  }

  .alert {
    background-color: #ffebee; /* 背景ピンク */
    color: #b71c1c;            /* 文字色赤 */
    /*padding: 10px;*/
    /*border-radius: 4px;*/
    /*margin-bottom: 1em;*/
   }


  /* =========================
     栄養情報
     ========================= */

  .nutrition-carbohydrate-section {
    margin-top: 1rem;
  }

  .nutrition-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 180px;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .nutrition-parent {
    font-weight: 700;
  }

  .nutrition-level-1 {
    padding-left: 20px;
    font-weight: 600;
  }

  .nutrition-level-2 {
    padding-left: 45px;
  }

  .nutrition-value {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nutrition-value .form-control {
    width: 130px;
  }


  /* =========================
     翻訳入力欄
     ========================= */

  .ingredient-translation-fields {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .ingredient-translation-fields > .ingredient-translation-field {
    display: block !important;
    width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
    flex: 0 0 calc((100% - 32px) / 3) !important;
    min-width: 0 !important;
  }

  .ingredient-translation-fields > .ingredient-translation-field input {
    width: 100% !important;
    box-sizing: border-box !important;
  }


  /* =========================
     スマートフォン
     767.98px以下
     ========================= */

  @media (max-width: 767.98px) {
    .nutrition-row {
      grid-template-columns: 1fr;
    }

    .nutrition-level-1 {
      padding-left: 10px;
    }

    .nutrition-level-2 {
      padding-left: 20px;
    }

    .nutrition-value .form-control {
      width: 100%;
    }
  }