@charset "UTF-8";
/* 必須指定 */
#contWrap {
  margin: 0 auto;
  width: 100%;
  color: #262625;
  background-color: #ECECEC;
}
#contWrap a:hover{
  opacity: 0.7;
  text-decoration: none;
}
@media screen and (max-width: 750px) {
  #contWrap {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
/*共通*/
#contWrap .flex-wrap{
  display: flex;
  justify-content: space-between;
}
#contWrap  .title-wrap{
  border-left: 10px solid #735F58;
  padding: 0 0 0 3%;
  margin: 0 0 30px 0;
}
#contWrap  .title-wrap h3{
  font-size: 2.2em;
  font-weight: bold;
  margin: 0 0 10px 0;
}
#contWrap  .title-wrap p{
  font-size: 1.125em;
}
#contWrap .title-bar {
  color: #fff;
  text-align: center;
  margin: 0 0 20px 0;
}
#contWrap .title-bar h3{
  font-size: 1.5em;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 0 6%;
  margin: 0 0 16px 0;
}
#contWrap .title-bar h3::before,#contWrap .title-bar h3::after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 4px;
  background-color: #fff;
}
#contWrap .title-bar h3::before{
  left: 0;
}
#contWrap .title-bar h3::after{
  right: 0;
}
#contWrap .title-bar p{
  font-size: 1.125em;
}
#contWrap .way-wrap{
  background-color: #fff;
  border-radius: 10px;
  padding: 3% 10%;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  #contWrap .flex-wrap{
    display:block;
  }
  #contWrap .title-bar h3::before, #contWrap .title-bar h3::after {
    width: 28px;
  }
  #contWrap .title-bar h3{
    padding: 0 13%;
  }
}
/*mv
---------------------------------------*/
#mv{
  width: 100%;
  position: relative;
}
#mv .mv__bg-wrap{
  background-image: url(../images/main-bg.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  height: 560px;
}
#mv .mv__text-wrap{
  background:rgba(102,84,79,0.87);
  min-height: 250px;
  color: #fff;
  display: table;
  width: 100%;
  position: absolute;
  top: 120px;
}
#mv .mv__text-wrap>div{
  display: table-cell;
  vertical-align: middle;
  padding:0 0 0 6%;
}
#mv .mv__text-wrap h2{
  font-size: 1.25em;
  font-weight: bold;
  margin:0 0 10px 0
}
#mv .mv__text-wrap h2 span{
  font-size: 2.2em;
}
#mv .mv__img-wrap{
  position: absolute;
  bottom: 0;
  right: 6%;
  width: 24%;
}
@media screen and (max-width: 750px) {
  #mv .mv__bg-wrap{
    background-image: url(../images/main-bg_S.jpg);
  }
  #mv .mv__text-wrap>div{
    padding: 6%;
  }
  #mv .mv__text-wrap{
    top: 60px;
  }
  #mv .mv__img-wrap{
    bottom: 78px;
    right: 6%;
    width: 27%;
  }
}
@media screen and (min-width: 508px) {
  #mv .mv__img-wrap{
    width: 22%;
  }
}
/*product
---------------------------------------*/
#product{
  margin-top: -80px;
  z-index: 10;
  position: relative;
}
#product .wrapper{
  padding: 0 3% 0 3%;
  margin: 0 0 80px 0;
}
#product .wrapper > div{
  background-color: #fff;
  border-radius: 6px;
  padding: 3%;
}
#product .flex-wrap > div{
  width: 30%;
}
#product h4{
  font-weight: bold;
  margin: 14px 0 10px 0;
}
#product .note{
  color: #A1330A;
  font-size: 0.875em;
  font-weight: bold;
}

