/*EC_CUBE*/
.ec-role {
  padding-left: 0;
  padding-right: 0;
  color: #222;
  max-width: 1200px;
}

.ec-registerRole {
  color: #222;
  line-height: 1.5;
}
.ec-registerCompleteRole {
  color: #222;
  line-height: 1.5;
}
.ec-mypageRole {
  color: #222;
  line-height: 1.5;
}
.ec-orderRole {
  color: #555;
  line-height: 1.5;
  font-size: 15px;
  font-weight: bold;
}

.ec-blockBtn--action {
  background: #db1a1a !important;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  padding: 1% 0;
  height: auto !important;
}
.ec-blockBtn--action:hover {
  background: #dc2c2c !important;
  border: none !important;
}
.ec-blockBtn--cancel {
  background: #bfc9d1 !important;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  padding: 1% 0;
  height: auto !important;
}
.ec-blockBtn--cancel:hover {
  background: #939da4 !important;
  border: none !important;
}
.ec-blockBtn--primary {
  background: #456882 !important;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  padding: 1% 0;
  height: auto !important;
}
.ec-blockBtn--primary:hover {
  background: #6790af !important;
  border: none !important;
}
.ec-blockBtn--favorit {
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  padding: 5% 0;
  height: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  margin: 0 auto;

  border: 2px solid #456882;

  background-color: #fff;
  color: #456882;
}

.ec-blockBtn--favorit:hover {
  background-color: #f3faff;
}

.ec-blockBtn--favorit::before {
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23f1443e'%3E%3C/path%3E%3C/svg%3E");
  content: "";
}

/*商品購入(お申込)の見出し上書き*/
.cs_form_md02 {
  background: #eaefef !important;
  font-size: 18px !important;
  padding: 20px 10px !important;
}

.cs_form_md03 {
  font-size: 16px !important;
  margin: 1% 0;
}

/*商品購入ラジオボタン*/
.ec-radio {
  margin: 20px 0;
}

.ec-radio input[type="radio"] {
  display: none;
}

.ec-radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.ec-radio label:hover {
  background-color: #f0f7ff;
}

.ec-radio label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.ec-radio input[type="radio"]:checked + label::before {
  border-color: #007bff;
}

.ec-radio label {
  position: relative;
}

.ec-radio label::after {
  content: "";
  display: block;
  position: absolute;
  top: 16px;
  left: 14px;
  width: 12px;
  height: 12px;
  background: #007bff;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.ec-radio input[type="radio"]:checked + label::after {
  opacity: 1;
  transform: scale(1);
}

.cs_form_rag span {
  font-size: 16px !important;
  font-weight: bold !important;
}

.ec-orderRole textarea {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px;
}

/*基本*/
body {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
}

p {
  line-height: 1.5;
  margin-bottom: 0.5em;
  letter-spacing: -0.02em;
}
@media only screen and (max-width: 640px) {
  body {
    font-size: 17px;
    line-height: 1.5;
    background: #fff;
  }
}

/*見出し・h2*/

.cs_h02 {
  border-bottom: solid 3px #e5e2cf !important;
  position: relative;
  padding-bottom: 2% !important;
  margin: 3% 0 !important;
  font-weight: bold !important;
  font-size: 30px !important;
}
.cs_h02:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #b8001f;
  bottom: -3px;
  width: 30%;
}
@media only screen and (max-width: 640px) {
  .cs_h02 {
    border-bottom: solid 3px #e5e2cf !important;
    position: relative;
    padding-bottom: 5% !important;
    margin-bottom: 5% !important;
    font-weight: bold !important;
    font-size: 20px !important;
  }
}
/*見出し・h3*/
.cs_h03 {
  border-bottom: solid 3px #e5e2cf;
  padding-bottom: 2%;
  margin: 3% 0 !important;
  font-weight: bold;
}
@media only screen and (max-width: 640px) {
  .cs_h03 {
    border-bottom: solid 3px #e5e2cf;
    padding-bottom: 3%;
    margin-bottom: 5% !important;
    font-weight: bold;
    font-size: 18px;
  }
}
/*見出し・h4*/
.cs_h04 {
  border-bottom: 3px dashed #e5e2cf;
  padding-bottom: 2%;
  margin: 3% 0 !important;
  font-weight: bold;
  font-size: 20px;
}
@media only screen and (max-width: 640px) {
  .cs_h04 {
    border-bottom: 3px dashed #e5e2cf;
    padding-bottom: 3%;
    margin-bottom: 4% !important;
    font-weight: bold;
    font-size: 16px;
  }
}

