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


#contact-read { padding-bottom: 3rem; }
#contact-read p strong { font-weight: normal; color: #C00; }
#form-column { margin-bottom: 3rem; }
#privacy { }
#privacy h1 { color: #89C7CC; }
#privacy h1::after { background: #89C7CC; }
#agree-column { background: #FDD; }
.form-box {  }
.form-box dl { padding: .8rem 0; border-bottom: dotted 1px #999; display: flex; align-items: center; justify-content: space-between; position: relative; }
.form-box dl:nth-last-of-type(1) { border-bottom: none; }
.form-box dl dt { line-height: 1.3; width: 9rem; padding-left: 1em; }
.form-box dl dt.align-top { align-self: flex-start; }
.form-box dl dd { line-height: 1.3; width: calc(100% - 11rem); min-height: 1.2rem; }
.form-box dl dt strong { font-weight: normal; color: #C00; position: absolute; left: 0; }
.form-box dl dd strong { font-weight: normal; padding: 0 .5em; }
.form-box dl dd strong.first-text { padding-left: 0; }
.form-box dl dd i { font-size: 93%; line-height: 1.3; font-style: normal; color: #C00; width: 100%; padding-top: .4em; display: block; }
.form-box dl dd ul { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.form-box dl dd ul li { margin-right: .5em; }
.form-box dl dd ul.radio-list li { width: 32%; }
.form-box dl dd ul li:last-child { margin-right: 0; }

/* クライアントチェック用
.form-box dl dd i { display: none; }
クライアントチェック用 */

.form-box input, .form-box textarea { font-size: 100%; line-height: 1.2; color: #333; margin: 0; padding: .4em .5em; border: solid 1px #CCC; }
.form-box input.text-minimum { width: 4em; }
.form-box input.text-short { width: 12em; margin-right: .5em; }
.form-box input.text-middle { width: 24em; }
.form-box input.text-long { width: min(80%,36em); max-width: calc(100% - 1em); }
.form-box input.text-max, .form-box textarea.text-max { width: calc(100% - 1em); }

.form-box input::placeholder { font-size: .9em; color: #AAA; }

.visually-hidden { width: 1px; height: 1px; border: 0; margin: -1px; padding: 0; position: absolute; white-space: nowrap; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.form-box label { line-height: 1.2; text-align: center; color: #666; padding: .4em .6em; border: solid 1px #CCC; border-radius: .5em; background: #FFF; display: block; cursor: pointer; transition: .3s; }
.form-box input[type="checkbox"]:checked + label.contact-check, .form-box input[type="radio"]:checked + label.contact-radio { color: #FFF; border-color: #469; background: #469; }
.form-box .select-wrap { padding-bottom: .2em; position: relative; }
.form-box .select-wrap::after { content:""; width: 0; height: 0; border-style: solid; border-width: .6em .4em 0 .4em; border-color: #469 transparent transparent transparent; display: block; position:absolute; top: 50%; right: .5em; transform: translateY(-60%); pointer-events: none; }
.form-box .select-wrap select { font-size: 100%; line-height: 1.2; color: #333; width: 100%; padding: .4em .5em; border: solid 1px #CCC; border-radius: .5em; background: #FFF; -webkit-appearance: none; appearance: none; }
.form-box .basic-select { width: 12em; }
.form-box .date-select { width: 4em; display: inline-block; }

.form-box dl#address-list dd ul li { width: 100%; margin: 0 0 .6em 0; display: flex; flex-wrap: wrap; align-items: center; }
.form-box dl#address-list dd ul li:last-child { margin-bottom: 0; }
.form-box dl#address-list dd ul li h2 { width: 5em; }

#privacy div { height: 18rem; padding-right: .5em; overflow: auto; }
#privacy div p { line-height: 1.5; padding-bottom: .6em; }
#privacy div ol { padding-top: .6em; }
#privacy div ol li { line-height: 1.4; text-align: justify; padding: 0 0 .8em 1.2em; position: relative; }
#privacy div ol li:last-child { padding-bottom: 0; }
#privacy div ol li span { position: absolute; left: 0; }
#privacy div ol li ul { padding-top: .4em; }
#privacy div ol li ul li { padding: 0 0 .2em 1em; }
#privacy div ol li ul li span { color: #469; }

#agree { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
#agree p input[type="checkbox"] { display: none; }
#agree p input[type="checkbox"] + label { margin: 0 1.2em .3em 0; padding-left: 30px; position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; }
#agree p input[type="checkbox"] + label:before { content: ''; width: 16px; height: 16px; border: 1px solid #333; background: #FFF; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transition: all .12s, border-color .08s; transition: all .12s, border-color .08s; }
#agree p input[type="checkbox"]:checked + label:before { width: 10px; border-radius: 0; border-color: #C00; border-top-color: transparent; border-left-color: transparent; background: none; top: 0px; left: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#agree i { font-size: 93%; line-height: 1.3; font-style: normal; text-align: center; color: #C00; width: 100%; display: block; }
#confbtn { text-align: center; margin-top: 1em; }
#confbtn input[type="button"], #confbtn input[type="submit"], #confbtn input[type="reset"] { font-size: 105%; line-height: 1.2; text-align: center; color: #333; width: 12em; margin: 0 .5em; padding: .8em 0; border-style: none; border-radius: 1.6em; background: #FFF; box-shadow: 0 0 0 1px #999 inset; transition: .3s; cursor: pointer; }
#confbtn input[type="button"]:hover, #confbtn input[type="submit"]:hover, #confbtn input[type="reset"]:hover { color: #FFF; background: #F63; box-shadow: 0 0 0 1px #F63 inset; }

@media only screen and (max-width: 520px) and (orientation: portrait) {
  #contact { padding-top: 1rem; }
  #contact-read { padding-bottom: 1rem; }
  #form-column { margin-bottom: 2rem; }
  .form-box dl { flex-direction: column; }
  .form-box dl dt { line-height: 1.3; width: 100%; padding: 0 0 .5em 0; }
  .form-box dl dt .attention { padding: .2em 0 0 1em; }
  .form-box dl dd { width: 100%; }
  .form-box dl dt strong { padding-right: .2em; position: relative; }
  .form-box dl dd ul.radio-list { justify-content: space-between; }
  .form-box dl dd ul.radio-list li { width: 48%; margin-right: 0; }
  .form-box dl dd ul li { margin: 0 0 .5em 0; }
  .form-box dl#address-list dd ul li input.text-long { width: 65%; }
  #confbtn input[type="button"], #confbtn input[type="submit"], #confbtn input[type="reset"] { width: 42%; }
}

#finish-read { text-align: center; }