@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++
   File: contact.css
   Update: 2026-03-23
   (c)kobako design
++++++++++++++++++++++++++++++++++++++ */



/* ////////////////////////////////////////////////////////////////////////

   PC

//////////////////////////////////////////////////////////////////////// */

/* ====================================================
		Common
==================================================== */
/* -------------------------------
		Lead Text
------------------------------- */
.leadText {
  padding-bottom: 70px;
}


/* ====================================================
		Mail Form
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#mail-form {
}
#mail-form dl {
  border-bottom: 1px solid #dfdede;
}
#mail-form dl dt,
#mail-form dl dd {
  font-size: 1.5rem;
  border-top: 1px solid #dfdede;
}
#mail-form dl dt {
  width: calc(30% - 6%);
  background: #f6f7f8;
  align-content: flex-start;
  align-items: center;
  padding: 30px 3%;
}
#mail-form dl dd {
  width: calc(70% - 6%);
  padding: 30px 3%;
}

/* -------------------------------
		Must
------------------------------- */
#mail-form .must {
  color: #fff;
  font-size: 1rem;
  background: #de3e21;
  border-radius: 100px;
  padding: 2px 10px;
}

/* -------------------------------
		Radio Button
------------------------------- */
#mail-form .radio_button {
  width: calc(70% - 60px);
  padding: 20px 30px;
}

/* Label */
#mail-form .radio_button label {
  cursor: pointer;
  position: relative;
}

/* Button */
#mail-form .radio_button input[type="radio"] {
  outline: none;
  position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
/*ここからイジマ編集*/
#mail-form .radio_button .wpcf7-form-control-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#mail-form .radio_button .wpcf7-list-item {
  width: auto;
  margin-right: 60px;
  padding: 10px 0;
  display: inline-block;
  overflow:hidden;
}
#mail-form .radio_button .wpcf7-list-item label span {

}
#mail-form .radio_button label input[type="radio"] + span {
  position: relative;
  padding: 0 0 0 34px;
}
#mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::before,
#mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::after {
  content: '';
	position: absolute;
  box-sizing: border-box;
	top: 50%;
	left: 0;
	display: inline-block;
  transform: translateY(-50%);
}
#mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::before {
  width: 26px;
  height: 26px;
  background: #f6f7f8;
  border-radius: 26px;
  opacity: 1;
	z-index: 0;
}
#mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::after {
  width: 14px;
  height: 14px;
	background: #de3e21;
  border-radius: 26px;
  transition: all 0.3s ease-in-out;
  left: 6px;
  opacity: 0;
}
#mail-form .radio_button .wpcf7-list-item label input[type="radio"]:checked + span::after {
  opacity: 1;
}
/*ここまでイジマ編集*/

/* -------------------------------
		Text Input
------------------------------- */
#mail-form textarea,
#mail-form input[type="tel"],
#mail-form input[type="email"], 
#mail-form input[type="text"] {
  width: 100%;
  font-size: 1.5rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border: none;
  padding: 0;
}
#mail-form input::placeholder,
#mail-form textarea::placeholder {
  color: #262423;
  opacity: .2;
}

/* -------------------------------
		Text Area
------------------------------- */
#mail-form textarea {
	min-height: 100px;
	resize: vertical;
  display: block;
}


/* ====================================================
		Privacy
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#mail-form #privacy {
  padding-top: 90px;
}
#mail-form #privacy div {
  max-width: calc(900px - 80px);
  height: calc(360px - 80px);
  background: #f6f7f8;
  border: 1px solid #dfdede;
  margin: 0 auto 40px;
  padding: 40px;
  overflow-y: scroll;
}

/* -------------------------------
		Title
------------------------------- */
#mail-form #privacy h2 {
  font-size: 2rem;
  font-weight: 500;
  padding-bottom: 20px;
}
#mail-form #privacy h3 {
  font-size: 1.4rem;
  font-weight: 500;
  padding-bottom: 5px;
}