/*点つきリスト・スタンダード*/
.cs_list01 {
  list-style-type: disc;
  padding: 1em 1em 1em 2.5em;
  border: 3px solid #e5e2cf;
  /* background: #fffdf9; */
}

.cs_list01 li {
  padding: 0.3em 0.3em 0.3em 0;
  color: #222;
  font-weight: bold;
}

.cs_list01 li::marker {
  color: #e5e2cf;
  font-size: 1.1em;
}
/*点つきリスト・タイトルあり・スタンダード*/
.cs_list02 {
  border: 3px solid #e5e2cf;
}

.cs_list02 div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #e5e2cf;
  color: #222;
  font-weight: bold;
  font-size: 20px;
}

.cs_list02 ul {
  list-style-type: disc;
  margin: 0;
  padding: 1em 1em 1em 2.5em;
}

.cs_list02 li {
  padding: 0.3em 0.3em 0.3em 0;
  font-weight: bold;
}

.cs_list02 li::marker {
  color: #e5e2cf;
  font-size: 1.1em;
}
@media only screen and (max-width: 640px) {
  .cs_list02 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #e5e2cf;
    color: #222;
    font-weight: bold;
    font-size: 16px;
  }
}

/*ボックス・交差する枠線*/
.cs_box01 {
  position: relative;
  margin: 3% auto;
  padding: 1em calc(1.5em + 9px);
  border-top: 3px solid #e5e2cf;
  border-bottom: 3px solid #e5e2cf;
  color: #222;
  background: #fffcf6;
}

.cs_box01::before,
.cs_box01::after {
  position: absolute;
  width: 3px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% + 20px);
  background-color: #e5e2cf;
  content: "";
}

.cs_box01::before {
  left: 9px;
}

.cs_box01::after {
  right: 9px;
}
/*ボックス・タイトル枠内*/
.cs_box02 {
  margin: 3% auto;
  max-width: 100%;
  border: 3px solid #e5e2cf;
  border-radius: 3px;
  overflow: hidden;
}

.cs_box02 span {
  padding: 0.4em 0.8em;
  background-color: #e5e2cf;
  color: #222;
  font-weight: bold;
}

.cs_box02 p {
  margin: 0;
  padding: 1em 1.5em;
  color: #222;
}

/*ボックス・注意アイコン・赤*/
.cs_box_att01 {
  display: flex;
  grid-gap: 0 0.7em;
  margin: 2% auto;
  padding: 2em 1em;
  border-radius: 5px;
  background-color: #ffebee;
  color: #333333;
}

.cs_box_att01::before {
  width: 24px;
  height: 24px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.cs_box_att01 p {
  margin: 0;
  padding: 0 0 0 1em;
  border-left: 1px solid #f06060;
  font-weight: bold;
}
@media only screen and (max-width: 640px) {
  .cs_box_att01 {
    display: flex;
    grid-gap: 0 0.7em;
    margin: 6% auto;
    padding: 1em 1em;
    border-radius: 5px;
    background-color: #ffebee;
    color: #222;
  }
}
/*ボックス・注意アイコン・タイトル*/
.cs_box_att02 {
  max-width: 100%;
  margin: 3% auto;
  border: 3px solid #f06060;
  border-radius: 5px;
  color: #333333;
}

.cs_box_att02 div {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -13px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #fff;
  color: #f06060;
  font-weight: bold;
  vertical-align: top;
}

.cs_box_att02 div::before {
  width: 22px;
  height: 22px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.cs_box_att02 p {
  margin: 0;
  padding: 0 1.5em 1em;
  font-weight: bold;
}

/*吹き出し・下向き*/
.cs_balloon01 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 100%;
  margin: 4% 0;
  padding: 0.8em 1.2em;
  border-radius: 5px;
  background-color: #eaefef;
  color: #222;
  font-weight: bold;
}

.cs_balloon01::before {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 15px;
  background-color: #eaefef;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}
@media only screen and (max-width: 640px) {
  .cs_balloon01 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin: 8% 0;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-weight: bold;
    font-size: 14px;
  }
}

/*吹き出し・上向き*/
.cs_balloon02 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 100%;
  margin: 4% 0;
  padding: 0.8em 1.2em;
  border-radius: 5px;
  background-color: #eaefef;
  color: #222;
  font-weight: bold;
}

