@import "tailwindcss";

@theme {
  /* custom color */
  --color-custom1-950: #000B18;
  --color-custom1-900: #001A33;
  --color-custom1-800: #003670;
  --color-custom1-700: #064A8F;
  --color-custom1-600: #0B63C7;
  --color-custom1-500: #1E7EF2;
  --color-custom1-400: #4B9BFF;
  --color-custom1-300: #7AB7FF;
  --color-custom1-200: #B0D3FF;
  --color-custom1-100: #D7EAFF;
  --color-custom1-50: #EEF6FF;

  /* brand color */
  --color-primary: var(--color-custom1-800); 
  --color-secondary: var(--color-emerald-800);

  /* interactive color */
  --color-cta-primary: var(--color-amber-500);

  /* hover memo 
  primary : custom1-700;
  secondary : emerald-700;
  cta : amber-400;
 */

 /* container */
  --container-xl: 1152px;
  --container-2xl: 1152px;

  /* font */
  --font-sans : "Noto Sans JP", Helvetica, Arial, sans-serif;
};


/* =========================================
   mailformpro custom
   breakpoint:
   - sm: 640px
   - md: 768px
========================================= */

/* -----------------------------------------
   1. フォーム全体
----------------------------------------- */
form#mailformpro {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.625;
  overflow: visible;
}

form#mailformpro dl.mailform {
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: 1px solid var(--color-custom1-300);
}

/* -----------------------------------------
   2. 項目共通
----------------------------------------- */
form#mailformpro dl.mailform dt.mfp,
form#mailformpro dl.mailform dd.mfp {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  background: transparent;
  text-align: left;
}

form#mailformpro dl.mailform dt.mfp {
  padding: 2rem 0 8px;
  border-top: none;
  font-size: 0.875rem;
  line-height: 1.625;
}

form#mailformpro dl.mailform dd.mfp {
  padding: 0 0 2rem;
  border-top: 0;
  border-bottom: 1px solid var(--color-custom1-300);
  font-size: 0.875rem;
  line-height: 1.625;
  color: inherit;
}

/* -----------------------------------------
   3. 入力欄共通
----------------------------------------- */
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
	border: none;
	border-radius: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

form#mailformpro input[type="text"],
form#mailformpro input[type="email"],
form#mailformpro input[type="tel"],
form#mailformpro input[type="number"],
form#mailformpro input[type="url"],
form#mailformpro input[type="password"],
form#mailformpro select,
form#mailformpro textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-500);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}


/* -----------------------------------------
   4. 必須ラベル
----------------------------------------- */
form#mailformpro .must {
  all: unset;
  color: #f43f5e;
}

/* -----------------------------------------
   5. ボタンエリア
----------------------------------------- */
.mfp_element_submit,.mfp_element_reset,.mfp_element_button,button.mfp_next,button.mfp_prev {
	border-radius: 0;
	padding: 0;
	border: none;
	background: none;
	text-shadow: none;
	font-size: none;
	cursor: pointer;
	outline: none;
}

.mfp_element_submit:hover,.mfp_element_reset:hover,.mfp_element_button:hover,button.mfp_next:hover,button.mfp_prev:hover {
	background: none;
	box-shadow: none;
}

#mfp_overlay_inner .mfp_buttons{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 1rem;
}


form#mailformpro .mfp_buttons {
  margin: 0;
  padding: 2rem 0 0;
  border: 0;
  background: transparent;
  font-size:90%;
}

.mfp_element_button,
form#mailformpro .mfp_buttons button,
form#mailformpro .mfp_element_submit,
form#mailformpro .mfp_buttons input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 1.25rem 0;
  border: none;
  border-radius: 6px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

#mfp_button_cancel.mfp_element_button {
  border: 1px solid var(--color-primary);
  background-color:  #fff;
  color: var(--color-primary);
}

.mfp_element_button:hover,
form#mailformpro .mfp_buttons button:hover,
form#mailformpro .mfp_buttons input[type="submit"]:hover {
  background-color: var(--color-custom1-700);
}

#mfp_button_cancel.mfp_element_button:hover {
  background-color: var(--color-custom1-700);
  color: #FFF;
}

.mfp_element_button{
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 44px;
  padding: 1.25rem 0;
  border: none;
  border-radius: 6px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.mfp_element_button:hover{
  background-color: var(--color-custom1-700);
}


/* -----------------------------------------
   6. sm 以上: 文字サイズなど見た目だけ
----------------------------------------- */
@media (min-width: 640px) {
  form#mailformpro {
    font-size: 1rem;
  }

  form#mailformpro dl.mailform dt.mfp,
  form#mailformpro dl.mailform dd.mfp {
    font-size: 1rem;
  }

  form#mailformpro .mfp_buttons {
    padding-top: 2.5rem;
  }

  form#mailformpro .mfp_buttons button,
  form#mailformpro .mfp_buttons input[type="submit"] {
    font-size: 1.25rem;
  }
}

/* -----------------------------------------
   7. md 以上: 横並びだけ
----------------------------------------- */
@media (min-width: 768px) {
  form#mailformpro dl.mailform {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: stretch;
    row-gap: 0;
  }

  form#mailformpro dl.mailform dt.mfp,
  form#mailformpro dl.mailform dd.mfp {
    align-self: stretch;
    margin: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 0;
    border-bottom: 1px solid var(--color-custom1-300);
  }

  form#mailformpro dl.mailform dt.mfp {
    grid-column: 1;
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-right: 24px;
    border-top: 0;
  }

  form#mailformpro dl.mailform dd.mfp {
    grid-column: 2;
    display: flex;
    align-items: center;
    padding-left: 24px;
    padding-right: 0;
  }

  form#mailformpro .mfp_buttons {
    display: flex;
    justify-content: center;
  }

  form#mailformpro .mfp_buttons button,
  form#mailformpro .mfp_buttons input[type="submit"] {
    max-width: 20rem;
  }
}

/* -----------------------------------------
   8. md 以上: ボタン幅制御
----------------------------------------- */
@media (min-width: 768px) {
  form#mailformpro .mfp_buttons {
    display: flex;
    justify-content: center;
  }

  form#mailformpro .mfp_buttons button,
  form#mailformpro .mfp_buttons input[type="submit"] {
    max-width: 20rem;
  }
}

div.mfp_thanks {
  padding: 0;
}

.mfp_colored {
	background-color: #FFF;
}

@import "./components.css";