@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  min-width: 100%;
  flex-direction: column;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
}

.content {
  flex: 1;
}

.flash {
  text-align: center;
  color: #ffffff;
}

@media (max-width: 767px) {
  .mobile-hidden {
    display: none;
  }
  .rectangle-right {
    position: relative !important;
    width: 100% !important;
    left: 0% !important;
  }
  .mt-5-mobile {
    margin-top: 1.25rem !important; /* 20px */
  }
  .right-box-title {
    display: flex;
    height: 48px;
  }
  .w-11-12-mobile {
    width: 91.666667% !important;
  }
  .mobile-menu-bar {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 300px;
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  }
  .mobile-menu-bar.active {
    right: 0;
  }
}

@media (min-width: 768px) {
  .desktop-hidden {
    display: none;
  }
  .rectangle-right {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
    top: 0px;
  }
  .right-box-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 552px;
    height: 48px;
  }
}

#modal-background {
  position: absolute;
  background-color: transparent !important;
}

.extendedLineStyle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* テーブルスタイル */
.table-label {
  padding: 16px 24px;
  background-color: #F5F6FA;
}

.table-title {
  color: #43425D;
  font-size: 20px;
  padding-bottom: 32px;
}

/* ユーザー側画面 */
.user_body {
  background-color: #fbfcff;
}

.index-logo-block {
  height: 561px;
}

.flash {
  text-align: center;
  color: #ffffff;
}

