@charset "UTF-8";
.form-common input, .form-common button, .form-common select, .form-common textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none;}
.form-common textarea { resize: vertical;}
.form-common input[type='radio'] { display: none;} 
input[type='submit'], input[type='button'], label, button, select { cursor: pointer;}
.form-common select::-ms-expand { display: none;}
/* header */
#page_header.form-common, #page_header.form-common { height: 105px;}
@media screen and (min-width: 768px) { 
#page_header.form-common { height: 130px;}
}
#bread_crumb { border-top: 1px solid rgba(0,0,0,0);}
/* contents area */
.form-common { background: #eee;}
.form-common h1 { font-size: 17px!important; text-align: center!important; line-height: 1.8!important;}
.form-common .post_content { max-width: 1030px; margin: auto; padding: 30px 20px 0;}
.form-common .thanks-area { max-width: 1030px; margin: 30px auto 0; padding: 30px 20px; background: #fff; border-radius: 8px}
@media screen and (min-width: 768px) {
  .form-common h1 { font-size: 28px!important; text-align: center!important; line-height: 1.5!important;}
  .form-common .post_content { padding: 60px 0;}
}
/* shanon */
.ss_contents { max-width: 1030px; margin: auto; padding: 30px 20px; background: #fff; border-radius: 8px}
.ss_contents fieldset { margin-bottom: 30px;}
.ss_rightComment { display: block; margin-top: 10px;}
.ss_bottomComment { margin-top: 5px; color: #e6342b; font-size: 12px;}
.ss_user_notnull { display: inline-block; height: 18px; line-height: 18px; margin-left: 5px; padding: 0 5px 22px 0; color: #e6342b; background: #e6342b; border-radius: 2px;}
.ss_user_notnull:after { margin-left: -1em; color: #fff; font-size: 12px; content: "必須";}
.ss_input { text-align: left;}
.ss_upComment { margin-bottom: 20px; line-height: 1.5!important}
.ss_upComment a { display: inline-block; text-decoration: underline;}
.ss_contents input[type='email'], .ss_contents input[type='text'], .ss_contents textarea { width: 100%; height: 50px; pading: 0 20px!important; border: 1px solid #dcdcdc;}
.ss_contents textarea { min-height: 200px!important;}
.ss_contents select { position: relative; width: 70%; height: 50px; padding: 0 20px; background: url("../img/common/icon-arrow-down.png") no-repeat right 10px center/13px auto; border: 1px solid #ccc;}
.ss_enquete_field:nth-of-type(8) { margin-top: 100px; text-align: center; line-height: 1.8;}
.ss_btnArea { margin-top: 60px; text-align: center;}
.ss_btnArea input[type='button'] { width: 80%; min-with: 200px; height: 50px; color: #fff; background: #000; border-radius: 3px;}
.ss_btnArea input[type='button']:hover { color: #000; background: #999;}
@media screen and (min-width: 768px) { 
  .ss_btnArea input[type='button'] { max-width: 300px;}
}
.ss_error_msg, .errorMsg { display: inline-block; margin: 0 0 10px 3px; color: #f89406; font-size: 12px;}
@media screen and (max-width: 768px) {
  .ss_contents input[type='email'], .ss_contents input[type='text'], .ss_contents select, .ss_contents textarea { margin-top: 10px;}
  .ss_upComment a { margin-top: 20px;}
}
@media screen and (min-width: 768px) { 
  .ss_contents { padding: 50px;}
  .ss_contents fieldset { display: flex; justify-content: space-between; align-items: center;}
  .ss_grid { width: 70%;}
}
/* バイトル問い合わせ・資料ダウンロード */
.baitoru.form-top { display: flex; justify-content: center; align-items: center; margin: 0 auto -30px}
.baitoru.form-top .box-text { width: fit-content; margin-right: 10px; font-size: 16px}
.baitoru.form-top .box-text span { color: #c70f0f;}
.baitoru.form-top .box-text span big { font-size:24px}
.baitoru.form-top figure { width: 200px}
@media screen and (min-width: 768px) { 
  .baitoru.form-top { margin: 0 auto -37px}
  .baitoru.form-top .box-text { font-size: 34px; margin-right: 80px}
  .baitoru.form-top .box-text span big { font-size: 60px}
  .baitoru.form-top figure { width: 250px}
}
/* 総合資料ダウンロード */
.document.all.form-top { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20px}
.document.all.form-top .box-text { width: 100%}
.document.all.form-top .box-text .ttl { margin-bottom: 10px; font-size: 17px; text-align: center; font-weight: bold; line-height: 1}
@media screen and (max-width: 768px) {
  .document.all.form-top figure { margin: 0 auto 30px}
}
@media screen and (min-width: 768px) {
  .document.all.form-top { margin-top: 50px}
  .document.all.form-top figure { width:44%; max-width: 450px}
  .document.all.form-top .box-text { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: calc(100% - 48%); font-size: 14px; line-height: 1.5}
  .document.all.form-top .box-text .ttl { width: 100%; font-size: 22px; text-align: left}
}
/* Spinner */
.ss_submit_loader { position: absolute; width: 100%; min-height: 100%!important;  top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 100;}
.spinner::before { content: ""; position: absolute; top: 67%; left: 50%; height: 100px; width: 100px; margin-left: -50px; border-radius: 50%; border: 0.5em solid #FFFFFF; border-top-color: rgba(0, 0, 0, 0); -webkit-animation: spinner 1s infinite infinite; animation: spinner 1s linear infinite;  z-index: 101;}
@-webkit-keyframes spinner { 
100% { -webkit-transform: rotate(360deg);   transform: rotate(360deg);}
}
@keyframes spinner { 
100% { -webkit-transform: rotate(360deg);   transform: rotate(360deg);}
}
/* フォームメーラー専用 */
.visibility-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.form-mailer input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none;}
.form-mailer { padding-top: 35px; background: #eee;}
.form-mailer h1 { font-size: 17px!important; text-align: center!important; line-height: 1.8!important;}
.form-mailer .post_content { max-width: 1030px; margin: auto; padding: 0 20px;}
.form-mailer .box-white { padding: 20px; background: #fff;}
.form-mailer .box-white div p { margin: 0 0 10px; line-height: 1.5;}
.form-mailer fieldset { margin-bottom: 30px; color: #333}
.form-mailer fieldset legend, .form-mailer fieldset div { width: 100%;}
.form-mailer fieldset legend { font-size: 16px; font-weight: bold}
.form-mailer input[type='text'], .form-mailer textarea, .form-mailer select { width: 100%; height: 42px; padding: 10px 15px; border: 1px solid #ccc; border-radius: 8px}
.form-mailer textarea { height: 140px}
.form-mailer .box-white a { color: #1e88e5; text-decoration: underline}
.form-mailer input[type='submit'] { width: 100%; height: 64px; color: #fff; font-size: 18px; background: #1e88e5; border-radius: 8px}
.form-mailer input[type='submit']:hover { background: #1360a4;}
/* ラジオボタン */
.form-mailer input[type="radio"]+label,
.form-mailer input[type="checkbox"]+label { display: flex; align-items: center; min-height: 42px; margin-top: 10px; padding: 10px 15px 10px 0; line-height: 1.5; border: 1px solid #ccc; border-radius: 8px}
.form-mailer input[type="checkbox"]+label:first-of-type { margin-top: 0}
.form-mailer input[type="radio"]+label span,
.form-mailer input[type="checkbox"]+label span { position: relative; padding-left: 40px;  cursor: pointer;}
.form-mailer input[type="radio"]+label span::before,
.form-mailer input[type="radio"]+label span::after,
.form-mailer input[type="checkbox"]+label span::before,
.form-mailer input[type="checkbox"]+label span::after { content: ""; position: absolute; display: block;}
.form-mailer input[type="radio"]+label span::before { top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%;}
.form-mailer input[type="radio"]+label span::after { top: 50%; left: 15px; transform: translateY(-50%); width: 10px; height: 10px; background: #1e88e5; border-radius: 50%; opacity: 0;}
.form-mailer input[type="radio"]:checked+label span::before { border-color: #1e88e5;}
.form-mailer input[type="radio"]:checked+label span::after,
.form-mailer input[type="checkbox"]:checked+label span::after { opacity: 1;}
/* チェックボックス */
.form-mailer input[type="checkbox"]+label span::before { top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px;}
.form-mailer input[type="checkbox"]+label span::after { top: 50%; left: 13px; transform: translateY(-50%) rotate(-45deg); width: 14px; height: 7px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; opacity: 0;}
.form-mailer input[type="checkbox"]:checked+label span::before { background: #1e88e5; border-color: #1e88e5;}
/* セレクトボックス */
.form-mailer select { background: #fff}
.form-mailer .flex-box { display: flex; justify-content: flex-start; flex-wrap: wrap}
.form-mailer .flex-box input[type="radio"]+label,
.form-mailer .flex-box input[type="checkbox"]+label{ width: 100%}
@media screen and (max-width: 767px) {
  .form-mailer fieldset legend { margin-bottom: 15px}
  .form-mailer .flex-box input[type="checkbox"]+label:nth-of-type(n + 2){ margin-top: 10px}
}
@media screen and (min-width: 768px) {
  .form-mailer h1 { font-size: 28px!important; text-align: center!important; line-height: 1.5!important;}
  .form-mailer .post_content { padding: 60px 0;}
  .form-mailer .box-white { padding: 30px;}
  .form-mailer fieldset { width: 100%; display: inline-block}
  .form-mailer fieldset legend { float: left; display: flex; justify-content: flex-end; height: 40px; width: 22%; margin-right: 2%;}
  .form-mailer fieldset div { float: left; width: 76%}
  .form-mailer .error_msg { width: 76%; float: right}
  .form-mailer .flex-box input[type="radio"]+label,
  .form-mailer .flex-box input[type="checkbox"]+label{ width: 49%}
  .form-mailer .flex-box input[type="radio"]+label:nth-of-type(even),
  .form-mailer .flex-box input[type="checkbox"]+label:nth-of-type(even) { margin-left: 2%}
  .form-mailer .flex-box input[type="checkbox"]+label { margin-top: 0}
  .form-mailer .flex-box input[type="checkbox"]+label:nth-of-type(n + 3){ margin-top: 10px}
}
.form-mailer div.policy { position: relative}
.form-mailer div.policy input[type="checkbox"]+label { margin-top: 3em}
.form-mailer div.policy .text-policy { position: absolute; top:-3.5em; left:0}
@media screen and (min-width: 768px) {
  .form-mailer div.policy input[type="checkbox"]+label { margin-top: 2.5em}
  .form-mailer div.policy .text-policy { position: absolute; top: 0; left:0}
}
/* 必須アラートカラー */
.form-mailer .error_msg {color: #e53935; font-size: 12px;}
.form-mailer legend.required { }
.form-mailer legend.required span { display: inline-block; position: relative; width: 100%; z-index:1;}
.form-mailer legend.required span::before { content: "　"; position: absolute; left: 0; width: 0.5em; margin-right: -.5em; background: #fff; z-index: 2;}
.form-mailer legend.required span::after { content: "必須"; width: 40px; height: 20px; line-height: 20px; margin-left: 5px; padding: 0 5px 2px; color: #fff; font-size: 12px; text-align: center; background: #e53935; border-radius: 3px;}
.form-mailer div.error input[type="text"],
.form-mailer div.error textarea,
.form-mailer div.error select { border: 1px solid #e53935}
.form-mailer div.error input[type="radio"]+label,
.form-mailer div.error input[type="checkbox"]+label{ color: #e53935; border: 1px solid #e53935;}
.form-mailer div.error input[type="radio"]+label span::before,
.form-mailer div.error input[type="checkbox"]+label span::before{ border: 2px solid #e53935;}
/* 完了カラー */
.form-mailer div.completed textarea,
.form-mailer div.completed select,
.form-mailer div.completed input[type="text"] { border: 1px solid #43a047}
.form-mailer div.completed input[type="radio"]+label,
.form-mailer div.completed input[type="checkbox"]+label{ color: #43a047; border: 1px solid #43a047;}
.form-mailer div.completed input[type="radio"]+label span::before,
.form-mailer div.completed input[type="checkbox"]+label span::before { border: 1px solid #43a047;}
@media screen and (min-width: 768px) {
  .form-mailer legend.required span { width: fit-content}
}
/* フォーカスカラー */
.form-mailer input[type="radio"]:focus+label span::before,
.form-mailer input[type="checkbox"]:focus+label span::before,
.form-mailer input[type="text"]:focus, .form-mailer select:focus,
.form-mailer input[type="text"]:focus, .form-mailer textarea:focus { border-color: #9bc3ee; box-shadow: 0 0 0 3px rgba(30, 136, 229, .2);}
/* エラー時フォーカスカラー */
.form-mailer div.error input[type="radio"]:focus+label span::before,
.form-mailer div.error input[type="checkbox"]:focus+label span::before { box-shadow: 0 0 0 3px rgba(229, 57, 53, .2);}
.form-mailer div.error input[type="text"]:focus, .form-mailer div.error select:focus,
.form-mailer div.error input[type="text"]:focus, .form-mailer div.error textarea:focus { border-color: #e53935; box-shadow: none}
/* 完了時フォーカスカラー */
.form-mailer div.completed input[type="radio"]:focus+label span::before,
.form-mailer div.completed input[type="checkbox"]:focus+label span::before { box-shadow: 0 0 0 3px rgba(67, 160, 71, .2);}
.form-mailer div.completed input[type="text"]:focus, div.completed .form-mailer select:focus,
.form-mailer div.completed input[type="text"]:focus, div.completed .form-mailer textarea:focus { border-color: #43a047; box-shadow: none}
/*　チェック時 */
.form-mailer div.error input[type="radio"]:checked+label span::before { box-shadow: none}
.form-mailer div.error input[type="checkbox"]:checked+label span::before { border: 0; box-shadow: none}