/* -------------------------------
		Text
------------------------------- */
#mail-form #privacy p {
  font-size: 1.5rem;
  letter-spacing: 0;
  padding-bottom: 10px;
}
#mail-form #privacy section {
  padding-top: 25px;
}
#mail-form #privacy section p {
  font-size: 1.4rem;
  padding-bottom: 0;
}
#mail-form #privacy section ul {
  padding-top: 10px;
}
#mail-form #privacy section ul li {
  font-size: 1.4rem;
  letter-spacing: 0;
  position: relative;
  padding-left: 10px;
}
#mail-form #privacy section ul li::after {
  content: '';
  width: 4px;
  height: 4px;
  background: #262423;
  border-radius: 10px;
  position: absolute;
  top: .8em;
  left: 0;
  display: block;
}

/* -------------------------------
		Agree
------------------------------- */
#mail-form .agree_button {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#mail-form .agree_button label {
  font-size: 1.4rem;
  cursor: pointer;
  position: relative;
}

/* Button */
#mail-form .agree_button label input[type="checkbox"] {
  outline: none;
  position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#mail-form .agree_button label span {
}
#mail-form .agree_button label input[type="checkbox"] + span {
  position: relative;
  padding: 0 0 0 30px;
}
#mail-form .agree_button label input[type="checkbox"] + span::before,
#mail-form .agree_button label input[type="checkbox"] + span::after {
  content: '';
	position: absolute;
  box-sizing: border-box;
	top: 50%;
	left: 0;
	display: inline-block;
  transform: translateY(-50%);
}
#mail-form .agree_button label input[type="checkbox"] + span::before {
  width: 18px;
  height: 18px;
  border: 1px solid #262423;
  opacity: 1;
	z-index: 0;
}
#mail-form .agree_button label input[type="checkbox"] + span::after {
  width: 12px;
  height: 12px;
	background: #262423;
  transition: all 0.3s ease-in-out;
  left: 3px;
  opacity: 0;
}
#mail-form .agree_button label input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

/* Must */
#mail-form .agree_button .must {
  margin-left: 10px;
}


/* ====================================================
		Send Button
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#submitButtonBox {
  text-align: center;
  padding: 80px 0 0 0;
}

/* -------------------------------
		Button
------------------------------- */
#submitButtonBox input {
  width: auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: .05em;
  border-radius: 100px;
  border: none;
  outline: none;
  appearance: none;
  display: inline-block;
  transition: .3s;
  position: relative;
  cursor: pointer;
  margin: 0 auto;
}

/* Hover */
#submitButtonBox input:hover {
  opacity: 1;
}

/* -------------------------------
		Submit Button
------------------------------- */
#submitButtonBox .submitButton {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  background: #182a56;
  padding: 30px 140px;
}
#submitButtonBox .submitButton:hover {
  background: #fdd000;
}

/* -------------------------------
		Cancel Button
------------------------------- */
#submitButtonBox #cancelButton {
  color: #262423;
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
  background: #f6f7f8;
  padding: 15px 20px;
  margin-top: 40px;
}
#submitButtonBox #cancelButton:hover {
  opacity: .5;
}

/* -------------------------------
		WP plugin Reset
------------------------------- */
#contents .wpcf7-spinner {
  display: none;
}


/* ====================================================
		Thanks
==================================================== */
/* -------------------------------
		Button
------------------------------- */
#contents .btn_top {
  padding-top: 30px;
}
#contents .btn_top a {
  color: #de3e21;
  position: relative;
}
#contents .btn_top a::before {
  content: '';
  width: 100%;
  height: 1px;
  background: #de3e21;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  transition: .3s;
}

/* Hover */
#contents .btn_top a:hover {
  opacity: 1;
}
#contents .btn_top a:hover::before {
  opacity: 0;
}



