@charset "UTF-8";

/*-----------------------------------

	reset(form用)

-----------------------------------*/
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}
textarea {
  resize: vertical;
}
input[type='checkbox'],
input[type='radio'] {
  display: none;
}
input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}

/*-----------------------------------

	headline

-----------------------------------*/
#headline h1::before {
    content: "Contact";
}

/*-----------------------------------

	contents

-----------------------------------*/
#contents section {
    padding-bottom: 100px;
}
#contents section .contents_inner {
    max-width: 880px;
}
#contents h2 {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin-bottom: 40px;
}
#contents h2 span {
    display: block;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.04em;
    color: #088b37;
    margin-top: 15px;
}
#contents h3 {
    font-size: 20px;
    font-weight: 500;
    padding-left: 12px;
    line-height: 1;
    border-left: 3px solid #088b37;
    margin-bottom: 20px;
}
#contents table {
    border-top: 1px solid #e7e7e7;
    width: 100%;
}
#contents table tr {
    border-bottom: 1px solid #e7e7e7;
}
#contents table th {
    text-align: left;
    font-weight: 500;
    padding: 25px 15px;
    width: 265px;
    vertical-align: top;
}
#contents table th span {
    color: #e53030;
    margin-left: 10px;
}
#contents table td {
    vertical-align: middle;
    padding: 25px 15px;
    width: calc(100% - 265px);
}
@media screen and (max-width: 840px) {
    #contents table th {
        display: block;
        padding: 10px 10px 0 10px;
        width: 100%;
    }
    #contents table td {
        display: block;
        padding: 0 10px 10px 10px;
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    #contents section {
        padding-bottom: 60px;
    }
    #contents h2 {
        font-size: 21px;
        margin-bottom: 30px;
    }
    #contents h2 span {
        font-size: 12px;
        margin-top: 10px;
    }
    #contents h3 {
        font-size: 18px;
    }
}

/*-----------------------------------

	form_block

-----------------------------------*/
#form_block .attention {
    margin-bottom: 60px;
}
#form_block .attention .ttl {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin-bottom: 40px;
}
#form_block .attention ul {
    border: 1px solid #e7e7e7;
    padding: 40px;
}
#form_block .attention ul li {
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}
#form_block .attention ul li:not(:last-child) {
    margin-bottom: 10px;
}
#form_block .attention ul li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #088b37;
    position: absolute;
    top: 10px;
    left: 0;
}
#form_block table {
    margin-bottom: 60px;
}
#form_block input {
    border: 1px solid #d2d1d1;
    line-height: 1;
    padding: 10px;
}
#form_block select {
    border: 1px solid #d2d1d1;
    line-height: 1;
    padding: 10px;
    background: url(../img/contact/select_arrow.png) no-repeat right 20px center;
    background-size: 10px 6px;
}
#form_block textarea {
    border: 1px solid #d2d1d1;
    line-height: 1;
    padding: 10px;
    width: 100%;
    height: 150px;
}
#form_block .w420 {
    max-width: 420px;
    width: 100%;
}
#form_block .w320 {
    max-width: 320px;
    width: 100%;
}
#form_block .w240 {
    max-width: 240px;
    width: 100%;
}
#form_block input[type="email"]:first-child {
    margin-bottom: 10px;
    display: block;
}
#form_block table td p {
    font-size: 14px;
    color: #6f6e6e;
}
#form_block table ul {
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
#form_block table ul li {
    margin-right: 30px;
    line-height: 0;
}
label.reply {
    position: relative;
    cursor: pointer;
    padding-left: 30px;
    line-height: 20px;
}
label.reply::before,
label.reply::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}
label.reply::before {
    background-color: #fff;
    border: 1px solid #d2d1d1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    left: 0;
}
label.reply::after {
    background-color: #e53030;
    border-radius: 50%;
    opacity: 0;
    width: 14px;
    height: 14px;
    left: 3px;
}
input:checked + label.reply::after {
    opacity: 1;
}
.visually-hidden {
    position: absolute;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
}
#form_block .btn_wrap {
    width: 100%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#form_block .btn_wrap input {
    display: block;
    width: 240px;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    padding: 20px 0;
    border: none;
}
#form_block .btn_wrap .confirm,
#form_block .btn_wrap .submit {
    background: #088b37;
    color: #FFF;
}
#form_block .btn_wrap .back {
    background: #d2d1d1;
    color: #000;
    margin-right: 20px;
}
@media screen and (max-width: 640px) {
    #form_block .attention {
        margin-bottom: 40px;
    }
    #form_block .attention .ttl {
        font-size: 21px;
        margin-bottom: 30px;
    }
    #form_block .attention ul {
        padding: 20px;
    }
    #form_block .attention ul li {
        padding-left: 12px;
    }
    #form_block .attention ul li::before {
        width: 4px;
        height: 4px;
        top: 9px;
    }
    #form_block table {
        margin-bottom: 40px;
    }
    #form_block .w420 {
        max-width: none;
        width: 100%;
    }
    #form_block .w320 {
        max-width: none;
        width: 100%;
    }
    #form_block .w240 {
        max-width: none;
        width: 100%;
    }
    #form_block .btn_wrap {
        -webkit-box-orient: vertical;
      	-webkit-box-direction: normal;
      	-ms-flex-direction: column;
      	flex-direction: column;
        -webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }
    #form_block .btn_wrap .back {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

#form_block .alert {
  display: block;
  background: rgba(255, 0, 0, 0.05);
  color: crimson;
  text-align: center;
  padding: 1em;
  margin-bottom: 60px;
  border: 1px solid crimson;
}
#form_block table td p.error {
  color: crimson;
  font-size: 0.8em;
}