@charset "utf-8";

/* CSS Document */

/***************STEP3以降***************/
.under-ten-form {
  margin-top: 30px;
}

/* たたみ袋詰め */
#ev_packaging label {
  display: flex !important;
}

/***************初期状態非表示***************/
.under-ten-init-hide {
}

/***************11枚以上表示***************/
.over-ten {
}

/***************画面上部メニュー***************/

/* 10枚以下選択メッセージ・ボタン表示位置 */
@media screen and (max-width:768px) {
  .under-ten-div {
    text-align: center;
  }
}

/* 10枚以下説明メッセージ */
.under-ten-explanation {
  padding: 3px 5px;
  font-size: 1.125rem;
  margin-bottom: 0.6em;
  color: #000;
  font-weight: bold;
}
@media screen and (max-width:768px) {
  .under-ten-explanation {
    padding: 3px 5px;
    font-size: 1.125rem;
    margin-bottom: 0.6rem;
  }
}

/* 10枚以下選択ボタン表示位置設定 */
.under-ten-button-div {
  float: left;
  margin-right: 20px;
}
@media screen and (max-width:768px) {
  .under-ten-button-div {
    float: none;
    margin-right: 0;
  }
}

/* 10枚以下/11枚以上ボタン設定 */
.under-ten-select-btn {
  display: inline-block;
  padding: 1.25em 50px;
  min-width: 200px;
  color: #fff !important;
  border: none;
  background-color: #333;
  text-align: center;
  font-size: 1.25rem;
  cursor: pointer;
  margin-bottom: 1.25em;
  letter-spacing: 0.05em;
  border-radius: 5px;
  font-weight: bold;
  transition:all 0.2s ease;
  text-decoration: none !important;
}

/***************自動見積もりフォーム***************/

/* フォーム全体設定 */
.under-ten-estimate-div {
  width: 100%;
  padding: 0px 25px 10px 0px;
  background: rgb(255, 255, 255);
  color: #222222;
  font-weight: bold;
  text-align: center;
}

/* 「計算する」ボタン */
.under-ten-estimate-btn {
  display: inline-block;
  background-color: #333;
  padding: 15px 0;
  width: 100%;
  max-width: 200px;
  color: #fff;
  border: none;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: -10px;
  letter-spacing: 0.05em;
  border-radius: 5px;
  font-weight: bold;
  transition:all 0.2s ease;
}
.under-ten-estimate-btn:hover {
  opacity: 0.7;
}

/* 下向き矢印 */
.under-ten-under-arrow {
  display: inline-block;
  width: 46px;
  height: 35px;
  background: #ccc;
  margin: 25px 0 12.5px 0;
  clip-path: polygon(0 44.9%, 28.2% 44.9%, 28.2% 0, 71.8% 0, 71.8% 44.9%, 100% 44.9%, 50% 100%);
}

/***************自動見積もり計算結果フォーム***************/

/* フォーム全体設定 */
.under-ten-estimate-result {
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 990px) {
  .under-ten-estimate-result {
      display: none;
      width: 95%;
  }
}
/* フォーム罫線 */
.under-ten-estimate-result-frame {
  border: 2px solid #ccc;
}
/* フォーム内リンク設定 */
.under-ten-estimate-result a {
  text-decoration: none;
}

/* お見積もり内容文字列 */
.under-ten-estimate-title {
  background-color: #f0f0f0;
  padding: 8px 15px;
  font-size: 1.25rem;
  color: #333;
  line-height: 1.3;
  margin-bottom: 10px;
}
/* 合計金額・1枚当たりの金額ラベル文字列 */
.under-ten-estimate-total {
  font-size: 1.25rem;
  margin: 20px auto 0;
  line-height: 1.6;
}
@media screen and (max-width:768px) {
  .under-ten-estimate-total {
    font-size: 1.5rem;
  }
}
/* 合計金額・1枚当たりの金額文字列 */
.under-ten-estimate-money {
  font-size: 2.25rem;
  color: #e80000;
}
@media screen and (max-width:768px) {
  .under-ten-estimate-money {
    font-size: 2rem;
  }
}

/* 下向き三角 */
.under-ten-under-triangle {
  width: 25px;
  height: 25px;
  border: 5px solid;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(-45deg);
  margin: 0 auto;
  margin-bottom: 5px !important;
}

.under-ten-submit-btn {
  display: inline-block;
  padding: 1.25em 0;
  width: 100%;
  max-width: 480px;
  color: #fff;
  border: none;
  background-color: #e92f29;
  text-align: center;
  font-size: 1.25rem;
  cursor: pointer;
  margin-bottom: 3px;
  letter-spacing: 0.05em;
  border-radius: 5px;
  font-weight: bold;
  transition:all 0.2s ease;
}

.under-ten-submit-btn:hover {
  opacity: 0.7;
}
@media screen and (max-width:768px) {
  .under-ten-submit-btn {
    width: 90%;
  }
}