/* ////////////////////////////////////////////////////////////////////////

   TABLET

//////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 897px) and (max-width: 1299px) {
}



/* ////////////////////////////////////////////////////////////////////////

   SMART PHONE

//////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 896px) {
  
  /* ====================================================
      Common
  ==================================================== */
  /* -------------------------------
      Lead Text
  ------------------------------- */
  .leadText {
    padding-bottom: 40px;
  }
  
  
  /* ====================================================
      Mail Form
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #mail-form dl {
    display: block;
  }
  #mail-form dl dt,
  #mail-form dl dd {
    font-size: 1.3rem;
  }
  #mail-form dl dt {
    width: calc(100% - 8%);
    padding: 6px 4%;
  }
  #mail-form dl dd {
    width: calc(100% - 20px);
    padding: 10px 10px 20px;
  }
  
  /* -------------------------------
      Must
  ------------------------------- */
  #mail-form .must {
    font-size: .9rem;
    padding: 2px 5px;
    margin-left: 10px;
  }
  
  /* -------------------------------
      Radio Button
  ------------------------------- */
/*ここからイジマ編集*/
  #mail-form .radio_button {
    width: calc(100% - 20px);
    padding: 10px 10px 25px;
  }
  
  /* Button */
  #mail-form .radio_button .wpcf7-form-control-wrap {
    display: block;
  }
  #mail-form .radio_button .wpcf7-list-item {
    width: 100%;
    padding: 5px 0;
  }
  #mail-form .radio_button label input[type="radio"] + span {
    padding: 0 0 0 28px;
  }
  #mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::before {
    width: 20px;
    height: 20px;
  }
  #mail-form .radio_button .wpcf7-list-item label input[type="radio"] + span::after {
    width: 10px;
    height: 10px;
    left: 5px;
  }
 /*ここまでイジマ編集*/

  /* -------------------------------
      Text Input
  ------------------------------- */
  #mail-form textarea,
  #mail-form input[type="tel"],
  #mail-form input[type="email"], 
  #mail-form input[type="text"] {
    width: 100%;
    font-size: 1.3rem;
    padding: 0 0 10px;
  }
  
  
  /* ====================================================
      Privacy
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #mail-form #privacy {
    padding-top: 60px;
  }
  #mail-form #privacy div {
    max-width: calc(100% - 40px);
    height: calc(360px - 40px);
    margin: 0 auto 20px;
    padding: 20px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #mail-form #privacy h2 {
    font-size: 1.5rem;
    padding: 10px 0 25px;
  }
  #mail-form #privacy h3 {
    font-size: 1.2rem;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #mail-form #privacy p {
    padding-bottom: 0;
  }
  #mail-form #privacy p,
  #mail-form #privacy section p {
    font-size: 1.2rem;
  }
  #mail-form #privacy section {
    padding-top: 20px;
  }
  #mail-form #privacy section ul li {
    font-size: 1.2rem;
    padding-left: 8px;
  }
  #mail-form #privacy section ul li::after {
    width: 3px;
    height: 3px;
  }
  
  /* -------------------------------
      Agree
  ------------------------------- */
  #mail-form .agree_button label {
    font-size: 1.1rem;
  }
  #mail-form .agree_button label input[type="checkbox"] + span {
    padding: 0 0 0 20px;
  }
  #mail-form .agree_button label input[type="checkbox"] + span::before {
    width: 14px;
    height: 14px;
  }
  #mail-form .agree_button label input[type="checkbox"] + span::after {
    width: 8px;
    height: 8px;
    left: 3px;
  }
  
  /* Must */
  #mail-form .agree_button .must {
    margin-left: 6px;
  }
  
  
  /* ====================================================
      Send Button
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #submitButtonBox {
    padding: 40px 0 0 0;
  }
  
  /* -------------------------------
      Submit Button
  ------------------------------- */
  #submitButtonBox .submitButton {
    font-size: 1.3rem;
    padding: 15px 50px;
  }
  
  /* -------------------------------
      Cancel Button
  ------------------------------- */
  #submitButtonBox #cancelButton {
    font-size: 1.1rem;
    padding: 10px 0;
    margin-top: 20px;
  }
  
  
}