@charset "utf-8";

/** ========================================
 * @
 * 導入テキスト
 * ====================================== */
.mv-intro{
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}
.mv-intro .note-txt{
  margin: 28px 0 0;
  text-align: right;
}
.lead-txt{
  text-align: center;
}
.note-txt{
  font-size: 12px;
}
.lead-txt + .note-txt{
  margin-top: 41px;
}

@media screen and (max-width: 768px) {
  .mv-intro{
    padding: 0 20px;
  }
  .lead-txt{
    text-align: left;
  }
  .note-txt{
    text-align: left;
    text-indent: -1em;
    margin-left: 1em;
  }
  .lead-txt + .note-txt{
    margin-top: 16px;
  }
}


/** ========================================
 * @
 * 共通系
 * ====================================== */
@media screen and (min-width: 769px) {
  .main-article__contents{
    max-width: 1043px;
  }
}

.sp-only{
  display: none;
}

.link--underline{
  text-decoration: underline !important;
}

/* テーブル */
.primary-tbl{
  width: 100%;
}
.primary-tbl th{
  background: #f6f6f6;
}
.primary-tbl th,
.primary-tbl td{
  border: 1px solid #ccc;
}

/* 入力系共通 */
.primary-tbl input[type="text"]{
  width: 420px;
  height: 32px;
  margin-right: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #eaf5fc;
}
.primary-tbl select{
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  width: 80px;
  height: 32px;
  margin-right: 16px;
  border: 1px solid #ccc;
  background: #eaf5fc;
}

/* ボタン */
.btn-block{
  margin: 42px 0 0;
}
.primary-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  border: 1px solid #000;  border-radius: 8px;
  background: #cc023a;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.primary-btn::after{
  content: "";
  display: inline-block;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  height: 10px;
  transform: rotate(45deg) translateY(-50%);
  width: 10px;
  position: absolute;
  right: 16px;
  top: 50%;
}
.primary-btn--m{
  width: 320px;
  height: 50px;
  font-size: 18px;
}
.primary-btn--l{
  width: 540px;
  max-width: 100%;
  height: 90px;
  font-size: 32px;
}
.primary-btn--l span{
  color: #fff;
  font-size: 16px;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .main-article__contents{
    margin: 0;
  }

  .sp-only{
    display: block;
  }

  .primary-tbl input[type="text"]{
    width: calc(100% - 50px);
  }

  .primary-btn--l{
    font-size: 28px;
  }
  .primary-btn--l span{
    font-size: 14px;
  }
}




/** ========================================
 * @
 * 上部テーブル
 * ====================================== */
.top-tbl th{
  width: 240px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .top-tbl,
  .top-tbl tbody,
  .top-tbl tr,
  .top-tbl th,
  .top-tbl td{
    display: block;
  }
  .top-tbl tbody,
  .top-tbl tr,
  .top-tbl th,
  .top-tbl td{
    width: 100%;
  }

  .top-tbl th,
  .top-tbl td{
    border-top: none;
  }

  .top-tbl tr:first-of-type th{
    border-top: 1px solid #ccc;
  }

}



/** ========================================
 * @
 * チェックテーブル
 * ====================================== */
.main-check{
  margin: 59px 0 0;
}
.h2__title + .lead-txt{
  margin: 41px 0 0;
}
.check-tbl{
  margin: 19px 0 0;
}
.check-tbl th,
.check-tbl td{
  text-align: center;
  vertical-align: middle;
}
.check-tbl th{
  width: calc((100% - 201px) / 2);
}
.check-tbl th.clr--bl{
  width: 201px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .check-tbl{
    margin-top: 40px;
  }
  .check-tbl th,
  .check-tbl td{
    padding: 16px 5px;
    font-size: 14px;
  }
  .check-tbl th{
    width: 36%;
  }
  .check-tbl th.clr--bl{
    width: 28%;
  }
}

.check-tbl .clr--bl{
  background: #eaf5fc;
}
.check-tbl .clr--bl.is-checked{
  background: #dfe8fa;
}
.check-tbl td a{
  line-height: 1.5;
}