.cs_balloon02::before {
  position: absolute;
  top: -15px;
  width: 30px;
  height: 15px;
  background-color: #eaefef;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: "";
}
@media only screen and (max-width: 640px) {
  .cs_balloon02 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin: 8% 0;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-weight: bold;
    font-size: 14px;
  }
}

/*吹き出し・画像あり・矢印左向き*/
.cs_serifu_migi {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 0 22px;
}

.cs_serifu_migi img {
  max-width: 70px;
  height: 100%;
  border: 3px solid #e5e2cf;
  border-radius: 50%;
}

.cs_serifu_migi p {
  position: relative;
  max-width: 300px;
  margin: 3px 0 0;
  padding: 0.8em 1em;
  border-radius: 5px;
  background-color: #eaefef;
  color: #222;
}

.cs_serifu_migi p::before {
  position: absolute;
  left: -15px;
  width: 15px;
  height: 30px;
  background-color: #eaefef;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
}
@media only screen and (max-width: 640px) {
  .cs_serifu_migi {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
    margin: 3% 2%;
  }
  .cs_serifu_migi p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: 0.8em 1em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-size: 14px;
    font-weight: bold;
  }
}

/*吹き出し・画像あり・矢印右向き*/
.cs_serifu_hidari {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 0 22px;
}

.cs_serifu_hidari img {
  max-width: 70px;
  height: 100%;
  border: 3px solid #f2f2f2;
  border-radius: 50%;
}

.cs_serifu_hidari p {
  position: relative;
  max-width: 300px;
  margin: 3px 0 0;
  padding: 0.8em 1em;
  border-radius: 5px;
  background-color: #eaefef;
  color: #222;
}

.cs_serifu_hidari p::before {
  position: absolute;
  right: -15px;
  width: 15px;
  height: 30px;
  background-color: #eaefef;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}
@media only screen and (max-width: 640px) {
  .cs_serifu_hidari p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: 0.8em 1em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-size: 14px;
    font-weight: bold;
  }
  .cs_qa dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #f2f2f2;
    color: #333333;
    font-size: 15px;
    font-weight: bold;
  }
}

/*Q＆Aリスト*/
.cs_qa dt {
  margin-bottom: 1em;
  color: #333333;
  font-weight: 600;
}

.cs_qa dt::before,
.cs_qa dd::before {
  margin-right: 0.4em;
}

.cs_qa dt::before {
  content: "Q.";
}

.cs_qa dd {
  margin: 0 0 2.5em;
  padding: 1em 1.5em;
  background-color: #f2f2f2;
  color: #333333;
}

.cs_qa dd::before {
  content: "A.";
}

@media only screen and (max-width: 640px) {
  .cs_h02 {
    border-bottom: solid 3px #e5e2cf;
    position: relative;
    padding-bottom: 5%;
    margin-bottom: 5% !important;
    font-weight: bold;
    font-size: 20px;
  }
  .cs_h03 {
    border-bottom: solid 3px #e5e2cf;
    padding-bottom: 3%;
    margin-bottom: 5% !important;
    font-weight: bold;
    font-size: 18px;
  }
  .cs_h04 {
    border-bottom: 3px dashed #e5e2cf;
    padding-bottom: 3%;
    margin-bottom: 4% !important;
    font-weight: bold;
    font-size: 16px;
  }

  .cs_list02 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #e5e2cf;
    color: #222;
    font-weight: bold;
    font-size: 16px;
  }

  .cs_box_att01 {
    display: flex;
    grid-gap: 0 0.7em;
    margin: 6% auto;
    padding: 1em 1em;
    border-radius: 5px;
    background-color: #ffebee;
    color: #222;
  }
  .cs_balloon01 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin: 8% 0;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-weight: bold;
    font-size: 14px;
  }
  .cs_balloon02 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 100%;
    margin: 8% 0;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-weight: bold;
    font-size: 14px;
  }

  .cs_serifu_migi {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
    margin: 3% 2%;
  }
  .cs_serifu_migi p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: 0.8em 1em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-size: 14px;
    font-weight: bold;
  }
  .cs_serifu_hidari p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: 0.8em 1em;
    border-radius: 5px;
    background-color: #eaefef;
    color: #222;
    font-size: 14px;
    font-weight: bold;
  }
  .cs_qa dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #f2f2f2;
    color: #333333;
    font-size: 15px;
    font-weight: bold;
  }
}
/**/

