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

  カラーシミュレーション
  static/data/colorsimulation.html

///////////////////////////////////////////////////////////////////////////*/
.ttl_colorsimulation {
  display: flex;
  align-items: center;
  margin: 26px 0 44px;
}
.ttl_colorsimulation-sub {
  margin-left: auto;
}
.c-sim_howto {
  display: block;
  margin-bottom: 10px;
}
.c-sim_howto a {
  display: block;
  border-radius: 9px;
  box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.c-sim_memo a {
  position: relative;
  display: block;
  width: 140px;
  border-radius: 9px;
  box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.c-sim_memo-num {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  margin: auto 0;
  border: 1px solid #f19149;
  border-radius: 11px;
  background-color: #fff;
  color: #f19149;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
}
.colorsimulation .box_house {
  margin: 44px 0 10px;
}
.colorsimulation .box_change_type {
  float: right;
  width: 327px;
}
.colorsimulation .box_change_type .ttl,
.colorsimulation .local_box_change_type .ttl {
  margin-bottom: 10px;
  color: #008e1e;
  font-size: 15px;
}
.colorsimulation .box_change_type .ttl::before,
.colorsimulation .local_box_change_type .ttl::before {
  content: "1";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  border-radius: 50%;
  background-color: #008e1e;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.colorsimulation .local_box_change_type .ttl.step-2::before {
  content: "2";
}
.ext-rel-link_hd , .paint-blog_ttl {
  height: 37px;
  margin-bottom: 23px;
  padding: 0 12px;
  border-radius: 3px;
  font-size: 18px;
  line-height: 37px;
  background: url(/public/img/common/icon_sakura.svg) 99% center no-repeat #ffecec;
  background-size: 35px;
}
/* ====================================================
  建物のタイプ
====================================================*/
.house-type_hd {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
}
.house-type_list {
  display: flex;
  margin-bottom: 20px;
}
.house-type_list li {
  margin-right: 10px;
}
.house-type_list li:nth-of-type(3n) {
  margin-right: 0;
}
.house-type_list input[type="radio"] + span::before {
  display: none;
}
.house-type_txt {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 102px;
  height: 110px;
  padding-top: 84px;
  box-shadow: 0 0 0 1px #ccc inset;
  border-radius: 6px;
  background-color: #fff;
  background-position: 0 0;
  background-repeat: no-repeat;
  font-size: 12px;
}
#ui_type1 .house-type_txt { background-image: url("/public/img/static/colorsimulation/img_house_type1.png"); }
#ui_type2 .house-type_txt { background-image: url("/public/img/static/colorsimulation/img_house_type2.png"); }
#ui_type3 .house-type_txt { background-image: url("/public/img/static/colorsimulation/img_house_type3.png"); }
#ui_type4 .house-type_txt { background-image: url("/public/img/static/colorsimulation/img_house_type4.png"); }
#ui_type5 .house-type_txt { background-image: url("/public/img/static/colorsimulation/img_house_type5.png"); }

input[type="radio"]:checked + .house-type_txt {
  box-shadow: 0 0 0 2px #fe3d3e inset;
}
/* ====================================================
  カラーのタイプ
====================================================*/
.color-type_list {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc;
}
.color-type_list li {
  margin-right: 20px;
}
.color-type_list input[type="radio"] + span::before {
  display: none;
}
.color-type_txt {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 255px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}
input[type="radio"]:checked + .color-type_txt {
  border: 2px solid #fe3d3e;
  background-color: #fef4f4;
  color: #fe3d3e;
}
/* ====================================================
  塗装場所のタイプ
====================================================*/
.paint-type_list {
  display: flex;
  margin-bottom: 15px;
}
.paint-type_list li {
  margin-right: 10px;
}
.paint-type_txt {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 155px;
  height: 25px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}
.paint-type_txt--accessory {
  width: 218px;
}
.selected .paint-type_txt {
  border: 2px solid #fe3d3e;
  background-color: #fef4f4;
  color: #fe3d3e;
}
.lead-paint-type {
  font-size: 12px;
}

.colorsimulation .box_change_type label.select {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
}
.colorsimulation .box_change_type label.select::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  width: 12px;
  height: 7px;
  margin: auto 0;
  background: url("/public/img/common/icon_down.svg") left center no-repeat;
  background-size: contain;
}
.colorsimulation .box_change_type label.select select {
  width: 120%;
}
.colorsimulation .box_change_type .note {
  margin-bottom: 20px;
  font-size: 12px;
}
/* ====================================================
  お問い合せ
====================================================*/
.box_estimate_link {
  width: 593px;
  margin: 0 auto 50px;
  padding: 19px 0 40px;
  border-radius: 3px;
  background: url("/public/img/static/pricesimulation/box_estimate_link/bg_head_long.png") left top no-repeat #fff8eb;
}
.box_estimate_link .request {
  margin-bottom: 29px;
  text-align: center;
  line-height: 1.5;
}
.box_estimate_link .request .em {
  color: #e11037;
}
.box_estimate_link .list_contact {
  width: 494px;
  margin: 0 50px;
  letter-spacing: -0.4em; /* inline-blockの隙間対策 */
  text-align: left;
}
.box_estimate_link .list_contact li {
  display: inline-block;
  letter-spacing: normal; /* inline-blockの隙間対策 */
}
.box_estimate_link .list_contact li:first-of-type {
  margin-right: 20px;
}
.box_estimate_link .list_contact a {
  display: block;
  border-radius: 3px;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
/* バルーン
--------------------------------*/
.box_estimate_link .balloon_order {
  position: relative;
  width: 456px;
  margin: 28px auto 0;
  padding: 10px 18px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: url("/public/img/common/box_contact_link/img_operator.png") 378px 15px no-repeat #fff;
  font-size: 14px;
}
.box_estimate_link .balloon_order::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 104px;
  border: 10px solid transparent;
  border-bottom: 14px solid #ccc;
  border-top: none;
}
.box_estimate_link .balloon_order::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 104px;
  border: 10px solid transparent;
  border-bottom: 14px solid #fff;
  border-top: none;
}
.box_estimate_link .hd_balloon_order {
  margin-bottom: 9px;
  color: #008e1e;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.box_estimate_link .balloon_order .txt {
  margin-bottom: 5px;
  line-height: 1.7;
}
/*--------------------------------
  バナー
--------------------------------*/
.box_estimate_link .bnr_cg_svc {
  margin-bottom: 0;
  text-align: center;
}
/* ====================================================
  外壁塗装の基礎知識ページへのリンク
====================================================*/
.color-mutual-link_ttl {
  display: flex;
  align-items: center;
  min-height: 31px;
  margin-bottom: 20px;
  padding-left: 44px;
  background: url("/public/img/static/basic-knowledge/common/icon_book_balloon.svg") left center no-repeat;
  background-size: 36px auto;
  font-size: 14px;
}
.color-mutual-link_list {
  margin-left: 19px;
}
.color-mutual-link_list li {
  margin-bottom: 12px;
}
.color-mutual-link_list a {
  color: #0060ff;
  font-size: 13px;
  text-decoration: underline;
}
.color-mutual-link_list a:hover {
  text-decoration: none;
}
.color-mutual-link_list a::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  border: 4px solid transparent;
  border-left: 7px solid #0060ff;
  border-right: none;
  vertical-align: middle;
}
/*-----------------------------------
  お住まいの家のタイプ
-----------------------------------*/
.colorsimulation .box_house .box_img {
  float: left;
  width: 361px;
  padding: 2px 2px 0;
  border: 1px solid #ccc;
}
.colorsimulation .box_img .cap {
  margin-top: 7px;
  text-align: center;
  font-size: 14px;
}
.c-sim-btn {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
}
/* ====================================================
  この配色を保存する
====================================================*/
.c-sim-save a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 169px;
  height: 24px;
  padding: 0 0 0 29px;
  border-radius: 12px;
  background: url(/sp/img/static/colorsimulation/icon_roller_plus.png) 10px center no-repeat #f19149;
  background-size: 16px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.c-sim-save-msg-container {
  height: 30px;
  margin: 0 0 15px;
}
.c-sim-save-msg {
  display: none;
  height: 30px;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 30px;
}
.c-sim-save-msg_txt {
  display: inline-block;
  padding-left: 25px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 16px auto;
  font-size: 15px;
  font-weight: bold;
}
.is-saved .c-sim-save-msg_txt {
  background-image: url(/sp/img/static/colorsimulation/icon_check-strongcornflowerblue.png);
}
.is-attention .c-sim-save-msg_txt {
  background-image: url(/sp/img/static/colorsimulation/icon_attention.png);
}
/* ====================================================
  この配色で問合せる
====================================================*/
.c-sim-inquire a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 169px;
  height: 24px;
  padding: 0 0 0 29px;
  border-radius: 12px;
  background: url(/sp/img/common/icon_question-circle.svg) 9px center no-repeat #008e1e;
  background-size: 16px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.colorsimulation .box_house .img {
  position: relative;
  background-color: #fff;
}
.colorsimulation .box_house .img img {
  width: 361px;
  height: 301px;
  vertical-align: middle;
}
.colorsimulation .box_house .img #painting,
.colorsimulation .box_house .img .accessory,
.colorsimulation .box_house .img .roof,
.colorsimulation .box_house .img .f2,
.colorsimulation .box_house .img .f1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* ローディング画像レイヤー
--------------------------------------*/
.colorsimulation .box_house .img #painting {
  z-index: 10;
  opacity: 0.9;
  right: 0;
  bottom: 0;
  display: none;
  width: 361px;
  height: 301px;
  background: url(/public/img/common/icon_roller.svg) no-repeat;
  -webkit-background-size: auto 40%;
  background-size: auto 40%;
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
  text-align: center;
  text-indent: -1000%;
  vertical-align: bottom;
  animation-name: paint;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* イメージレイヤー
