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

  外壁塗装 カラー合成サービス 入力画面
  mailform/form02/input.html

///////////////////////////////////////////////////////////////////////////*/
.cg-svc {
  margin-top: 15px;
}
.cg-svc_img {
  margin-bottom: 23px;
}
.cg-svc_lead {
  margin-bottom: 26px;
}
.cg-svc_link {
  margin-bottom: 26px;
  text-align: right;
}
.cg-svc_link a {
  color: #0060ff;
  font-size: 13px;
  text-decoration: underline;
}
.cg-svc_link a:hover {
  text-decoration: none;
}
.cg-svc_link a::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  border: 5px solid transparent;
  border-left: 8px solid #0060ff;
  border-right: none;
  vertical-align: middle;
}
.cg-svc_hd {
  height: 47px;
  margin-bottom: 31px;
  padding: 0 20px;
  background-color: #ffecec;
  font-size: 20px;
  line-height: 47px;
}
/* ====================================================
  カラー
====================================================*/
.cg-svc_color-container {
  width: 626px;
  margin: 0 auto 40px;
}
.cg-svc_color-hd {
  display: flex;
  align-items: center;
  height: 39px;
  padding: 0 9px;
  border: 1px solid #bedeae;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: #d6ebcc;
  font-size: 16px;
  font-weight: bold;
  line-height: 39px;
  cursor: pointer;
}
.cg-svc_color-hd--close {
  border: 1px solid #bedeae;
  border-radius: 4px;
}
.cg-svc_color-hd::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 13px;
  border-radius: 50%;
  background: url("/public/img/mailform/form02/common/icon_minus.svg") center center no-repeat #80c269;
  background-size: 16px auto;
  vertical-align: middle;
}
.cg-svc_color-hd--close::before {
  background: url("/public/img/mailform/form02/common/icon_plus.svg") center center no-repeat #80c269;
  background-size: 16px auto;
}
.cg-svc_color-hd-sub {
  height: 20px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid #959595;
  border-radius: 2px;
  color: #626262;
  font-size: 12px;
  line-height: 20px;
}
.cg-svc_color {
  display: none;
  padding-top: 27px;
  border: 1px solid #acd598;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.cg-svc_color-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 10px 14px;
}
.cg-svc_color-list li {
  margin: 0 10px 10px 0;
}
.cg-svc_color-list li:nth-of-type(4n) {
  margin-right: 0;
}
input[type="checkbox"] + span.cg-svc_color-txt {
  display: inline-flex;
  align-items: center;
  width: 123px;
  height: 56px;
  padding-left: 15px;
  border: 2px solid #ccc;
  font-size: 18px;
}
input[type="checkbox"] + span.cg-svc_color-txt::before {
  width: 11px;
  height: 11px;
  margin-right: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: none;
}
input[type="checkbox"]:checked + span.cg-svc_color-txt::before {
  background-color: #0d98d7;
  background-size: contain;
}