/* ユーザー側画面 */
.user-gradient {
  background: linear-gradient(92.55deg, #fc6767 0%, #f84073 100%);
  background-size: cover;
}

.user_registration-label {
  background-color: #fbfcff;
  color: rgba(0, 0, 0, 0.60);
  font-size: 12px;
  position: absolute;
  top: 15px;
  left: 15px;
  padding-inline: 2px;
}

.user_registration-input {
  height: 56px;
  width: 100%;
  background-color: #fbfcff;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
}

.purchase-disabled {
  background: #E1E1E1;
  color: #999999;
}

.variation-name {
  text-decoration: line-through;
  color: #999999;
}

input:checked + .variation-name {
  background: #E1E1E1;
  color: #ffffff;
  border-style: none;
}

/* 購入画面 */
.payment_contents {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.user_header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  padding-block: 32px 12px;
}

.user_header-top {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

.user_header-back {
  position: absolute;
  top: 35px;
  left: 12px;
}

.user_header-edit {
  position: absolute;
  top: 20px;
  right: 12px;
}

.cart-icon {
  display: flex;
  position: absolute;
  top: 34px;
  right: 12px;
}

.header-title {
  margin-inline: auto;
  line-height: 1.8;
  font-size: 17px;
  font-weight: 700;
}

/* 購入内容確認画面 */
.confirm-back {
  position: absolute;
  top: 37px;
  left: 12px;
}

.agreement-text {
  width: 350px;
  height: 12%;
  font-weight: 400;
  font-size: 13px;
  line-height: 200%;
  color: #ffffff;
  flex: none;
  order: 0;
  flex-grow: 0;
  text-align: center;
}

.agreement-coach-text {
  height: 12%;
  font-weight: 400;
  font-size: 13px;
  line-height: 200%;
  color: #000;
  order: 0;
}

.dialog-button {
  background-color: #e83e6d;
  color: #fff;
}

.index-button {
  width: 361px;
  height: 52px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.button-box {
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

.button-title {
  width: 361px;
  height: 52px;
  border: 1px solid #ffffff;
  border-radius: 32px;
}

.action-button {
  padding: 6px 16px;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.039);
  border-radius: 3px;
  cursor: pointer;
}

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

.footer-link-text {
  width: 150px;
  height: 12px;
  font-weight: 400;
  font-size: 11px;
  line-height: 12px;
  color: #ffffff;
}

.footer-company-text {
  width: 150px;
  height: 18px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #ffffff;
}

.purchase-tab {
  background-color: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
}

.category {
  display: flex;
  column-gap: 8px;
  padding: 16px;
  background-color: #fbfcff;
}

.category-toggle-active {
  background-color: #e83e6d;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  border-radius: 6px;
  padding: 8px 12px;
}
.category-toggle-inactive {
  background-color: #e5e7eb;
  color: #1f2a37;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  border-radius: 6px;
  padding: 8px 12px;
}

.expenses-count-exclamation {
  display: flex;
  align-items: center;
  column-gap: 8px;
  width: 361px;
  margin-inline: auto;
  background-color: #fde8e8;
  color: #c81e1e;
  border-radius: 6px;
  padding: 8px 16px;
}
.optional-count-exclamation {
  display: flex;
  align-items: center;
  column-gap: 8px;
  width: 361px;
  margin-inline: auto;
  background-color: #def7ec;
  color: #046c4e;
  border-radius: 6px;
  padding: 8px 16px;
}
.expenses-total-count {
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
.message-border {
  border-bottom: 1px solid #c81e1e;
}

.expenses-wrapper {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  row-gap: 24px;
  padding: 24px 16px;
}
.expense-contents {
  width: 168px;
}
.expense-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.expenses-title {
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.expenses-items {
  font-size: 12px;
  color: #727272;
}

.expense-content {
  padding: 24px 16px;
}

.purchase_history-contents:not(:last-child) {
  display: block;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.vendor-tag {
  background-color: #FDF6B2;
  color: #723B13;
  font-size: 12px;
  padding: 2px 10px;
  font-weight: normal;
}

.reclaimed-tag {
  background-color: #E73E6D;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 10px;
  font-weight: normal;
}

.subscription-tag {
  background-color: #1890ff;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 10px;
  font-weight: normal;
}

.item-fixture {
  color: #046C4E;
  font-size: 16px;
  line-height: 1.5;
}

.not-item-fixture {
  color: #C81E1E;
  font-size: 16px;
  line-height: 1.5;
}

/* 購入画面 */
.purchased_text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 24px;
}

/* 規約 */
.term-container {
  padding: 16px;
  gap: 8px;
  width: 361px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.term-admin-container {
  padding: 16px;
  gap: 8px;
  width: 50vw;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.term-admin-container h1 {
  font-weight: 600;
  font-size: 24px;
}

.term-admin-container h2 {
  font-weight: 600;
  font-size: 20px;
}

.term-admin-container .term-title {
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.terms-title {
  width: 329px;
  height: 21px;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.87);
}

.terms-hr {
  width: 100%;
  height: 0.5px;
}

.terms {
  gap: 24px;
}

.term-unit {
  font-size: 14px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.87);
}

.term-title {
  font-weight: 600;
}

.term-text {
  font-weight: 400;
}

.header-logo {
  width: 107px;
  height: 29px;
}

.registrations-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 361px;
  height: 48px;
}

.registrations-text {
  width: 361px;
  height: 68px;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.87);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.registrations-form-box {
  width: 361px;
}

.registrations-button {
  width: 361px;
  height: 52px;
  bottom: 43px;
  border-radius: 32px;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.registrations-complete-text {
  width: 90%;
  height: 100px;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
}

.user-registration-complete {
  margin-inline: auto;
  margin-block: auto;
  font-weight: 300;
  font-size: 18px;
  line-height: 150%;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
}

.user-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
}

.container {
  position: relative;
  width: 100%;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  background: #fbfcff;
}

.user-footer {
  width: 100%;
  height: 83px;
  border-top: 1px solid #F2F2F7;
  padding-top: 15px;
  margin-top: auto;
  grid-row-start: 2;
  grid-row-end: 3;
}

.list-content {
  width: 95%;
}

.active-footer-button {
  color: #e83e6d;
}

.unactive-footer-button {
  color: #000000de;
}

/* balance */
.activity-fee-tab {
  width: 201px;
  height: 27px;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  border: 1px solid #ffffff;
  border-radius: 15px;
  line-height: 25px;
  position: relative;
}

.active-tab {
  background-color: #ffffff;
  color: #000000de;
  width: 101px;
}

.unactive-tab {
  color: #ffffff;
  width: 100px;
}

.left-tab {
  border-radius: 15px 0 0 15px;
  text-align: center;
}

.right-tab {
  border-radius: 0px 15px 15px 0px;
  text-align: center;
}

.add-balance-button {
  position: absolute;
  left: 86%;
  top: 38px;
}

.unactive-content {
  display: none;
}

.balance-container {
  width: 91%;
  max-width: 500px;
  height: 72px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.container-icon {
  margin: 16px;
  width: 40px;
  height: 40px;
}

.container-title {
  width: 120px;
  height: 21px;
  font-weight: 600;
  font-size: 14px;
  line-height: 75px;
  color: rgba(0, 0, 0, 0.87);
}

.currency {
  font-size: 0.875rem;
  line-height: 2.8;
}

.container-amount {
  font-weight: 600;
  font-size: 23px;
  line-height: 23px;
  color: rgba(0, 0, 0, 0.87);
  margin-top: 25px;
  margin-left: 17px;
}

.container-arrow {
  width: 24px;
  height: 24px;
  margin-top: 25px;
}

.expense-unit {
  width: 500px;
  max-width: 353px;
}

.expense-created-at {
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: rgba(60, 60, 67, 0.6);
}

.expense-container {
  width: 353px;
  max-width: 500px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.expense-deadline-container {
  width: 353px;
  max-width: 500px;
  background: #e1e1e1;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.expense-confirm-container {
  width: 95%;
  max-width: 500px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.message-unit {
  width: 95%;
  height: 90%;
}

.message-container {
  width: 353px;
  max-width: 500px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.message-created-at {
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: rgba(60, 60, 67, 0.6);
}

.notification-icon {
  margin-top: 1rem;
  margin-left: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e83e6d;
}

.message-detail {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(60, 60, 67, 0.6);
}

.text-link > p > a {
  color: #2196F3;
  border-bottom: 1px solid #2196F3;
}

.message-detail-body {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: (60, 60, 67, 0.6);
}

.item-title {
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
}

.purchased-count {
  font-weight: 400;
  font-size: 11px;
  line-height: 12px;
  width: 130px;
  color: #727272;
}

.purchased-status {
  font-weight: 400;
  font-size: 11px;
  line-height: 12px;
  color: #727272;
  width: 60px;
}

.expense-level {
  font-weight: 400;
  font-size: 11px;
  line-height: 11px;
  color: #727272;
}

/* 個人費用詳細 */
.expense-images {
  width: 95%;
  max-width: 500px;
}

.expense-tab {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

.expense-title {
  width: 95%;
  max-width: 500px;
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: rgba(0, 0, 0, 0.87);
}

.expense-list-images:not(:first-child) {
  display: none;
}

.expense-detail {
  width: 95%;
  max-width: 500px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.87);
}

.detail-container {
  width: 95%;
  max-width: 500px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.require-tab {
  background-color: #fde8e8;
  color: #9B1C1C;
  border-radius: 2px;
  margin-right: 10px;
  padding: 2px 10px;
}

.optional-tab {
  background-color: #DEF7EC;
  color: #03543F;
  border-radius: 2px;
  margin-right: 10px;
  padding: 2px 10px;
}

.expense-required {
  color: #ff3b30;
  max-width: 190px;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  margin-top: 2px;
}

.require-tab {
  background-color: #fde8e8;
  color: #9B1C1C;
  border-radius: 2px;
  margin-right: 10px;
  padding: 2px 10px;
}

.expense-detail-title {
  max-width: 190px;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: rgba(60, 60, 67, 0.6);
  margin-top: 2px;
}

.delivered-button {
  width: 118px;
  height: 36px;
  font-weight: 500;
  font-size: 14px;
  list-style: 24px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #999999;
}

.cancel-subscription-button {
  width: 168px;
  height: 36px;
  font-weight: 500;
  font-size: 14px;
  list-style: 24px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #999999;
}

#reclaim-button, #cancel-reclaim-button {
  height: 36px;
  font-weight: 500;
  font-size: 14px;
  list-style: 24px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #999999;
}

.purchase-button {
  width: 91%;
  max-width: 500px;
  height: 52px;
  border-radius: 32px;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  padding-top: 10px;
  text-align: center;
}

.add-to-cart-button {
  background-color: #ffec3d;
}

.move-to-cart-button {
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--light-primary-shades-50-p, rgba(25, 118, 210, 0.5));
}

.confirm-text {
  width: 95%;
  max-width: 500px;
  height: 54px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.87);
}

.purchase-complete-text {
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: rgba(0, 0, 0, 0.87);
}

/* マイページ */
.mypage-container {
  width: 95%;
  max-width: 300px;
  font-weight: 600;
  font-size: 17px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.87);
}

.user-box {
  box-sizing: border-box;
  gap: 8px;
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
}

.user-detail {
  width: 350px;
  align-items: center;
  gap: 16px;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
}

.user-name {
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
}

.user-affiliation {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.mypage-link {
  width: 350px;
}

.user-link-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.87);
}

.user-purchased {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
}

.student-container {
  width: 361px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.purchased-container {
  width: 361px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.purchase_history-date {
  color: #3c3c4399;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.purchased-footer {
  width: 100%;
  height: 83px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #f2f2f7;
  padding-top: 15px;
}

.purchased-footer-content {
  width: 345px;
  height: 31px;
  font-weight: 300;
}

.purchased-footer-total {
  font-size: 18px;
  line-height: 22px;
}

.purchased-footer-amount {
  font-size: 26px;
  line-height: 31px;
}

/* カード一覧 */
.customer-container {
  width: 91%;
  max-width: 500px;
  height: 100px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.customer-width {
  width: 91%;
  max-width: 500px;
}

/* カード情報登録 */
.card {
  border: none;
  margin: 20px auto 0 auto;
}

.card-element {
  width: 350px;
  margin: auto;
}

#card-number {
  width: 350px;
  margin: auto;
}

#card-expiry {
  width: 350px;
  margin: auto;
}

#card-cvc {
  width: 350px;
  margin: 0 auto 20px auto;
}

/* カード詳細 */
.customer-detail-container {
  width: 361px;
  height: 120px;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

/* 管理側画面 */
.admin-gradient {
  background: #e83e6d;
}

.admin_menu_selected {
  display: block;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.20);
  border-left: 4px solid #fff;
  padding: 8px 24px 8px 20px;
}

.admin_menu_unselected {
  display: block;
  color: #fff;
  padding: 8px 24px;
}

.admin_submenu {
  padding: 16px 24px 16px 36px;
}

.admin_vendor_table-label {
  padding: 16px 24px;
  background-color: #F5F6FA;
}

.admin_table-label {
  font-size: 14px;
  line-height: 21px;
  background-color: #f5f6fa;
  padding: 16px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.coach-gradient {
  background: linear-gradient(150.47deg, #3a5aa9 -0.83%, #1a3067 91.58%);
  mix-blend-mode: normal;
}

.rectangle-left {
  position: absolute;
  width: 50%;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  height: 100%;
}

.company_name {
  position: absolute;
  left: 40.62%;
  top: 92.5%;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
}

.rectangle-right {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0px;
}

.login-logo {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 44.06%;
  bottom: 44.06%;
}


.blue-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  height: 42px;
  background: #1976d2;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  flex: none;
  order: 2;
  flex-grow: 0;
}

.admin-registrations-complete-box {
  width: 393px;
  margin-top: 200px;
}

.admin-registrations-complete-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 166%;
  letter-spacing: 0.4px;
  line-height: 27px;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.87);
}

.admin-header-logo {
  width: 138px;
  height: 38px;
}

.admin-background {
  background: #f0f0f7;
}

.admin-header {
  padding: 16px 24px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-admin-list {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 16px;
  font-weight: bold;
}

.admin-main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  min-height: 100%;
  height: auto;
}

.coach-sidebar {
  background-color: #273466;
  box-sizing: border-box;
}

.vendor-sidebar {
  background-color: #273466;
  box-sizing: border-box;
  height: 100vh;
}

@media screen and (max-width: 1279px) {
  .coach-sidebar {
    width: 150px;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .coach-sidebar {
    width: 151px;
  }
}
@media screen and (min-width: 1440px) {
  .coach-sidebar {
    width: 198px;
  }
}

.admin-sidebar {
  background-color: #e83e6d;
  box-sizing: border-box;
}

.admin-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #f0f0f7;
  width: 80%;
}

.admin-flex-content {
  flex-grow: 1;
  box-sizing: border-box;
}

.admin-fixed-content {
  height: 128px;
  background-color: #f0f0f7;
  box-sizing: border-box;
}

.admin-title {
  width: 510px;
  height: 28px;
  margin-top: 36px;
  margin-left: 48px;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  color: #43425d;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.vendor-header {
  padding: 16px 24px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

.vendor-header-logo {
  width: 138px;
  height: 38px;
}

.vendor-content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 80%;
  overflow: hidden;
  z-index: 1;
}

.vendor-content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  box-shadow: 0 0px 6px rgba(68, 68, 68, 0.6);
  z-index: -1;
}

.table {
  padding-top: 80px;
}

.table_line_top {
  display: table;
  width: 600px;
  background-color: #f0f0f7;
}

.table_line {
  display: table;
  width: 600px;
}

.table_block {
  display: table-cell;
  border: solid 1px #999;
  width: 200px;
}

.table_link_edit {
  color: #1976d2;
}

.table_link_delete {
  color: #d32f2f;
}

.table-items {
  background-color: #f5f6fa;
  color: #000;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  padding-top: 13px;
  padding-bottom: 16px;
}

.table-items th {
  font-weight: 500;
}

.form-border {
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
}

.search-form-label {
  color: rgba(0, 0, 0, 0.6);
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

select {
  height: 56px !important;
  border-radius: 0.375rem !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
}

.wide-select-form select {
  width: 100% !important;
}

/* paginate */
.pagination {
  margin: auto;
  margin-top: 25px;
  width: fit-content;
  display: flex;
  justify-content: flex-start;
}
.pagination span {
  text-align: center;
  transition: 0.3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.pagination span:hover {
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.pagination span a:hover {
  transition: 0.3s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.page {
  padding-top: 7px;
}

.current {
  background: #273466;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  padding-top: 7px;
  color: white;
}

.pagination > span > a > svg {
  display: inline;
  margin-top: 13px;
  color: rgba(0, 0, 0, 0.6);
}

/* 詳細ページ */
.detail-title {
  height: 20px;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  color: #43425d;
}

.detail-sub-title {
  height: 15px;
  font-weight: 400;
  font-size: 15px;
  line-height: 15px;
  color: #4d4f5c;
}

.amounts-collected {
  font-weight: 700;
  font-size: 28px;
  line-height: 22px;
  color: #43425d;
}

.amounts-collected {
  font-weight: 700;
  font-size: 28px;
  line-height: 22px;
  color: #43425d;
}

.bank-account-update-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.6);
}

.bank-account-update-input {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.87);
  /* MEMO: For Delete allow in select box. For some reason, appearance-none does not work. */
  background-image: none;
}

.table-headers {
  font-weight: 700;
  font-size: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  background-color: #f5f6fa;
}

.club-expenses-table-tabs {
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: rgba(0, 0, 0, 0.6);
}

.active-club-expenses-table-tab {
  color: #2196f3;
}

.active-club-expenses-table-line {
  background-color: #2196f3;
}

input:checked + .variation_label {
  background: linear-gradient(92.55deg, #fc6767 0%, #f84073 100%);
  color: #ffffff;
  border-style: none;
}

.carts_number {
  color: #e83e6d;
  font-family: "Noto Sans JP";
}

.container-box-shadow {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.variation-label-width {
  min-width: 50px;
}

.bg-gray-header {
  background: #fafafa;
}

.bg-gray-table {
  background-color: #f5f6fa;
}

.splide__pagination__page.is-active {
  background: var(--gray-900, #111928) !important;
}

/* 顧問画面 */
/* サインイン画面 */
.left_icon {
  max-width: 360px;
  box-sizing: content-box;
  margin-inline: auto;
  padding: 348px 48px 0 48px;
}

.menu__selected {
  display: block;
  color: #fff;
  background-color: #1f2a52;
  padding: 16px 24px 16px 20px;
  border-left: 4px solid #e73e6d;
}
.menu__unselected {
  display: block;
  color: #fff;
  padding: 16px 24px;
}
.children_menu__unselected {
  display: block;
  color: #fff;
  padding: 16px 34px;
}
.sales_application_menu {
  display: flex;
  justify-content: space-between;
  color: #fff;
  background-color: #1f2a52;
  padding: 16px 24px;
}
.sales_application_menu_unselected {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 16px 24px;
}
.sales_application_children_menu_selected {
  display: block;
  color: #fff;
  background-color: #1f2a52;
  padding: 16px 24px 16px 30px;
  border-left: 4px solid #e73e6d;
}
.sales_application_children_menu_unselected {
  display: block;
  color: #fff;
  background-color: #1f2a52;
  padding: 16px 34px;
}
.submenu__unselected {
  display: block;
  color: #fff;
  padding: 16px 34px;
}
.donations_application_menu {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 16px 24px;
}
.donations_application_menu_unselected {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 16px 24px;
}
.donations_application_submenu_selected {
  display: block;
  color: #fff;
  background-color: #1f2a52;
  padding: 16px 24px 16px 30px;
  border-left: 4px solid #e73e6d;
}
.donations_application_submenu_unselected {
  display: block;
  color: #fff;
  padding: 16px 34px;
}
.donation_user_notice {
  background-color: rgba(222, 247, 236, 1);
  color: rgba(4, 108, 78, 1);
}
.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "＞";
  padding: 0 8px;
  color: #6c757d;
  font-weight: bold;
}

.breadcrumb-item{
  color: #6c757d;
}

.coach-container {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.chevron-title {
  display: flex;
  align-items: center;
  column-gap: 24px;
  height: 100%;
}
.heading-title {
  font-size: 24px;
  font-weight: 400;
}
/* 備品管理index */
.fixture-not-found {
  height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 24px;
  align-items: center;
}
.fixture-not-text {
  font-size: 24px;
  font-weight: 400;
}
.fixture-button {
  background-color: #1976D2;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.46px;
  padding: 8px 22px;
  border-radius: 4px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
}
/* 備品管理show */
.fixture-image {
  width: 80px;
  height: 80px;
}
.fixture-detail {
  display: flex;
  justify-content: space-between;
}
.fixture-detail-table {
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
}
.fixture-title {
  display: flex;
  align-items: center;
  column-gap: 8px;
  border-bottom: 1px solid #F1F1F3;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.fixture-name {
  color: #43425D;
  font-size: 20px;
  font-weight: 400;
}
.fixture-images {
  display: flex;
  align-items: center;
  column-gap: 16px;
  background-color: #fff;
  border-radius: 8px;
}
.fixture-images-item {
  background-color: #F3F4F6;
  border-radius: 8px;
  padding: 10px;
}
.fixture-file-label {
  height: 55px;
  padding: 16px;
  background-color: #F5F6FA;
}
.fixture-container {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
}
.fixture-memo-contents {
  max-width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  overflow-wrap:break-word;
}
.fixture_title-tab {
  background-color: #DEF7EC;
  border-radius: 2px;
  color: #03543F;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  padding: 2px 10px;
}
/* 会計報告show */
.disbursement_title-tab {
  background-color: #E1EFFE;
  border-radius: 2px;
  color: #1E429F;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  padding: 2px 10px;
}
/* 会計報告form */
.disbursement_check {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.img-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 228px;
  border-radius: 8px;
  border: 2px dashed #e5e7eb;
  background-color: #f9fafb;
}
.img-contents {
  display: flex;
  column-gap: 16px;
}
.img-items {
  position: relative;
  border-radius: 8px;
  background: #f3f4f6;
  padding: 16px;
  margin-bottom: 4px;
}
.img-delete {
  position: absolute;
  top: 110px;
  left: 10px;
}
.img-text {
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
}
.input-image {
  width: 112px;
  height: 112px;
}
.hidden {
  display: none;
}
.tab.active {
  background-color: #F9FAFB;
}
/* 事業者一覧 */
.application {
  color: #1890FF;
}

.application::before {
  display: inline-block;
	margin: 0 8px 1px 8px;
	width: 10px;
	height: 10px;
  content: '';
	border-radius: 100%;
	background:#1890FF;
}

.applied {
  color: #52C41A;
}

.applied::before {
  display: inline-block;
	margin: 0 8px 1px 8px;
	width: 10px;
	height: 10px;
  content: '';
	border-radius: 100%;
	background:#52C41A;
}

/* 事業者詳細 */
.coach_vendor_form {
  display: flex;
  justify-content: center;
  column-gap: 16px;
}

.vendor-sign_in {
  position: absolute;
  width: 480px;
  height: 450px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.vendor_devise-title {
  color: #43425D;
  font-size: 24px;
  padding-bottom: 32px;
}

.vendor_devise-label {
  position: absolute;
  top: 12px;
  left: 15px;
  padding-inline: 4px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.60);
}

.vendor_devise-input {
  width: 100%;
  border-radius: 4px;
  border-color: #0000003B;
  padding: 16px 8px;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.60);
}

.vendor_devise-input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
}

.vendor_password-reset {
  position: absolute;
  width: 480px;
  height: 300px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.vendor_password_reset-completed {
  position: absolute;
  width: 480px;
  height: 170px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.gray-button {
  height: 42px;
  border-radius: 4px;
  background: #0000001F;
  color: #00000042;
}

.order_select > select {
  width: 100%;
  height: auto !important;
  background-color: #F9FAFB;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px !important;
}

.order_select > input {
  width: 100%;
  height: auto !important;
  background-color: #F9FAFB;
  border: 1px solid rgba(0, 0, 0, 0.23);
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px !important;
}

.blue-status {
  color: #1890FF;
}

.blue-status::before {
  display: inline-block;
  margin: 0 8px 1px 8px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 100%;
  background:#1890FF;
}

.red-status {
  color: #E02424;
}

.red-status::before {
  display: inline-block;
  margin: 0 8px 1px 8px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 100%;
  background:#E02424;
}

.purchase_amount-tag {
  background: #E1EFFE;
  color: #1C64F2;
  border-radius: 4px;
}

.search-form-placeholder::placeholder {
  font-size: 9px;
}

.search-form-placeholder {
  border-radius: 6px;
  font-size: 9px;
}