---------------------------------------*/
.colorsimulation .box_house .img .accessory {
  z-index: 4;
}
.colorsimulation .box_house .img .roof {
  z-index: 3;
}
.colorsimulation .box_house .img .f2 {
  z-index: 2;
}
.colorsimulation .box_house .img .f1 {
  z-index: 1;
}


@keyframes paint {
  0%   {background-position: 55% 55%;}
  50%  {background-position: 40% 40%;}
  100% {background-position: 55% 55%;}
}



/*-----------------------------------
  色選択
-----------------------------------*/
.colorsimulation .selector {
  margin-bottom: 10px;
}
.colorsimulation .selector .hd {
  margin-bottom: 10px;
  font-size: 14px;
}
.colorsimulation .selector .hd::before {
  content: "";
  display: inline-block;
  margin-right: 3px;
  border: 5px solid transparent;
  border-top: 7px solid #008e1e;
  border-bottom: none;
  vertical-align: middle;
}
.colorsimulation .selector ul {
  display: flex;
  flex-wrap: wrap;
}
.colorsimulation .selector li {
  display: flex;
  width: 100px;
  height: 35px;
  margin: 0 2px 10px 0;
}
.colorsimulation .selector li:nth-of-type(7n) {
  margin-right: 0;
}
.colorsimulation .selector li a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  box-shadow: 0 0 0 1px #ccc inset;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}
.colorsimulation .selector li a.active {
  box-shadow: 0 0 0 2px #ff0001 inset;
}
/*-----------------------------------
  外壁塗装
-----------------------------------*/
.colorsimulation .wall li.s-461 a { background-color: #feeecd; }
.colorsimulation .wall li.s-104 a { background-color: #faf6d9; }
.colorsimulation .wall li.s-108 a { background-color: #f6eddb; }
.colorsimulation .wall li.s-371 a { background-color: #dcd8cf; }
.colorsimulation .wall li.s-102 a { background-color: #e0e1dc; }
.colorsimulation .wall li.s-105 a { background-color: #f6f2e6; }
.colorsimulation .wall li.s-112 a { background-color: #fcefcd; }
.colorsimulation .wall li.s-372 a { background-color: #cec7b7; }
.colorsimulation .wall li.s-460 a { background-color: #ebdac8; }
.colorsimulation .wall li.s-146 a { background-color: #dbd8c7; }
.colorsimulation .wall li.s-111 a { background-color: #faf6d1; }
.colorsimulation .wall li.s-184 a { background-color: #beb29a; }
.colorsimulation .wall li.s-490 a { background-color: #fbdbc6; }
.colorsimulation .wall li.s-103 a { background-color: #c3c8c4; }
.colorsimulation .wall li.s-109 a { background-color: #cec6b1; }
.colorsimulation .wall li.s-250 a { background-color: #faeaaf; }
.colorsimulation .wall li.s-281 a { background-color: #ffdd95; }
.colorsimulation .wall li.s-491 a { background-color: #f5ab86; }
.colorsimulation .wall li.s-500 a { background-color: #ede2b5; }
.colorsimulation .wall li.s-282 a { background-color: #f2ca84; }
.colorsimulation .wall li.s-430 a { background-color: #bdbacb; }
.colorsimulation .wall li.s-320 a { background-color: #d7cdc4; }
.colorsimulation .wall li.s-012 a { background-color: #9a9da2; }
.colorsimulation .wall li.s-210 a { background-color: #cdc7bb; }
.colorsimulation .wall li.s-376 a { background-color: #b59e7c; }
.colorsimulation .wall li.s-375 a { background-color: #7e7a6e; }
.colorsimulation .wall li.s-370 a { background-color: #fefef4; }
.colorsimulation .wall li.s-010 a { background-color: #f5f9f8; }
.colorsimulation .wall li.s-503 a { background-color: #fefef2; }
.colorsimulation .wall li.s-174 a { background-color: #fffdea; }
.colorsimulation .wall li.s-155 a { background-color: #f8faed; }
.colorsimulation .wall li.s-110 a { background-color: #f5efe3; }
.colorsimulation .wall li.s-280 a { background-color: #fef3c6; }
.colorsimulation .wall li.s-501 a { background-color: #d9be87; }
.colorsimulation .wall li.s-343 a { background-color: #c49d74; }
.colorsimulation .wall li.s-400 a { background-color: #e3e6eb; }
.colorsimulation .wall li.s-011 a { background-color: #ced1d6; }
.colorsimulation .wall li.s-401 a { background-color: #bec1c6; }
.colorsimulation .wall li.s-530 a { background-color: #cfd1cc; }
.colorsimulation .wall li.s-218 a { background-color: #c6cab3; }
.colorsimulation .wall li.s-373 a { background-color: #b6b7b2; }
.colorsimulation .wall li.s-322 a { background-color: #b4aba4; }
.colorsimulation .wall li.s-152 a { background-color: #b4ab9c; }
.colorsimulation .wall li.s-342 a { background-color: #867666; }
.colorsimulation .wall li.s-013 a { background-color: #525c5e; }
.colorsimulation .wall li.s-050 a { background-color: #668887; }
.colorsimulation .wall li.s-999 a {
  background: url("/public/img/static/colorsimulation/wall/color/bg_s-999.png") left top no-repeat;
  text-shadow:2px 2px 0 #c3b8a8, -2px -2px 0 #c3b8a8,
              -2px 2px 0 #c3b8a8, 2px -2px 0 #c3b8a8,
              0px 2px 0 #c3b8a8,  0 -2px 0 #c3b8a8,
              -2px 0 0 #c3b8a8, 2px 0 0 #c3b8a8;
}

.colorsimulation .wall li.s-342 a,
.colorsimulation .wall li.s-375 a,
.colorsimulation .wall li.s-012 a,
.colorsimulation .wall li.s-013 a,
.colorsimulation .wall li.s-050 a {
  color: #fff;
}
/*-----------------------------------
  屋根塗装
-----------------------------------*/
.colorsimulation .roof li a {
  color: #fff;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
}

.colorsimulation .roof li.brown a          { background-color: #6e3a2f; }
.colorsimulation .roof li.torino-brown a   { background-color: #302521; }
.colorsimulation .roof li.dark-chocolate a { background-color: #291e1c; }
.colorsimulation .roof li.deep-gray a      { background-color: #2d2a25; }
.colorsimulation .roof li.bologna-green  a { background-color: #424f24; }
.colorsimulation .roof li.nasukon a        { background-color: #091426; }
.colorsimulation .roof li.maroon a         { background-color: #5c1a0e; }
.colorsimulation .roof li.new-wine a       { background-color: #351613; }
.colorsimulation .roof li.dark-gray a      { background-color: #373634; }
.colorsimulation .roof li.milano-green a   { background-color: #3c5d48; }
.colorsimulation .roof li.moss-green a     { background-color: #232b1e; }
.colorsimulation .roof li.black a          { background-color: #000000; }
.colorsimulation .roof li.green a          { background-color: #424f24; }
.colorsimulation .roof li.gray a           { background-color: #c3c8c4; }

/*-----------------------------------
  付帯部塗装
-----------------------------------*/
.colorsimulation .accessory li a {
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.colorsimulation .accessory li.white a   { background-color: #ffffff; color: #000; box-shadow: 0 0 0 1px #ccc inset; }
.colorsimulation .accessory li.black a   { background-color: #000000; }
.colorsimulation .accessory li.brown a   { background-color: #291e1c; }
.colorsimulation .accessory li.s_none a  { color: #000; box-shadow: 0 0 0 1px #ccc inset; }
.colorsimulation .accessory li.s_white a { background-color: #ffffff; color: #000; box-shadow: 0 0 0 1px #ccc inset; }
.colorsimulation .accessory li.s_black a { background-color: #000000; }
.colorsimulation .accessory li.s_brown a { background-color: #291e1c; }

.colorsimulation .selector li.white a.active,
.colorsimulation .selector li.s_none a.active,
.colorsimulation .selector li.s_white a.active {
  box-shadow: 0 0 0 2px #ff0001 inset;
}

/* ====================================================
  モーダル
====================================================*/
.c-sim-modal {
  display: none;
  position: fixed;
  top: 7%;
  right: 0;
  left: 260px;
  box-sizing: border-box;
  width: 620px;
  margin: 0 auto;
  padding: 67px 40px 55px;
  border: 1px solid #aaa;
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 14px 0px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  z-index: 1001;
}
.c-sim-modal_close {
  position: absolute;
  top: -20px;
  right: -25px;
}
.c-sim-modal_close a {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: url("/sp/img/common/icon_cross-white.svg") center center no-repeat #ff4f4f;
  background-size: 26px auto;

  text-indent: 110%;
  overflow: hidden;
  white-space: nowrap;
  background-repeat: no-repeat;
}
.c-sim-modal_ttl {
  margin-bottom: 42px;
  font-size: 32px;
  font-weight: bold;
}
.c-sim-modal_fig {
  margin-bottom: 22px;
}
.c-sim-modal_lead {
  margin-bottom: 24px;
}
.c-sim-modal_hd {
  color: #fe3d3e;
  font-weight: bold;
}
.c-sim-modal_order {
  margin-bottom: 24px;
}
.c-sim-modal_order li {
  font-weight: bold;
}
.c-sim-modal_note {
  margin-bottom: 24px;
  padding-left: 1em;
  text-indent: -1em;
}
.c-sim-modal_note-list {
  padding-left: 1em;
  text-indent: -1em;
}
.c-sim-modal_em {
  font-weight: bold;
}
.c-sim-modal_img-desc {
  margin: 0 5px;
  vertical-align: top;
}
.c-sim-modal_img-desc img {
  width: auto;
  height: 24px;
}
/*--------------------------------
  マスク
--------------------------------*/
.mask-c-sim-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  z-index: 1000;
}
/* ====================================================
  おすすめの関連サービス
====================================================*/
.recom-related-service_txt {
  font-size: 14px;
  margin: 0 60px 23px 50px;
  line-height: 24px;
}
.bnr_cg_svc {
  text-align: center;
  margin-bottom: 50px;
}
/* ====================================================
  色別・デザイン別の塗装事例はこちら
====================================================*/
.design-case-filter_ttl , .mut-case-filter_ttl{
  height: 37px;
  margin-bottom: 20px;
  padding: 0 12px;
  border-radius: 3px;
  background-color: #ffecec;
  font-size: 18px;
  line-height: 37px;
  background: url(/public/img/common/icon_sakura.svg) 99% center no-repeat #ffecec;
  background-size: 35px;
}
.design-case-filter {
  margin-bottom: 20px;
}
/*--------------------------------
  絞り込み条件
--------------------------------*/
.design-case-filter-condition-wrap {
  padding: 0 20px;
}
.design-case-filter-condition {
  border-collapse: collapse;
  width: 100%;
}
.design-case-filter-condition td,
.design-case-filter-condition th {
  padding: 5px 0;
}
.design-case-filter-condition th {
  width: 87px;
  border-bottom: 1px solid #eee;
  color: #ff4041;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
}
.design-case-filter-condition td {
  border-bottom: 1px solid #eee;
}
.design-case-filter-condition tr:last-of-type th,
.design-case-filter-condition tr:last-of-type td {
  border-bottom: none;
}
.design-case-filter-condition-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.const-color {
  justify-content: space-between;
}
.design-case-filter-condition-list li {
  margin: 0 20px 10px 0;
}
.const-color li {
  display: flex;
  width: 81px;
  min-height: 26px;
  margin: 0 20px 10px 0;
}
.const-color li a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}
.const-color li:nth-of-type(6n) {
  margin-right: 0;
}
.design-case-filter_no-fit {
  color: #ccc;
  font-size: 13px;
}
.design-case-filter-condition-list a {
  color: #333;
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid #ccc;
  border-radius: 100px;
  background-color: #fff;
}
.design-case-filter-condition-list .white a {
  border-color: #888;}
.design-case-filter-condition-list .beige a {
  background-color: #fef3c6;
  border: none;
}
.design-case-filter-condition-list .cream a {
  background-color: #feeecd;
  border: none;
}
.design-case-filter-condition-list .gray a {
  background-color: #9a9da2;
  color: #fff;
  border: none;
}
.design-case-filter-condition-list .blue a {
  background-color: #a9ceec;
  border: none;
}
.design-case-filter-condition-list .pink a {
  background-color: #ffecec;
  border: none;
}
.design-case-filter-condition-list .red a {
  background-color: #ef4123;
  color: #fff;
  border: none;
}
.design-case-filter-condition-list .brown a {
  background-color: #867666;
  color: #fff;
  border: none;
}
.design-case-filter-condition-list .black a {
  background-color: #333;
  color: #fff;
  border: none;
}
.design-case-filter-condition-list .green a {
  background-color: #3c5d48;
  color: #fff;
  border: none;
}
.design-case-filter-condition-list .yellow a {
  background-color: #ffdd95;
  border: none;
}
.design-case-filter-condition-list .clear a {
  background-color: #fff;
}
.design-case-filter-condition-list a:hover {
  text-decoration: none;
  opacity: 0.8;
}
/* ====================================================
  関連するご質問
====================================================*/
.color-simulation-links-faq-list {
  margin: 0 50px 20px;
}
.color-simulation-links-faq_ttl {
  position: relative;
  display: inline-block;
  padding: 8px 0 8px 32px;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  cursor : pointer;
}
.color-simulation-links-faq_ttl:hover {
  text-decoration: none;
}
.color-simulation-links-faq_ttl::before {
  content: "Q.";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 23px;
  height: 23px;
  margin: 7px 0;
  color: #f9595a;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
}
.color-simulation-links-faq_ttl::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  width: 23px;
  height: 23px;
  margin: auto 0;
  background: url("/public/img/common/ico_link_down_pnk.svg") right center no-repeat;
  background-size: contain;
}
.color-simulation-links-faq_ttl.open::after {
  background: url("/public/img/common/ico_link_up_pnk.svg") right center no-repeat;
}
.color-simulation-links-faq-txt {
  display: none;
  position: relative;
  padding: 15px 0 13px 30px;
  font-size: 16px;
}
.color-simulation-links-faq-txt::before {
  content: "A.";
  position: absolute;
  top: 0;
  left: 0;
  width: 23px;
  height: 23px;
  color: #66bd44;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  padding-top: 16px;
}
.color-simulation_more {
  display: table;
  margin: 0 auto 50px;
}
.color-simulation_more a {
  display: block;
  padding: 15px 50px 15px 25px;
  border-radius: 4px;
  border: 1px solid #ff4545;
  background: url(/sp/img/common/icon_next-lightred.svg) 95% center no-repeat;
  background-size: 9px auto;
  color: #ff4545;
  font-size: 18px;
  font-weight: bold;
}
.color-simulation_more a:hover {
  text-decoration: none;
  opacity: 0.8;
}
/* ====================================================
  配色メモ
====================================================*/
.c-memo {
  margin-top: 40px;
}
.c-memo-ttl {
  display: flex;
  align-items: center;
  height: 35px;
  margin-bottom: 50px;
  padding: 0 14px 0 48px;
  border: 1px solid #f19149;
  border-radius: 2px;
  background: url(/sp/img/static/colorsimulation/icon_roller_plus-orange.png) 14px center no-repeat #fffde3;
  background-size: 24px auto;
}
.c-memo-ttl_txt {
  font-size: 18px;
  font-weight: bold;
}
.c-memo-ttl-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid #f19149;
  border-radius: 12px;
  color: #f19149;
  background-color: #fff;
}
.c-memo-ttl-count_num {
  color: #f19149;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
}
.c-memo-ttl-count_txt {
  color: #f19149;
  font-size: 12px;
}
.c-memo-list {
  margin: 0 15px;
}
/* =====================================
  バナー
=====================================*/
.color-bnr-link_ttl {
  height: 37px;
  margin-bottom: 20px;
  padding: 0 12px;
  border-radius: 3px;
  background-color: #ffecec;
  font-size: 18px;
  line-height: 37px;
  background: url(/public/img/common/icon_sakura.svg) 99% center no-repeat #ffecec;
  background-size: 35px;
}
.color-bnr-link {
  margin-bottom: 50px;
  text-align: center;
}
.color-bnr-link.--mgb {
  margin-bottom: 20px;
}
/* ====================================================
  blog
====================================================*/
.paint-blog-list a {
  height: 225px;
}
/* ====================================================
  マウスオーバー時の挙動の統一 #18304
====================================================*/
.house-type_list label,
.color-type_list label,
.paint-type_list label,
.selector a {
  transition: opacity ease-in-out 0.2s;
}
.house-type_list label:hover,
.color-type_list label:hover,
.paint-type_list label:hover,
.selector a:hover {
  opacity: 0.8;
}