/*type
---------------------------------------*/
#type .wrapper{
  padding: 0 6% 0 6%;
  margin: 0 0 120px 0;
}
#type .type_wrap{
  margin: 0 0 38px 0;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #ccc;
}
#type .image-wrap{
  width: 31.5%;
}
#type .text-wrap{
  width: 64%;
}
#type .ttl{
  background-color: #595959;
  display: flex;
  align-items: center;
  min-height: 80px;
  margin-bottom: 26px;
}
#gold .ttl{
  background-image: url(../images/bg_gold.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#hl .ttl{
  background-image: url(../images/bg_hl.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#mirror .ttl{
  background-image: url(../images/bg_mirror.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#type .ttl > p{
  background-color: #262625;
  color: #FFF;
  padding: 3px 20px 5px 20px;
}
#type .ttl > h4{
  color: #262625;
  font-size: 1.375em;
  margin-left: 26px;
  font-weight: bold;
}
#paint .ttl > h4{
  color: #fff;
}
#type table{
  background-color: #fff;
  border-collapse:  collapse;
  width: 100%;
  margin: 26px 0 26px 0;
}
#type th,#type td{
  border: solid 1px #EDEDED;
}
#type th{
  background-color: #735F58;
  color: #fff;
  font-weight: normal;
}
#type th span,#type .note{
  font-size: 0.875em;
}
#type td{
  text-align: center;
  padding: 6px 0 8px 0;
}
#type td span{
  color: #A1330A;
  font-weight: bold;
  font-size: 1.375em;
}
/*font
---------------------------------------*/
#font .wrapper{
  padding: 0 6% 0 6%;
  margin: 0 0 120px 0;
}
#font .title-wrap .note{
  font-size: 0.875em;
  color: #A1330A;
  font-weight: bold;
}
#font .font-note{
  background-color: #fff;
  border-radius: 10px;
  padding: 30px 6%;
  color: #A1330A;
  text-align: center;
  margin: 100px 0 0 0;
}
#font .font-note h4{
  font-size: 1.125em;
  font-weight: bold;
}
#font .font-note > div{
  margin: 30px 0 0 0;
}
#font .flex-wrap{
  flex-wrap: wrap;
}
#font .font-box{
  width: 32%;
  margin-bottom: 20px;
  background-color: #fff;
}
#font .font-box>p{
  color: #fff;
  background-color: #262625;
  font-size: 16px;
  line-height: 2;
  padding-left: 20px;
}
#font .font-box>div{
  padding: 20px;
}
/*gatepost
---------------------------------------*/
#gatepost .wrapper{
  padding: 0 6% 0 6%;
  margin: 0 0 120px 0;
}
#gatepost .title-wrap .note{
  font-size: 0.875em;
  color: #A1330A;
  font-weight: bold;
}
#gatepost .flex-wrap{
  flex-wrap: wrap;
}
#gatepost .gatepost-box{
  width: 32%;
  background-color: #fff;
  padding: 2% 1%;
  margin-bottom: 30px;
}
#gatepost table{
  width: 82%;
  margin: 16px auto 0 auto;
}
#gatepost table th{
  background-color: #735F58;
  color: #fff;
  font-size: 0.75em;
  font-weight: normal;
}
#gatepost table td{
  font-size: 0.875em;
  margin-left: 20px;
  padding-left: 5%;
  font-weight: bold;
}
/*way
---------------------------------------*/
#way{
  background-color: #735F58;
}
#way .wrapper{
  padding: 60px 6% 60px 6%;
}
#way .way-wrap .img-box{
  width: 52%;
}
#way .way-wrap .text-box{
  width: 36%;
}
#way .way-wrap ol li{
  list-style: decimal;
  font-weight: bold;
  font-size: 1.375em;
  margin: 0 0 8px 0;
}
#way .way-wrap ol li .example{
  font-size: 0.8em;
  color: #735F58;
}
#way .form-btn{
  margin: 20px auto 0 auto;
  text-align: center;
}
#way .form-btn a{
  background-color: #F2994B;
  width: 60%;
  color: #fff;
  font-size: 1.375em;
  font-weight: bold;
  padding: 27px 0 30px 0;
}
/*flow
---------------------------------------*/
#flow .wrapper{
  padding: 60px 6% 60px 6%;
  margin: 0 0 20px 0;
}
#flow .title-bar{
  color: #262625;
}
#flow .title-bar h3::before,#flow .title-bar h3::after{
  background-color: #262625;
}
#flow .flex-wrap{
  margin: 0 0 20px 0;
  align-items: center;
}
#flow .flex-wrap .step-box{
  background-color: #735F58;
  color: #fff;
  padding: 16px 0 18px 0;
  width: 16%;
  text-align: center;
  position: relative;
}
#flow .flex-wrap .step-box::after{
  content: '';
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 9px 7px 0 7px;
  border-color: #735F58 transparent transparent transparent;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 4px);
  left: calc(50% - 5px);
}
#flow .flex-wrap .none::after{
  content: none;
}
#flow .flex-wrap .text-box{
  width: 80%;
  text-align: left;
}
#flow .note{
  color: #A1330A;
  font-weight: bold;
}
#flow li .img-box{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 10%;
  width: 80%;
  margin: 0 0 20px auto;
}
#flow .magazine{
  margin: 40px 0 0 0;
}
#flow .magazine h4{
  font-weight: bold;
  margin: 0 0 20px 0;
}
#flow .magazine .magazine-wrap{
  display: flex;
  justify-content: space-between;
  border: 1px solid #262625;
  background-color: #fff;
}
#flow .magazine .magazine-wrap .img-box{
  width: 30%;
}
#flow .magazine .magazine-wrap .text-box{
  width: 68%;
  padding: 2% 2% 0 0;
  position: relative;
}
#flow .magazine .magazine-wrap .text-box h5{
  font-weight: bold;
  font-size: 1.125em;
  margin: 0 0 16px 0;
}
#flow .magazine .magazine-wrap .text-box .link-btn{
  background-color: #262625;
  color: #fff;
  padding: 8px 6%;
  position: absolute;
  right: 0;
  bottom: 0;
}
/*faq
---------------------------------------*/
#faq .wrapper{
  padding: 60px 6% 60px 6%;
  margin: 0 0 30px 0;
}
#faq .title-bar{
  color: #262625;
}
#faq .title-bar h3::before,#faq .title-bar h3::after{
  background-color: #262625;
}
#faq .faq-wrap{
  background-color: #fff;
  border-radius: 10px;
  padding: 6%;
}
/*レコメンドバナー
---------------------------------------*/
#recommend .wrapper{
  padding: 60px 6% 60px 6%;
  margin: 0 0 30px 0;
}
#recommend .title-bar{
  color: #262625;
}
#recommend .title-bar h3::before,#recommend .title-bar h3::after{
  background-color: #262625;
}
#recommend .flex-wrap a{
  width: 49%;
  margin: 20px 0 0 0;
}
#recommend img{
  border: 1px solid #949494;
}