.s-461 .cg-svc_color-txt { background-color: #feeecd; }
.s-104 .cg-svc_color-txt { background-color: #faf6d9; }
.s-108 .cg-svc_color-txt { background-color: #f6eddb; }
.s-371 .cg-svc_color-txt { background-color: #dcd8cf; }
.s-102 .cg-svc_color-txt { background-color: #e0e1dc; }
.s-105 .cg-svc_color-txt { background-color: #f6f2e6; }
.s-112 .cg-svc_color-txt { background-color: #fcefcd; }
.s-372 .cg-svc_color-txt { background-color: #cec7b7; }
.s-460 .cg-svc_color-txt { background-color: #ebdac8; }
.s-146 .cg-svc_color-txt { background-color: #dbd8c7; }
.s-111 .cg-svc_color-txt { background-color: #faf6d1; }
.s-184 .cg-svc_color-txt { background-color: #beb29a; }
.s-490 .cg-svc_color-txt { background-color: #fbdbc6; }
.s-103 .cg-svc_color-txt { background-color: #c3c8c4; }
.s-109 .cg-svc_color-txt { background-color: #cec6b1; }
.s-250 .cg-svc_color-txt { background-color: #faeaaf; }
.s-281 .cg-svc_color-txt { background-color: #ffdd95; }
.s-491 .cg-svc_color-txt { background-color: #f5ab86; }
.s-500 .cg-svc_color-txt { background-color: #ede2b5; }
.s-282 .cg-svc_color-txt { background-color: #f2ca84; }
.s-430 .cg-svc_color-txt { background-color: #bdbacb; }
.s-320 .cg-svc_color-txt { background-color: #d7cdc4; }
.s-012 .cg-svc_color-txt { background-color: #9a9da2; }
.s-210 .cg-svc_color-txt { background-color: #cdc7bb; }
.s-376 .cg-svc_color-txt { background-color: #b59e7c; }
.s-375 .cg-svc_color-txt { background-color: #7e7a6e; }
.s-370 .cg-svc_color-txt { background-color: #fefef4; }
.s-010 .cg-svc_color-txt { background-color: #f5f9f8; }
.s-503 .cg-svc_color-txt { background-color: #fefef2; }
.s-174 .cg-svc_color-txt { background-color: #fffdea; }
.s-155 .cg-svc_color-txt { background-color: #f8faed; }
.s-110 .cg-svc_color-txt { background-color: #f5efe3; }
.s-280 .cg-svc_color-txt { background-color: #fef3c6; }
.s-501 .cg-svc_color-txt { background-color: #d9be87; }
.s-343 .cg-svc_color-txt { background-color: #c49d74; }
.s-400 .cg-svc_color-txt { background-color: #e3e6eb; }
.s-011 .cg-svc_color-txt { background-color: #ced1d6; }
.s-401 .cg-svc_color-txt { background-color: #bec1c6; }
.s-530 .cg-svc_color-txt { background-color: #cfd1cc; }
.s-218 .cg-svc_color-txt { background-color: #c6cab3; }
.s-373 .cg-svc_color-txt { background-color: #b6b7b2; }
.s-322 .cg-svc_color-txt { background-color: #b4aba4; }
.s-152 .cg-svc_color-txt { background-color: #b4ab9c; }
.s-342 .cg-svc_color-txt { background-color: #867666; }
.s-013 .cg-svc_color-txt { background-color: #525c5e; }
.s-050 .cg-svc_color-txt { background-color: #668887; }

.block_color_list_error {
  display: none;
  margin-bottom: 30px;
  text-align: center;
}
.txt_color_list_error {
  display: inline-block;
  height: 48px;
  padding: 0 30px;
  border: 2px solid #f00;
  border-radius: 5px;
  color: #f00;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 48px;
}
/* ====================================================
  フォーム
====================================================*/
.cg-svc_field-wrap {
  border: 1px solid #ffe6e6;
  padding-bottom: 50px;
}
.cg-svc_field-wrap .info_cus {
  width: 628px;
}
.cg-svc_field-lead {
  margin-bottom: 25px;
  text-align: center;
}
tr.name td {
  padding-right: 0;
  padding-left: 15px;
}
tr.tel input,
tr.mail input,
.message textarea {
  box-sizing: border-box;
  width: 100%;
}
/* ====================================================
  添付ファイル
====================================================*/
.tbl_attached_file td {
  padding-right: 10px;
}
.box_attached_file {
  margin-bottom: 12px;
}
.box_attached_file input {
  padding: 7px 10px;
  border-radius: 2px;
  border: 1px solid #bbb;
  box-shadow: inset 1px 1px 2px #eee;
  font-size: 16px;
}
.img_attached_file {
  margin-bottom: 20px;
}
.img_attached_file img {
  width: 200px;
  height: auto;
}
.note_attached_file {
  font-size: 13px;
}
/* ====================================================
  サイト内掲載の承諾
====================================================*/
.cg-svc_consent {
  margin-bottom: 26px;
  text-align: center;
}
.cg-svc_consent-check-label {
  margin-bottom: 10px;
}
input[type="checkbox"] + span.cg-svc_consent-check-txt {
  font-size: 14px;
}
input[type="checkbox"] + span.cg-svc_consent-check-txt::before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  border: 1px solid #bbb;
  border-radius: 2px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,0.15);
  background-color: #fff;
  vertical-align: sub;
}
input[type="checkbox"]:checked + span.cg-svc_consent-check-txt::before {
  border: none;
  box-shadow: none;
  background: url("/public/img/mailform/form02/input/img_check-luminousvividsapphireblue.png") center center no-repeat;
}
.cg-svc_consent-list li {
  font-size: 12px;
}
/* ====================================================
  ボタン
====================================================*/
.box_submit {
  margin-bottom: 50px;
}
/* ====================================================
  注意事項
====================================================*/
.cg-svc_notice {
  width: 473px;
  margin: 0 auto 6px;
  padding: 20px 20px 15px;
  background-color: #eee;
}
.cg-svc_notice-ttl {
  font-size: 14px;
  font-weight: bold;
}
.cg-svc_notice-list li {
  margin-left: 15px;
  font-size: 12px;
  list-style-type: disc;
}