/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *
 *= require_tree .
 *= require_self
 */

body {
  /* Windowsでは Meiryo UI / Arialフォントを活用 */
  /* Macでは Hiragino Kaku Gothic ProN / Helvetica Neueフォントを活用 */
  font-family: "Meiryo UI", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
}

.header {
  height: 70px;
  width: 100%
}

@media (min-width: 640px) {
  .header {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .header {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .header {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .header {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .header {
    max-width: 1536px;
  }
}

.header {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  border-bottom-width: 2px;
}

/* ******************** ヘッダー画像・注意とお問い合わせリンク ******************** */

@media (min-width: 1024px) {
    .header .header-title {
      display: inline-flex;
    }
  }

.header .header-title {
    width: 55%;
  }

.header .header-title .header-logo {
      height: 70px;
    }

/* see also : https://v2.tailwindcss.com/docs/responsive-design */

.header .header-title .header-attention {
      margin-top: -1rem;
      display: none
    }

/* 解像度がmd未満の時は非表示、md以上の解像度の時のみ表示 */

@media (min-width: 768px) {
      .header .header-title .header-attention {
        display: block;
      }
    }

@media (min-width: 1024px) {
      .header .header-title .header-attention {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 2.5rem;
      }
    }

.header .header-title .header-attention .link-notice-beta-test {
        font-size: 0.75rem;
        line-height: 1rem;
        --tw-text-opacity: 1;
        color: rgba(96, 165, 250, var(--tw-text-opacity));
      }

.header .header-title .header-attention .link-notice-beta-test:hover {
        --tw-text-opacity: 1;
        color: rgba(37, 99, 235, var(--tw-text-opacity));
      }

.header .header-title .header-attention .link-notice-beta-test {
        text-decoration: underline;
      }

@media (min-width: 768px) {
        .header .header-title .header-attention .link-notice-beta-test {
          font-size: 1rem;
          line-height: 1.5rem;
        }
      }

.header .header-body {
    margin-left: auto
  }

@media (min-width: 768px) {
    .header .header-body {
      float: right;
    }
  }

.header .header-body .link_to_links, .header .header-body .link_to_organization_index, .header .header-body .link_to_organization_uncompleted_talk_script {
      font-size: 0.75rem;
      line-height: 1rem;
      --tw-text-opacity: 1;
      color: rgba(96, 165, 250, var(--tw-text-opacity));
    }

.header .header-body .link_to_links:hover, .header .header-body .link_to_organization_index:hover, .header .header-body .link_to_organization_uncompleted_talk_script:hover {
      --tw-text-opacity: 1;
      color: rgba(37, 99, 235, var(--tw-text-opacity));
    }

.header .header-body .link_to_links, .header .header-body .link_to_organization_index, .header .header-body .link_to_organization_uncompleted_talk_script {
      text-decoration: underline;
    }

@media (min-width: 768px) {
      .header .header-body .link_to_links, .header .header-body .link_to_organization_index, .header .header-body .link_to_organization_uncompleted_talk_script {
        font-size: 1rem;
        line-height: 1.5rem;
      }
    }

/* ******************** ユーザーアイコン ******************** */

.header .header-body .usercircle-icon {
      display: inline-block;
      height: 2rem;
      width: 2rem;
      cursor: pointer;
      --tw-text-opacity: 1;
      color: rgba(156, 163, 175, var(--tw-text-opacity));
    }

@media (min-width: 1024px) {
      .header .header-body .usercircle-icon {
        height: 2.5rem;
        width: 2.5rem;
      }
    }

/* ******************** ユーザーアイコンダイアログ ******************** */

.header .header-body #user_icon_dialog {
      position: absolute;
      right: 6.4%;
      top: 70px;
      padding: 10px;
      width: 240px;
      color: #555;
      font-size: 16px;
      background: #FFF;
      border: solid 2px #555;
      border-radius: 10px;
      box-sizing: border-box;
      visibility: hidden;
      z-index: 100 !important;
    }

.header .header-body #user_icon_dialog.visible {
        visibility: visible;
      }

.header .header-body #user_icon_dialog:before {
        content: "";
        position: absolute;
        top: -24px;
        left: 50%;
        margin-left: -15px;
        border: 12px solid transparent;
        border-bottom: 12px solid #FFF;
        z-index: 2;
      }

.header .header-body #user_icon_dialog:after {
        content: "";
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -17px;
        border: 14px solid transparent;
        border-bottom: 14px solid #555;
        z-index: 1;
      }

