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

お問い合わせフォーム

*******************************************************************************/
:root {
  --margin-unit: .33rem;
  --base-unit1: .33rem;
  --base-unit2: .66rem;
  --base-unit3: 1rem;
}
.mx-1 {
  margin-left: var(--base-unit1) !important;
  margin-right: var(--base-unit1) !important;
}
.ms-1 {
  margin-left: var(--base-unit1) !important;
}
.me-1 {
  margin-right: var(--base-unit1) !important;
}
.mx-2 {
  margin-left: var(--base-unit2) !important;
  margin-right: var(--base-unit2) !important;
}
.ms-2 {
  margin-left: var(--base-unit2) !important;
}
.me-2 {
  margin-right: var(--base-unit2) !important;
}
.mx-3 {
  margin-left: var(--base-unit3) !important;
  margin-right: var(--base-unit3) !important;
}
.ms-3 {
  margin-left: var(--base-unit3) !important;
}
.me-3 {
  margin-right: var(--base-unit3) !important;
}
.mb-3 {
  margin-bottom: var(--base-unit3) !important;
}

.section-inquiry {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.text-start {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-end {
  text-align: right !important;
}
.sp {
  display: none;
}

.kome {
  position: relative;
  padding-left: 1em;
  display: block;
}
.kome::before {
  font-size: inherit;
  position: absolute;
  left: 0;
  content: '※';
}

.section-inquiry
{
  font-size: var(--base-unit3);
	margin-top: 1em !important;
	min-height: 480px;
	padding: 0 1em;
}

.section-inquiry > .result
{
  padding: 1.2em 0 1em 22px;
  font-size: 110%;
  font-weight: bold;
  background: url(../../../theme/images/icon-circle-arrow-white-green-14x14.png) no-repeat left center;
  line-height: 1;
  color: green;
}

.section-inquiry h3 {
  font-weight: bold;
  font-size: 1.25rem;
  padding-bottom: var(--base-unit1);
  /* border-bottom: 1px dashed green; */
}
.section-inquiry h3::before {
  content: '✒️ ';
}

.section-inquiry p {
  text-align: justify;
  line-height: 1.25;
}

.section-inquiry a {
  text-decoration: underline;
  color: royalblue;
}

/*
.form dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--base-unit3);
  line-height: 1.5;
}
.form dl > * {
  margin-bottom: .66rem;
}
.form dl > dt {
  width: calc(100% / 12 * 4)
}
.form dl > dd {
  width: calc(100% / 12 * 8);
}
*/
.form dl {
  line-height: 1.5;
  margin: 1rem 0;
}
.form dl > dt,
.form dl > dd {
  position: relative;
}
.form dl > dt {
  font-size: small;
  color: #777;
  font-weight: bold;
  padding-left: 1.25rem;
  margin-bottom: var(--base-unit1);
}
.form dl > dd {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #aaa;
}
.form dl > dd.nobd {
  margin-bottom: var(--base-unit2);
  padding-bottom: 0;
  border-bottom: none;
}

.form dt::before {
  content: '◎';
  position: absolute;
  left: 0;
}

.form input[type=text],
.form input[type=button],
.form input[type=submit],
.form input[type=reset],
.form input[type=tel],
.form input[type=password],
.form input[type="date"],
.form input[type="number"],
.form input[type="email"],
.form textarea {
  font-size: 1rem;
	font-family:inherit;
	margin: var(--margin-unit) 0;
	padding: var(--base-unit1);
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  outline: none;
}
.form input[type=button],
.form input[type=submit],
.form input[type=reset] {
  display: inline-block;
	padding: 0.5em 2em;
  border-radius: 5px !important;
  color: #333;
  appearance: none;
}

.form textarea {
  display: block;
  width: calc(100% - var(--base-unit1) * 2 - 2px);
}

.form input:valid {
  
}
.form input:invalid {
  background-color: #fcc;
  margin-bottom: calc(var(--base-unit3) * 2 + var(--base-unit1)) !important;
}
.form input:invalid + span.format-error {
  display: inline-block;
}
.form span.format-error {
  display: none;
  font-size: small;
  position: absolute;
  left: 0;
  top: calc(var(--base-unit3) + var(--base-unit1) * 3 + 5px);
  border-radius: 3px;
  background-color: red;
  color: white;
  padding: .33rem;
  font-size: .66rem;
  line-height: 1;
}

label[for="name"],
label[for="phone1"] {
  color: red;
  font-weight: bold;
}

p.command
{
	text-align: center;
}

.border {
  border: 1px dashed #aaa;
  padding: 1rem;
}

span.error
{
	display: inline-block;
	color: yellow;
	background-color: red;
	line-height: 1;
	border-radius: 3px;
	padding: 5px .5em 3px;
}

span.notice
{
	display: block;
	color: green;
	font-weight: bold;
	margin: 5px 0;
	line-height: 1.5;
	font-size: 85%;
}

br.none {
  display: none;
}