@charset "utf-8";


/*----------------------------------------------------
fullBg
----------------------------------------------------*/

.fullBg {
  position: relative;
  width: 100%;
}
.fullBg:before {
  content:"";
  display: block;
}


.fullBg.num1 {
  background: url(../images/key_visual_sp.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.fullBg.num1:before {
  padding-top: 66.666%;
}
.fullBg.num1:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  z-index: 10;
}


@media screen and (min-width: 751px) {
  .fullBg.num1 {
    background: url(../images/key_visual.jpg) no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .fullBg.num1:before {
    padding-top: 36.5300146%;
  }
}
@media screen and (min-width: 1366px) {
  .fullBg.num1:before {
    padding-top: 499px;
  }
}

.fullBg.num2 {
    background: url(../images/discount_bg_sp.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.fullBg.num2:before {
  padding-top: 80%;
}
@media screen and (min-width: 751px) {
  .fullBg.num2 {
    background: url(../images/discount_bg.jpg) no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment:fixed;
  }
  .fullBg.num2:before {
    padding-top: 25.62225%;
  }
}
@media screen and (min-width: 1366px) {
  .fullBg.num2:before {
    padding-top: 350px;
  }
}

.fullBg.num3 {
    background: url(../images/image_btm_sp.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.fullBg.num3:before {
  padding-top: 70.266666%;
}
@media screen and (min-width: 751px) {
  .fullBg.num3 {
    background: url(../images/image_btm.jpg) no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment:fixed;
  }
  .fullBg.num3:before {
    padding-top: 34.407%;
  }
}
@media screen and (min-width: 1366px) {
  .fullBg.num3:before {
    padding-top: 470px;
  }
}



/* keyVisual */
#keyVisual ul {
  position: absolute;
  top: 50%;
  left: 0%;
  letter-spacing: -.40em;
  width: 100%;
  margin-top: -14%;
  z-index: 20;
}
#keyVisual li {
  position: relative;
  display: inline-block;
  letter-spacing: normal;
  width: 28%;
  padding: 0 2%;
  opacity: 0;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
#keyVisual li.view {
  opacity: 1;
}
@media screen and (min-width: 751px) {
  #keyVisual ul {
    margin-top: -8.333%;
  }
  #keyVisual li {
    width: 16.666%;
    padding: 0 1.19%;
  }
}
@media screen and (min-width: 1260px) {
  #keyVisual ul {
    margin-top: -105px;
  }
  #keyVisual li {
    width: 210px;
    padding: 0 15px;
  }
}


/* expert */
#expert h1 {
  width: 82.1333%;
  max-width: 616px;
  margin: 6.66% auto 5.33%;
}
#expert .wrap {
  background: url(../images/bg_stripe.png);
  background-size: 20px auto;
}
#expert li {
  border-top: solid 2px #ebebeb;
  padding: 6.666% 0 5.333%;
}
#expert h2 {
  width: 86.666%;
  max-width: 598px;
  margin: 0 auto;
}
#expert p {
  font-size: 4.6vw;
  line-height: 1.44;
  margin-top: 0.7em;
  text-align: center;
}
@media screen and (min-width: 751px) {
  #expert h1 {
    margin: 25px auto;
  }
  #expert .wrap {
    border-top: solid 2px #ebebeb;
    background-size: 40px auto;
  }
  #expert ul {
    overflow: hidden;
  }
  #expert li {
    border-top: none;
    border-right: solid 2px #ebebeb;
    float: left;
    width: 33.33333%;
    padding: 20px 0 40px;
    box-sizing: border-box;
  }
  #expert li:first-child {
    border-left: solid 2px #ebebeb;
  }
  #expert .inner {
    margin: 0 7.5%;
  }
  #expert h2 {
    width: 100%;
    max-width: 291px;
  }
  #expert p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 1em;
    text-align: left;
  }
  #expert p br {
    display: none;
  }
}
@media screen and (min-width: 1260px) {
  #expert ul {
    width: 1200px;
    margin: 0 auto;
  }
  #expert .inner {
    width: auto;
    margin: 0 30px;
  }
  #expert p br.ex {
    display: block;
  }
}


/* discount */
#discount {
  background: #0085d0;
  padding: 6.6666% 0;
}
#discount h2 {
  width: 80.8695%;
  max-width: 558px;
  margin: 0 auto;
}
@media screen and (min-width: 751px) {
  #discount {
    padding: 30px 0;
  }
  #discount h2 {
    width: 100%;
    max-width: 1133px;
  }
}
@media screen and (min-width: 1260px) {
  #discount {
    padding: 30px 0;
  }
}


/* estimate */
#estimate {
  background: url(../images/bg_stripe.png);
  background-size: 20px auto;
  padding: 6.6666% 0;
}
#estimate .inner {
  margin: 0 8%;
}
#estimate h2 {
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
}
#estimate li a {
  display: block;
  width: 100%;
  background: #cc0000;
  padding: 6%;
  box-sizing: border-box;
  margin-top: 6.349%;
  margin-bottom: 6px;
  border-radius: 3vw;
  text-align: center;
  box-shadow: 0 3px 3px rgba(0,0,0, 0.25);
  -webkit-box-shadow: 0 3px 3px rgba(0,0,0, 0.25);
  -moz-box-shadow: 0 3px 3px rgba(0,0,0, 0.25);
}
#estimate li:first-child a {
  margin-top: 7.9365%;
}
@media screen and (min-width: 751px) {
  #estimate {
    background-size: 40px auto;
    padding: 4.1666% 0;
  }
  #estimate .inner {
    margin: 0 20px;
  }
  #estimate h2 {
    width: 100%;
    max-width: 947px;
  }
  #estimate ul {
    overflow: hidden;
    width: 100%;
    max-width: 859px;
    margin: 25px auto 0;
  }
  #estimate li {
    width: 47%;
  }
  #estimate li:first-child {
    float: left;
  }
  #estimate li:last-child {
    float: right;
  }
  #estimate li a {
    padding: 16px;
    margin-top: 0;
    border-radius: 20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #estimate li:first-child a {
    margin-top: 0;
  }
  #estimate li a img {
    max-width: 265px;
  }
  #estimate li a:hover {
    background: #dc2828;
  }
}
@media screen and (min-width: 1260px) {
  #estimate {
    padding: 50px 0;
  }
  #estimate .inner {
    margin: 0 auto;
  }
}


/* contact */
#contact {
  background: #cc0000;
  padding: 6.6666% 0;
}
#contact .inner {
  margin: 0 8%;
}
#contact h2 {
  width: 82.53968%;
  max-width: 520px;
  margin: 0 auto 4.7%;
}
@media screen and (min-width: 751px) {
  #contact {
    padding: 34px 0;
  }
  #contact .inner {
    margin: 0 20px;
    letter-spacing: -.40em;
    text-align: center;
  }
  #contact h2,
  #contact p  {
    width: auto;
    margin: 0 auto;
    padding: 0 20px;
  }
  #contact h2 {
    max-width: 326px;
  }
  #contact p {
    margin-top: 30px;
    max-width: 500px;
  }
}
@media screen and (min-width: 1001px) {
  #contact h2,
  #contact p  {
    display: inline-block;
  }
  #contact p {
    margin-top: 0;
    vertical-align: middle;
  }
}
@media screen and (min-width: 1260px) {
  #contact .inner {
    margin: 0 auto;
    width: 1200px;
  }
}


/* siteFoot fix */
#siteFoot {
  margin-top: 0;
}