.cs_btn_range {
  background: #eee;
  padding: 2% 0;
}
.cs_button01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 370px;
  margin: 0 auto;
  padding: 2% 0;
  border: none;
  border-radius: 65px;
  background-color: #b8001f;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

.cs_button01::after {
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
}

.cs_button01:hover {
  background-color: #cf0627;
}

.cs_button01 a {
  color: #fff;
}

/*--------------------
 
 
 -------------------------*/
.cs_product_list {
  width: 100%;
  overflow: hidden;
  clear: both;
}

.product-code-default-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 1em;
  width: 300px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background-color: #00ae98;
  transition: 0.3s;
}

.product-code-default-btn::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

.product-code-default-btn:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}

.cs_product_list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}

@media only screen and (max-width: 640px) {
  .cs_product_list ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

.cs_product_list ul li {
  width: 100%;
  margin: 0;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  box-sizing: border-box;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cs_product_list ul li a {
  display: block;
  text-decoration: none;
}

p.cs_product_list_photo {
  display: block;
  text-align: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 5px;
  transition-duration: 0.1s;
}

p.cs_product_list_photo:hover {
  transform: scale(1.01, 1.01);
  cursor: pointer;
}

p.cs_product_list_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

p.cs_product_list_name {
  font-size: 13px;
  padding: 0 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: 3.9em;
  line-height: 1.3;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

p.cs_product_list_price {
  background: #fff !important;
  display: block;
  width: 100%;
  margin: 0 auto;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  color: #d62828;
}

p.cs_product_list_price span {
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #d62828 !important;
  font-weight: bold !important;
}

@media only screen and (min-width: 641px) {
  p.cs_product_list_name {
    font-size: 14px;
  }
  p.cs_product_list_price span {
    font-size: 21px;
  }
}

/*table*/
/**/
table.cs_table {
  border-collapse: collapse;
  margin: 3% auto;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  color: #25343f;
}

table.cs_table tr {
  background-color: #fff;
  padding: 0.35em;
  border-bottom: 1px dashed #ccc;
}

table.cs_table tr:last-child {
  border-bottom: 3px solid #25343f;
}

table.cs_table th,
table.cs_table td {
  padding: 20px 10px;
  color: #25343f;
  font-weight: normal;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

table.cs_table tbody th {
  color: #25343f;
  font-weight: normal;
  font-size: 17px;
  font-weight: bold;
}

table.cs_table .txt {
  text-align: center;
  font-size: 16px;
  display: block;
}

table.cs_table .price {
  text-align: right;
  font-size: 20px;
}

.cs_table_bg {
  background: #eee;
  color: #d62828 !important;
  font-weight: bold !important;
}

/*PC_ヘッダーログイン*/

.cs_pc_head_login {
  background: #605b51;
  padding: 8px 0;
}

.ec-headerNaviRole__nav {
  width: 1200px;
  margin: auto;
  padding: 0;
}

span.ec-headerNav__itemLink {
  color: #222 !important;
  font-weight: bold;
  vertical-align: middle !important;
}

i.ec-headerNav__itemIcon {
  color: #222 !important;
  vertical-align: middle !important;
  font-size: 15px !important;
}

.ec-headerNav__item a {
  display: block;
  background: #fff;
  line-height: 23px;
  padding: 0 15px;
  text-align: center;
  transition: background-color 0.3s ease;
  border-radius: 0;
  height: 30px;
}

.ec-headerNav__item a:hover {
  text-decoration: none;
  background: #f5f2f2;
  color: #fff !important;
}

.ec-headerNav__item {
  display: inline-block;
  margin-right: 5px;
}

.ec-headerNav__item:last-child {
  margin-right: 0;
}

.ec-headerNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ec-headerNav__left,
.ec-headerNav__right {
  display: flex;
  align-items: center;
}

.ec-headerNav__item {
  display: block;
  margin-right: 5px;
}

.ec-headerNav__left .ec-headerNav__item a {
  background: transparent;
  border: 1px solid #666;
  color: #fff;
}

.ec-headerNav__left span.ec-headerNav__itemLink {
  color: #fff !important;
}

@media only screen and (max-width: 640px) {
  .ec-headerNav__left,
  .ec-headerNav__right {
    display: none;
  }
  .ec-headerNav {
    display: none;
  }
  .ec-headerNaviRole__right {
    display: none;
  }
}

/*PC_header*/
#wrap_top {
  width: 100%;
  margin: 0 auto !important;
  background: #bf1331;
  height: 40px;
}

#wrap_top h1 {
  color: #fff;
  display: block;
  width: 1200px;
  margin: auto;
  font-size: 18px;
  line-height: 40px;
}
@media only screen and (max-width: 640px) {
  div#wrap_top {
    height: auto !important;
  }

  div#wrap_top h1 {
    font-size: 15px !important;
    line-height: 1.4;
    font-weight: bold;
  }
}

