@charset "UTF-8";
.fl { display: -webkit-flex; display: -moz-flex; display: flex; }

.fl-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

/* ======================== accordionBox
======================== */
.accordionBox + .accordionBox { margin-top: 6rem; }
@media (max-width: 480px) { .accordionBox + .accordionBox { margin-top: 4rem; } }
.accordionBox .targetBtn, .accordionBox .acdInner { position: relative; }
.accordionBox .targetBtn { padding: 0 0 10px; font-size: 1.8rem; border-bottom: 1px solid #2D3132; cursor: pointer; }
.accordionBox .targetBtn span.toggle { width: 17px; height: 17px; display: block; position: absolute; top: 0; right: 10px; }
.accordionBox .targetBtn span.toggle span { width: 100%; height: 100%; display: block; position: relative; }
.accordionBox .targetBtn span.toggle span::before, .accordionBox .targetBtn span.toggle span::after { content: ''; margin: auto; width: 100%; height: 1px; background: #2D3132; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all .4s; transition: all .4s; }
.accordionBox .targetBtn span.toggle span::after { transform: rotate(90deg); }
.accordionBox .targetBtn.active span.toggle span::after { transform: rotate(180deg); }
@media (max-width: 768px) { .accordionBox .targetBtn { font-size: 1.4rem; } }
.accordionBox .acdInner { margin: 15px 0; padding: 0; display: none; }
.accordionBox .acdInner p { line-height: 2; }
.accordionBox .acdInner p a { text-decoration: underline; }
.accordionBox .acdInner table { margin: auto; width: 100%; border-collapse: collapse; }
.accordionBox .acdInner table th, .accordionBox .acdInner table td { padding: 10px 0; }
.accordionBox .acdInner table th { width: 14rem; text-align: left; }
.accordionBox .acdInner table td { width: calc(100% - 14rem); line-height: 1.8; }
@media (max-width: 480px) { .accordionBox .acdInner table th { padding: 10px 0 5px; font-size: 1.6rem; width: 100%; display: block; }
  .accordionBox .acdInner table td { padding: 0 0 10px; font-size: 1.4rem; width: 100%; display: block; } }
.accordionBox.open .acdInner { display: block; }

/* ======================== formパーツスタイル
======================== */
input, button, textarea { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], textarea { padding: 5px; outline: none; width: 100%; border: 1px solid #aaa; background: #FFFFFF; -webkit-transition: all .3s; transition: all .3s; box-sizing: border-box; }
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus { border: 1px solid #C81314; }

select { padding: 5px; border: 1px solid #aaa; background: #FFFFFF; -webkit-transition: all .3s; transition: all .3s; box-sizing: border-box; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }
select:focus { border: 1px solid #C81314; }
select option { padding: 5px; }

/* ラジオボタン */
input[type="radio"] { height: auto; visibility: hidden; }
input[type="radio"]:checked + label.radio::before { background: #fff; border: 1px solid #C81314; }
input[type="radio"]:checked + label.radio::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

label.radio { margin-right: 20px; position: relative; display: inline-block; padding: 3px 3px 3px 20px; cursor: pointer; }
label.radio::before, label.radio::after { content: ''; border-radius: 100%; position: absolute; top: 50%; -webkit-transition: all .2s; transition: all .2s; }
label.radio::before { margin-top: -7px; margin-right: 3px; width: 14px; height: 14px; background: #f3f3f3; border: 1px solid #ccc; left: 0; }
label.radio:hover::before { background: #fff; }
label.radio::after { margin-top: -5px; width: 10px; height: 10px; background: #C81314; left: 2px; opacity: 0; -webkit-transform: scale(2); transform: scale(2); }

/* チェックボックス */
input[type="checkbox"] { height: 15px; visibility: hidden; }
input[type="checkbox"]:checked + label.check::before { background: #fff; border: 1px solid #C81314; }
input[type="checkbox"]:checked + label.check::after { opacity: 1; -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); }

label.check { margin-right: 20px; position: relative; display: inline-block; padding: 3px 3px 3px 22px; cursor: pointer; -webkit-transition: all .2s; transition: all .2s; transform: translateY(0); }
label.check::before, label.check::after { content: ''; position: absolute; -webkit-transition: all .2s; transition: all .2s; }
label.check::before { margin-top: -8px; width: 14px; height: 14px; border: 1px solid #ccc; border-radius: 3px; background: #f3f3f3; top: 50%; left: 0; }
label.check:hover::before { background: #fff; }
label.check::after { margin-top: -4px; width: 8px; height: 4px; border-left: 2px solid #C81314; border-bottom: 2px solid #C81314; top: 50%; left: 3px; opacity: 0; -webkit-transform: rotate(-45deg) scale(0.5); transform: rotate(-45deg) scale(0.5); }

/* ======================== form
======================== */
#formWrap { /* 送信エリア */ }
#formWrap dl { width: 100%; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#formWrap dl + dl { margin-top: 2px; }
#formWrap dl:first-of-type { margin-top: 60px; }
#formWrap dl:last-of-type { margin-bottom: 60px; }
#formWrap dl dt { padding: 15px 10px; width: 14em; box-sizing: border-box; }
#formWrap dl dd { padding: 10px 20px; width: calc(100% - 14em); box-sizing: border-box; }
@media (max-width: 480px) { #formWrap dl + dl { margin-top: 10px; }
  #formWrap dl dt, #formWrap dl dd { padding: 5px 0; width: 100%; }
  #formWrap dl:first-of-type { margin-top: 30px; }
  #formWrap dl:last-of-type { margin-bottom: 30px; } }
#formWrap dl.name dd input, #formWrap dl.name_furi dd input, #formWrap dl.email dd input, #formWrap dl.joining dd input { width: 60%; }
@media (max-width: 480px) { #formWrap dl.name dd input, #formWrap dl.name_furi dd input, #formWrap dl.email dd input, #formWrap dl.joining dd input { width: 100%; } }
#formWrap dl.zipcode dd { align-items: center; }
#formWrap dl.zipcode dd input.zip01 { width: 90px; margin: 0 0.5em 0 0; }
@media (max-width: 480px) { #formWrap dl.zipcode dd input.zip01 { width: 3em; } }
#formWrap dl.zipcode dd input.zip02 { width: 110px; margin: 0 0 0 0.5em; }
@media (max-width: 480px) { #formWrap dl.zipcode dd input.zip02 { width: 4em; } }
#formWrap dl.zipcode dd .btnAddress { margin: 0 0 0 1em; padding: 10px; color: #FFFFFF; width: 120px; text-align: center; background: #005D33; }
#formWrap dl.zipcode dd small { margin: 5px 0 0 10px; font-size: 1.4rem; width: 100%; }
#formWrap dl.birthday dd ul li { display: -webkit-flex; display: -moz-flex; display: flex; align-items: baseline; }
#formWrap dl.birthday dd ul li select { margin-right: 0.5em; }
#formWrap dl.birthday dd ul li + li { margin-left: 1em; }
#formWrap dl.tel dd input { width: 40%; }
#formWrap dl.tel dd small { margin: auto 1em; }
@media (max-width: 480px) { #formWrap dl.tel dd input { width: 60%; }
  #formWrap dl.tel dd small { font-size: 1.2rem; } }
#formWrap ::placeholder { color: #999999; }
#formWrap .required { margin-left: 0.5em; color: #C81314; font-size: 1.4rem; font-weight: 700; }
#formWrap .sentArea { margin: 40px auto; text-align: center; }
#formWrap .sentArea .formBtn { margin: auto; width: 100%; }
#formWrap .sentArea .formBtn input[type="submit"] { margin: auto; color: #FFFFFF; font-size: 2.0rem; font-weight: 600; text-align: center; width: 100%; max-width: 300px; height: 60px; background: #005D33; border-radius: 5px; box-shadow: 0 -3px 0 rgba(50, 50, 50, 0.2) inset; display: block; }
#formWrap .sentArea .btnBackBox { margin: 20px auto 0; width: 100%; }
#formWrap .sentArea .btnBackBox input[type="button"] { margin: auto; color: #696969; background: #a9a9a9; max-width: 300px; width: 100%; height: 40px; text-align: center; border-radius: 5px; box-shadow: 0 -3px 0 rgba(50, 50, 50, 0.2) inset; display: block; }