.header .header-body #user_icon_dialog .usericon, .header .header-body #user_icon_dialog .officeicon {
        display: inline-block;
        height: 1rem;
        width: 1rem;
      }

@media (min-width: 1024px) {
        .header .header-body #user_icon_dialog .usericon, .header .header-body #user_icon_dialog .officeicon {
          height: 2rem;
          width: 2rem;
        }
      }

.header .header-body #user_icon_dialog .user-name, .header .header-body #user_icon_dialog .company-name {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }

@media (min-width: 1024px) {
        .header .header-body #user_icon_dialog .user-name, .header .header-body #user_icon_dialog .company-name {
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
        }
      }

.header .header-body #user_icon_dialog .usericon-dialog-footer {
        margin-top: 0.5rem;
        width: auto;
        border-top-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgba(107, 114, 128, var(--tw-border-opacity));
        --tw-text-opacity: 1;
        color: rgba(59, 130, 246, var(--tw-text-opacity))
      }

@media (min-width: 1024px) {
        .header .header-body #user_icon_dialog .usericon-dialog-footer {
          margin-top: 1rem;
        }
      }

.header .header-body #user_icon_dialog .usericon-dialog-footer .user-setting-text, .header .header-body #user_icon_dialog .usericon-dialog-footer .organization-setting-text, .header .header-body #user_icon_dialog .usericon-dialog-footer .script-setting-text {
          margin-top: 0.5rem;
        }

.header .header-body #user_icon_dialog .usericon-dialog-footer .user-setting-text:hover, .header .header-body #user_icon_dialog .usericon-dialog-footer .organization-setting-text:hover, .header .header-body #user_icon_dialog .usericon-dialog-footer .script-setting-text:hover {
          --tw-text-opacity: 1;
          color: rgba(29, 78, 216, var(--tw-text-opacity));
        }

@media (min-width: 1024px) {
          .header .header-body #user_icon_dialog .usericon-dialog-footer .user-setting-text, .header .header-body #user_icon_dialog .usericon-dialog-footer .organization-setting-text, .header .header-body #user_icon_dialog .usericon-dialog-footer .script-setting-text {
            margin-top: 1rem;
          }
        }

@media screen and (max-width:1024px) {
      .header .header-body #usericon-dialog {
        position: relative;
        position: absolute;
        right: 1.4%;
        top: 65px;
        padding: 5px;
        width: 180px;
        color: #555;
        font-size: 10px;
        background: #FFF;
        border: solid 2px #555;
        border-radius: 10px;
        box-sizing: border-box;
        visibility: hidden;
      }
        .header .header-body #usericon-dialog.visible {
          visibility: visible;
        }
        .header .header-body #usericon-dialog:before {
          content: "";
          position: absolute;
          top: -24px;
          left: 49%;
          margin-left: -15px;
          border: 12px solid transparent;
          border-bottom: 12px solid #FFF;
          z-index: 2;
        }
        .header .header-body #usericon-dialog:after {
          content: "";
          position: absolute;
          top: -30px;
          left: 49%;
          margin-left: -17px;
          border: 14px solid transparent;
          border-bottom: 14px solid #555;
          z-index: 1;
        }
    }

/* ******************** ログアウトボタン ******************** */

.header .header-body .logout {
      margin-top: 1.5rem;
      display: inline-block;
    }

.header .header-body .logout .logout-button {
        width: 5rem;
        border-radius: 0.25rem;
        --tw-bg-opacity: 1;
        background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
      }

.header .header-body .logout .logout-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
      }