/**/
#header {
  width: 1200px;
  margin: 10px auto 10px;
  background: #fff;
  overflow: hidden;
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}

.header_banners_single {
  flex: 1;
  text-align: center;
  padding: 0;
}

.header_banners_single img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* --- ここが重要：640px未満で非表示 --- */
@media screen and (max-width: 640px) {
  .header_banners_single {
    display: none;
  }

  .header_inner {
    padding: 5px 10px;
  }
}

/*買取の流れ*/
p.cs_kaitori_flow_image img {
  width: 50%;
}

.cs_kaitori_flow_box {
  border: 8px solid #e5e2cf;
  padding: 10px;
}
@media only screen and (max-width: 640px) {
  p.cs_kaitori_flow_image img {
    width: 80%;
  }
}

/*SPバーガーメニューを固定*/
@media only screen and (max-width: 640px) {
  /* メニューを含むヘッダー全体を固定 */
  .ec-headerNaviRole {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #ddd;
  }

  .ec-layoutRole__header {
    padding-top: 60px;
  }

  .ec-headerRole__navSP {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 50px;
  }

  .ec-headerNavSP {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 20px;
    border-radius: 0;
  }

  .header-text-banner-sp {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 100%;
    box-sizing: border-box;
  }

  .banner-inner {
    text-align: center;
    line-height: 1.2;
  }

  /* 1行目：専門店！ */
  .banner-catch {
    display: block;
    color: #222;
    font-size: 15px;
    font-weight: bold;
  }

  /* 2行目：買取スピード... */
  .banner-lead {
    display: block;
    color: #bf1331;
    font-size: 18px;
    font-weight: bold;
  }
}

/*PC_ヘッダー*/

.cs_contact_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  margin: 0 auto;
  padding: 0.9em 2em;
  border: none;
  border-radius: 25px;
  background-color: #456882;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}

.cs_contact_btn:hover {
  background-color: #355872;
}

.cs_contact_btn::before {
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: "";
}

button.cs_contact_btn a {
  color: #fff;
}

button.cs_contact_btn a:hover {
  text-decoration: none;
}

.cs_contact_header {
  display: inline-block;
  position: relative;
  padding: 0 2.5em;
  color: #222222;
  /* text-align: center; */
  font-size: 13px;
  font-weight: bold;
}

.cs_contact_header::before,
.cs_contact_header::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 25px;
  height: 3px;
  background-color: #456882;
}

.cs_contact_header::before {
  left: 0;
}

.cs_contact_header::after {
  right: 0;
}

.header_contact {
  text-align: center;
}

p.cs_contact_info {
  font-size: 13px;
  font-weight: bold;
  background: #eee;
  margin: 3% 0 0;
  padding: 1%;
}