/*SP
---------------------------------------*/
@media screen and (max-width: 750px) {
  #product .flex-wrap > div,
  #type .image-wrap,
  #type .text-wrap,
  #gatepost .gatepost-box,
  #way .way-wrap .img-box,
  #way .way-wrap .text-box,
  #way .form-btn a,
  #flow .flex-wrap .step-box,
  #flow .flex-wrap .text-box,
  #flow li .img-box,
  #flow .magazine .magazine-wrap .img-box,
  #flow .magazine .magazine-wrap .text-box,
  #font .flex-wrap .font-box{
    width: 100%;
  }
  #mv .mv__text-wrap h2 {
    font-size: 1em;
  }
  #product .flex-wrap > div{
    margin: 0 0 40px 0;
  }
  #flow .flex-wrap .text-box{
    margin-top: 22px;
  }
  #flow .magazine .magazine-wrap{
    display: block;
  }
  #flow .magazine .magazine-wrap .text-box{
    padding: 20px 3% 40px;
  }
  #contWrap .way-wrap {
    padding: 20px 10% 20px 20%;
  }

}
/*お問合せエリア
---------------------------------------*/
#contact {
  width: 100%;
  background-color: #735F58;
  text-align: center;
  padding: 2%;
}
#contact .wrap {
  padding-top: 40px;
  padding-bottom: 44px;
}
#contact h3 {
  font-size: 36px;
  color: #FFF;
  font-weight: 700;
}
#contact h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
#contact .wrap>p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #FFF;
  margin: 18px 0 26px 0;
}
#contact .wrap_wrap {
  width: 75.86206896551724%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.contact_box {
  width: 48.86363636363637%;
  background-color: #FFF;
  border-radius: 6px;
  padding: 20px 0 8px 0;
}
.contact_tel {
  color: #ff6c00;
  text-decoration: none;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.8;
}
.contact_tel:hover {
  text-decoration: none;
}
.contact_box_p {
  font-size: 14px;
  margin-top: 10px;
}
.contact_box .btn {
  width: 60%;
  font-size: 16px;
  display: inline-block;
  background-color: #ff6c00;
  border-radius: 6px;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  padding: 15px 11% 12px 11%;
  border-bottom: solid 4px #a14400;
  margin-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 750px) {
  #contact {
    background-size: 50%;
    background-position: right 0 top 30px;
  }
  #contact h3 {
    font-size: 20px;
  }
  #contact .wrap>p {
    font-size: 16px;
    text-align: left;
  }
  #contact .wrap_wrap {
    width: 100%;
    display: block;
  }
  .contact_box {
    width: 100%;
    padding: 20px 0;
  }
  .contact_box:nth-child(1) {
    margin-bottom: 20px;
  }
  .contact_box .btn{
    width: 85%;
    padding: 0;
  }
}
/*お問合せ右下固定ボタン
---------------------------------------*/
.footer_fix_btn {
  position: fixed;
  width: 80px;
  right: 10px;
  bottom: 100px;
}
.footer_fix_btn a {
  display: block;
  width: 100%;
  text-decoration: none;
}
.footer_fix_btn a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 750px) {
  .footer_fix_btn {
    position: fixed;
    width: 48px;
    right: 0px;
    bottom: 10px;
    z-index: 999;
  }
}