.header .header-body .logout .logout-button {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 700;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

@media (min-width: 1024px) {
        .header .header-body .logout .logout-button {
          padding-left: 1rem;
          padding-right: 1rem;
          padding-top: 0.75rem;
          padding-bottom: 0.75rem;
          font-size: 1rem;
          line-height: 1.5rem;
        }
      }

/* ******************** admin-mark ******************** */

.admin-mark {
  width: 100%
}

@media (min-width: 640px) {
  .admin-mark {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .admin-mark {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .admin-mark {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .admin-mark {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .admin-mark {
    max-width: 1536px;
  }
}

.admin-mark {
  float: right;
  text-align: center;
}

@media (min-width: 768px) {
  .admin-mark {
    width: 40%;
  }
}

@media (min-width: 1024px) {
  .admin-mark {
    width: 33.333333%;
  }
}

@media (min-width: 1280px) {
  .admin-mark {
    margin-right: 5rem;
  }
}

.admin-mark {
  margin-top: 2px;
}

.admin-mark .admin-user {
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(239, 68, 68, var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
    padding: 0.25rem;
    --tw-text-opacity: 1;
    color: rgba(185, 28, 28, var(--tw-text-opacity));
  }

/* ******************** notice,alert ******************** */

.notice {
  height: 2.5rem;
  width: 24rem;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(16, 185, 129, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
  padding: 0.25rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgba(5, 150, 105, var(--tw-text-opacity));
}

.alert {
  height: 2.5rem;
  width: 24rem;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
  padding: 0.25rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, var(--tw-text-opacity));
}

/* ******************** パンくずリスト ******************** */

.pankuzu {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity))
}

@media (min-width: 768px) {
  .pankuzu {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.pankuzu .current-view-text {
    display: inline-block;
  }

.link-text {
  display: inline-block;
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

.link-text:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.link-text {
  text-decoration: underline;
}

/* ******************** テーブル ******************** */

.link-td-full {
  display: inline-block;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.link-td-full:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}

.link-td-full {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

.link-td-full:hover {
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, var(--tw-text-opacity));
}

.link-td-full {
  text-decoration: underline;
}

/* ******************** ページャー ******************** */

.pagination {
  margin-top: 2rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}

.pagination .button-prev-next {
    margin: 0.5rem;
    display: inline-block;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
  }

.pagination .button-prev-next:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
  }

.pagination .button-prev-next {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

.pagination .button-first-last {
    margin: 0.5rem;
    display: inline-block;
    cursor: pointer;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
  }

.pagination .button-first-last:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
  }

.pagination .button-first-last {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

.pagination .page {
    margin: 0.5rem;
    display: inline-block;
    cursor: pointer;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity))
  }

.pagination .page:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
  }

.pagination .page.current {
      --tw-bg-opacity: 1;
      background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
    }

.pagination .page.current:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
    }

.pagination .page.current {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

.pagination .page a {
      display: inline-block;
      border-radius: 0.25rem;
    }

.pagination .page a:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
    }

.pagination .page a {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

/* ******************** ボタン ******************** */

.button-send-primary {
  /* @define-mixin内では、クラス名などで囲まないとtailwindcssは利用できず、生のCSSしか書けない */
  color: white;
  border-radius: 0.25rem;
}

.button-send-primary:disabled, .button-send-primary.disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

.button-send-primary:disabled:hover, .button-send-primary.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
  }

.button-send-primary {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}

.button-send-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}

.button-send-sub {
  /* @define-mixin内では、クラス名などで囲まないとtailwindcssは利用できず、生のCSSしか書けない */
  color: white;
  border-radius: 0.25rem;
}

.button-send-sub:disabled, .button-send-sub.disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

.button-send-sub:disabled:hover, .button-send-sub.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
  }

.button-send-sub {
  --tw-bg-opacity: 1;
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
}

.button-send-sub:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
}

.button-create {
  /* @define-mixin内では、クラス名などで囲まないとtailwindcssは利用できず、生のCSSしか書けない */
  color: white;
  border-radius: 0.25rem;
}

.button-create:disabled, .button-create.disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

.button-create:disabled:hover, .button-create.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
  }

.button-create {
  --tw-bg-opacity: 1;
  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
}

.button-create:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(219, 39, 119, var(--tw-bg-opacity));
}

.button-delete {
  /* @define-mixin内では、クラス名などで囲まないとtailwindcssは利用できず、生のCSSしか書けない */
  color: white;
  border-radius: 0.25rem;
}

.button-delete:disabled, .button-delete.disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

.button-delete:disabled:hover, .button-delete.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
  }

.button-delete {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}

.button-delete:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
}

.button-filter {
  /* @define-mixin内では、クラス名などで囲まないとtailwindcssは利用できず、生のCSSしか書けない */
  color: white;
  border-radius: 0.25rem;
}

.button-filter:disabled, .button-filter.disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
  }

.button-filter:disabled:hover, .button-filter.disabled:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
  }

.button-filter {
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
}

.button-filter:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}

.button-filter {
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, var(--tw-text-opacity));
}

/* チェックボックスを大きくする */

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