/**/
/* --- ここからご指定の条件に基づいたデザイン --- */
.cs_fome_wrap {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* フォームの配色 (ご指定の修正版) */
.cs_fome_wrap input[type="text"],
.cs_fome_wrap input[type="password"],
.cs_fome_wrap input[type="email"],
.cs_fome_wrap select {
  border: 2px solid #9aa6b2;
  border-radius: 4px;
  padding: 20px;
  transition:
    background-color 0.3s,
    border-color 0.3s;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  box-sizing: border-box;
}

/* 必須ラベル */
.cs_fome_wrap .ec-required {
  background-color: #db1a1a !important;
  color: #fff !important;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 2px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ボタン配色 */
.cs_fome_wrap .ec-blockBtn--action {
  background-color: #db1a1a !important; /* 決定ボタン */
  color: #fff !important;
}

.cs_fome_wrap .ec-blockBtn--cancel {
  background-color: #bfc6c4 !important; /* 否定ボタン */
  color: #fff !important;
}

/* 任意ボタン */
.cs_fome_wrap .ec-blockBtn--secondary {
  background-color: #456882 !important; /* 任意ボタン */
  color: #fff !important;
}

/* 挙動：入力完了（緑）、エラー（赤） */
.cs_fome_wrap .input-success {
  background-color: #e8f5e9 !important; /* 薄い緑 */
  border-color: #4caf50 !important;
}

.cs_fome_wrap .input-error {
  background-color: #ffebee !important; /* 薄い赤 */
  border-color: #db1a1a !important;
}

.ec-zipInputHelp {
  display: none;
}
/* ツールチップアラート */
.alert-tooltip {
  position: absolute;
  background: #db1a1a;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  margin-top: -55px;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.alert-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 15px;
  border-width: 5px;
  border-style: solid;
  border-color: #db1a1a transparent transparent transparent;
}

.input-container {
  position: relative;
  width: 100%;
}
/* 入力項目の共通スタイル */
.cs_fome_wrap input[type="text"],
.cs_fome_wrap input[type="password"],
.cs_fome_wrap input[type="email"],
.cs_fome_wrap select {
  border: 2px solid #9aa6b2;
  border-radius: 4px;
  padding: 15px 20px; /* パディングを少し調整して視認性確保 */
  transition:
    background-color 0.3s,
    border-color 0.3s;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif !important;
  min-height: 56px; /* 高さを固定せず最小値で指定 */
}

/* セレクトボックス（都道府県など）の個別修正 */
.cs_fome_wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
  padding-right: 40px;
  background-color: #fff;
}

/* スマホ用調整 (@media 640px) */
@media only screen and (max-width: 640px) {
  body {
    padding: 10px;
  }
  .cs_fome_wrap {
    padding: 20px 0;
    box-shadow: none;
  }
  .cs_fome_wrap .ec-registerRole {
    padding: 0;
  }

  .ec-borderedDefs dl {
    flex-direction: column;
    padding: 10px 0 0 0;
  }

  .ec-borderedDefs dt {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 0;
  }

  .ec-halfInput {
    flex-direction: column;
    gap: 10px;
  }

  .ec-halfInput input {
    width: 100%;
  }

  .ec-zipInput input {
    width: 100%;
    min-width: 50% !important;
  }

  .cs_fome_wrap input[type="text"],
  .cs_fome_wrap input[type="password"],
  .cs_fome_wrap input[type="email"],
  .cs_fome_wrap select {
    height: 40px !important;
  }

  .ec-blockBtn--action,
  .ec-blockBtn--cancel {
    max-width: 100%;
  }
}

/*同意のチェックボックス*/
/* ラベル全体の調整 */
.cs_doui_ck {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;

  /* 間隔を広げる：16px〜20px程度あると誤操作が減ります */
  gap: 16px;

  /* 押しやすくするために上下に少し余白を持たせる */
  padding: 8px 0;
  margin: 0 0 20px;
}

/* チェックボックス自体のサイズと余白リセット */
.cs_doui_ck input[type="checkbox"] {
  margin: 0;
  width: 20px; /* 16pxのフォントに対して、少し存在感を出して20pxに */
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: bottom;
}

/* 利用規約リンク */
.ec-link {
  color: #007bff;
  text-decoration: underline;
  font-weight: bold;
  /* リンク自体にも少し左右に余白を持たせるとさらに安全です */
  padding: 2px 4px;
}

/* 補足：スマホでタップしやすくする場合 */
@media (max-width: 768px) {
  .cs_doui_ck {
    gap: 20px; /* モバイルではさらに広めに */
  }
}