/* 本来のチェックボックスを非表示 */
.custom-checkbox{
  display: inline-block;
}
.custom-checkbox input[type="checkbox"] {
  display: none;
}
/* 擬似ボックス */
.custom-checkbox span {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* ボックスの枠 */
.custom-checkbox span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #4c4a48;
  border-radius: 3px; /* 丸みをつけたい場合 */
  background: #fff;
  box-sizing: border-box;
}
/* チェックが入った時のスタイル */
.custom-checkbox input[type="checkbox"]:checked + span::before {
  background: #4c4a48;
  border-color: #4c4a48;
}
/* チェックマーク（✔） */
.custom-checkbox input[type="checkbox"]:checked + span::after {
  content: "✔";
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.estimate-btn:not(.is-active){
  background: #999;
  pointer-events: none;
}


@media screen and (min-width: 769px) {
  .h2__title--ja{
    font-size: 22px;
  }
  .h2__title::after{
    width: 60px;
    margin: 17px 0 0;
  }
}
@media screen and (max-width: 768px) {
}



/** ========================================
 * @
 * 御見積書
 * ====================================== */
.main-estimate{
  display: none;
  margin: 61px 0 0;
  padding: 42px 0 0;
  border-top: 1px solid #000;
}
.estimate-heading{
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}
.estimate-name{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 51px 0 0;
}
.default-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  background: #eaf5fc;
  border-bottom: 1px solid #d3d3d3;
}
.estimate-name .default-item{
  display: flex;
  align-items: center;
  width: 500px;
  height: 51px;
}
.estimate-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 23px 0 0;
}
.estimate-txt{
  font-size: 14px;
}
.estimate-data{
  display: flex;
  align-items: center;
}

.estimate-data--date{
  gap: 15px;
}
.estimate-data--date .default-item{
  width: 200px;
  height: 30px;
}
.estimate-data--num .default-item{
  width: 80px;
  height: 30px;
  margin: 0 11px 0 15px;
}

.estimate-tbl{
  margin: 50px 0 0;
}
.estimate-tbl thead th{
  background: #2e74b5;
  color: #fff;
  font-weight: bold;
}
.estimate-tbl th,
.estimate-tbl td{
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}
.total-item02{
  width: 302px;
}
.total-item03{
  width: 265px;
}

.breakdown-item02{
  width: 244px;
}
.breakdown-item03{
  width: 58px;
}
.breakdown-item04{
  width: 265px;
}

.estimate-tbl .clr--dkbl{
  background: #dfe8fa;
}
.estimate-tbl .clr--bl{
  background: #eaf5fc;
}

.add-note .note-txt{
  margin-top: 21px;
}

.add-note .note-txt + .note-txt {
  margin-top: 0;
}

.note-block{
  margin: 24px 0 0;
}
.note-heading,
.note-block .note-txt{
  font-size: 14px;
}


.border-block{
  margin: 28px 0 0;
  padding: 14px 18px 22px;
  border: 1px solid #000;
}
.point-txt{
  color: #003399;
  font-size: 14px;
  line-height: 1.8;
}
.note-list{
  margin: 26px 0 0;
}
.note-list .note-txt{
  margin-left: 1.2rem;
  text-indent: -1.2rem;
}


@media screen and (max-width: 768px) {
  .estimate-block{
    overflow-x: auto;
  }
  .estimate-inner{
    min-width: 943px;
  }
}



/** ========================================
 * @
 * 印刷用設定
 * ====================================== */
@media print {
  @page {
    size: A4 portrait; /* A4縦向き */
    margin: 10mm;     /* 余白調整 */
  }

  header,
  .txt-mv,
  .mv-intro,
  .main-top,
  .main-check,
  .btn-block,
  .ContactUsButtonHQJp,
  .BackToTop,
  footer{
    display: none;
  }
  main{
    padding: 0!important;
  }
  .main-article__contents{
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }
  .main-article__contents--inner{
    padding: 0;
  }

  .main-estimate{
    display: block;
    margin: 0;
    padding: 0;
    border: none;
  }
  .estimate-block{
    font-size: 14px;
  }

  /* テキスト関係 */
  .estimate-txt,
  .note-block .note-txt,
  .point-txt{
    font-size: 12px;
  }

  .estimate-name{
    margin-top: 30px;
  }
  .estimate-name .default-item{
    height: 40px;
  }

  .estimate-tbl{
    margin-top: 20px;
  }
  .estimate-tbl th,
  .estimate-tbl td{
    padding: 10px 5px;
  }
  .estimate-tbl .clr--bl{
    min-width: 95px;
  }

  /* 御見積金額テーブル */
  .total-item02{
    width: 33%;
  }
  .total-item03{
    width: 28%;
  }

  /* 内訳テーブル */
  .breakdown-item02{
    width: 26%;
  }
  .breakdown-item03{
    width: 7%;
  }
  .breakdown-item04{
    width: 28%;
  }


}