@charset "UTF-8";
/* mono tone */

/*--------------------------------------------------------------------/
	contact
/--------------------------------------------------------------------*/
.contact-read {
  background: #eff5ff;
  margin-bottom: 4rem;
}

.contact-read .txt {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.contact-read .txt p {
  padding: 2rem 1rem;
  background: #fff;
  display: inline-block;
  position: relative;
}

.contact-split {
  padding-bottom: 5rem;
  border-bottom: 1px solid #ddd;
}

[class*="contact-box"] {
  padding: 1rem 1.25rem .8rem;
  position: relative;
  border: 1px solid #ddd;
}

[class*="contact-box"] h3 {
  display: inline-block;
  font-family: 'Lora', serif;
  text-align: center;
  font-weight: normal;
  position: relative;
  padding-left: 1.5rem;
  border-bottom: 1px solid #659bea;
  margin-bottom: .8rem;
  font-size: calc(1rem + 8 * (100vw - 320px) / 477);
}

[class*="contact-box"] h3:before {
  position: absolute;
  font-family: icomoon;
  line-height: 1;
  left: 0;
  color: #659bea;
}

.contact-box__tel h3 {
  padding-left: 1.5rem;
}

.contact-box__tel h3:before {
  content: "\e904";
  top: .5rem;
  font-size: 1.1em;
}

.contact-box__tel .catch {
  width: 80%;
  max-width: 240px;
}

.contact-box__tel div {
  display: inline-block;
}

.contact-box__mail h3 {
  padding-left: 2rem;
}

.contact-box__mail h3:before {
  content: "\e903";
  font-size: 1.5em;
  top: .2rem;
}

.contact-tel, .contact-fax {
  font-weight: normal;
  line-height: 1.2;
  font-family: Arial, sans-serif;
}

.contact-tel span, .contact-fax span {
  font-size: calc(1.5rem + 10 * (100vw - 320px) / 477);
}

.contact-step {
  margin-bottom: 1.5rem;
}

.contact-step ol {
  margin-top: 3rem;
  counter-reset: contact-number;
}

.contact-step ol li {
  padding: 2.5rem 1.2rem 1.5rem;
  color: #000;
  position: relative;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 1.13rem;
}

.contact-step ol li:before {
  position: absolute;
  font-family: icomoon;
  background: #fff;
  display: inline;
  line-height: 1;
  font-size: 3rem;
  z-index: 1;
  top: -1.5rem;
  left: calc(50% - 1.5rem);
}

.contact-step ol li:nth-of-type(1):before {
  content: "\e90b";
}

.contact-step ol li:nth-of-type(2):before {
  content: "\e90c";
}

.contact-step ol li:nth-of-type(3):before {
  content: "\e90d";
}

.contact-step ol li.now {
  border-color: #659bea;
  color: #659bea;
}

.contact-step ol li.now:before {
  color: #659bea;
}

.contact-step ol li.before {
  border-color: #ddd;
  color: #ddd;
}

.contact-step ol li.before:before {
  color: #ddd;
}

.contact-privacy {
  padding: 1.5rem;
  border: 1px solid #ddd;
  font-size: .85em;
}

.contact-table {
  width: 100%;
  margin-bottom: 2rem;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.contact-table tr:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.contact-table th, .contact-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.88rem;
}

.contact-table th {
  background: #fcfcfc;
  vertical-align: center;
}

.contact-table th span {
  color: #df2f2f;
  margin-left: .5rem;
}

.contact-table textarea {
  width: 100% !important;
  height: 10em !important;
}

.imeon {
  ime-mode: active;
}

.imeoff {
  ime-mode: disabled;
}

input,
textarea,
select {
  margin: 3px 0;
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  line-height: 1.5;
}

input.sub-btn {
  max-width: 240px;
  margin: 0 auto;
  display: block;
  margin-top: 1rem;
  padding: .5rem 2rem;
  background: #659bea;
  color: #fff;
  border: solid 1px #659bea;
  transition: 0.3s ease all;
  cursor: pointer;
  font-size: 1rem;
}

input.sub-btn:hover {
  background: #fff;
  color: #659bea;
}

input.back-btn {
  max-width: 240px;
  margin: 0 auto;
  display: block;
  margin-top: 1rem;
  padding: .5rem 2rem;
  background: #fff;
  color: #659bea;
  border: solid 1px #659bea;
  transition: 0.3s ease all;
  cursor: pointer;
  font-size: 1rem;
}

input.back-btn:hover {
  background: #659bea;
  color: #fff;
}

input.check-btn {
  max-width: 360px;
  margin: 0 auto;
  display: block;
  margin-top: 1rem;
  padding: .5rem 2rem;
  background: #333;
  color: #fff;
  border: solid 1px #333;
  transition: 0.3s ease all;
  cursor: pointer;
  font-size: 1rem;
}

input.check-btn:hover {
  background: #659bea;
  border: solid 1px #659bea;
}

input.check-btn[type="button"], input.check-btn[type="submit"] {
  -webkit-appearance: none;
}

.radio, .checkbox {
  transition: 0.3s ease all;
  position: relative;
  padding-bottom: .3rem;
  margin-right: .5rem !important;
  background-color: transparent;
  vertical-align: top;
  cursor: pointer !important;
}

label.radio, label.checkbox {
  display: block;
}

.no-csstransforms input[type=radio], .no-csstransforms input[type=checkbox] {
  display: inline;
}

.no-csstransforms .radio, .no-csstransforms .checkbox {
  display: none;
}

@media print, screen and (min-width: 376px) {
  /*====================================================================/
	/*------------------iPhone 以上----------------
	/====================================================================*/
  html {
    width: 100%;
  }
}

@media print, screen and (min-width: 481px) {
  /*====================================================================/
	/*------------------タブレットスタイル----------------
	/====================================================================*/
  html {
    width: 100%;
  }
  .contact-step ol {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .contact-step ol > * {
    width: 32.08%;
  }
  input.middle {
    width: 70%;
  }
  input.short {
    width: 40%;
  }
}

@media print, screen and (min-width: 797px) {
  /*====================================================================/
	/*-------------------小さいPCスタイル----------------
	/====================================================================*/
  html {
    width: 100%;
  }
  .contact-read {
    margin-bottom: 5rem;
  }
  .contact-read .txt p:before {
    position: absolute;
    left: -50px;
    top: 0;
    content: "";
    height: 100%;
    border-style: solid;
    border-width: 60px 50px 60px 0;
    border-color: transparent #fff transparent transparent;
    z-index: 1;
  }
  .contact-read .txt p:after {
    position: absolute;
    right: -50px;
    top: 0;
    content: "";
    height: 100%;
    border-style: solid;
    border-width: 60px 0 60px 50px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
  }
  [class*="contact-box"] h3 {
    font-size: 1.25rem;
  }
  .contact-tel span, .contact-fax span {
    font-size: 1.63rem;
  }
  .contact-step ol {
    margin-top: 4rem;
  }
  .contact-table th {
    width: 30%;
  }
  .contact-table td {
    width: auto;
    border-right: 1px solid #ddd;
  }
}

@media print, screen and (min-width: 1257px) {
  /*====================================================================/
	/*-------------------PCスタイル-------------------
	/====================================================================*/
  html {
    width: 100%;
  }
  [class*="contact-box"] h3 {
    font-size: 1.25rem;
  }
  .contact-tel span, .contact-fax span {
    font-size: 1.88rem;
  }
}

@media print, screen and (min-width: 1920px) {
  /*====================================================================/
	/*-------------------full PCスタイル-------------------
	/====================================================================*/
  html {
    width: 100%;
  }
}

@media screen and (max-width: 1256px) {
  /*====================================================================/
	/*------------------PC以下---------
	/====================================================================*/
  html {
    width: 100%;
  }
}

@media screen and (max-width: 796px) {
  /*====================================================================/
	/*------------------スマホタブレット共通スタイル---------
	/====================================================================*/
  html {
    width: 100%;
  }
  .contact-privacy {
    max-height: 250px;
    overflow-y: scroll;
  }
  .contact-table th, .contact-table td {
    display: block;
    border-right: 1px solid #ddd;
  }
}

@media screen and (max-width: 480px) {
  /*====================================================================/
	/*------------------スマホのみスタイル----------------
	/====================================================================*/
  html {
    width: 100%;
  }
  .contact-step ol li {
    padding: 2rem 1.2rem 1rem;
  }
  .contact-step ol li:not(:last-child) {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 375px) {
  /*====================================================================/
	/*------------------iPhone 以下----------------
	/====================================================================*/
  html {
    width: 100%;
  }
}