@charset "UTF-8";
/*======================================
background
/*======================================*/
.bgFixd-js {
  height: 100vh;
}
#recommend {
  background: url(../img/recommend-bg-PC.jpg) repeat center;
  background-size: cover;
}
#point-bgFixd {
  background: url(../img/point-bg-PC.jpg) repeat center;
  background-size: cover;
}
#concept {
  background: url(../img/concept-bg-PC.jpg) no-repeat center;
  background-size: cover;
}
#voice-bgFixd, #priceBottom-bgFixd {
  background: url(../img/voice-bg-PC.jpg) repeat center;
  background-size: cover;
}
#footer-bgFixd {
  background: url(../img/footer-bg-PC.jpg) repeat center;
  background-size: cover;
  /*
  background: #fff;
  */
}
/*======================================
layout
/*======================================*/
.desc p {
  font-size: 100%;
}
/*======================================
recommend
/*======================================*/
#recommend .recommend-bottom {
  margin-top: -20%;
}
#recommend p {
  font-size: 170%;
  margin-top: 0;
}
/*======================================
works
/*======================================*/
#change ul li {
  overflow: hidden;
  width: calc((100% - 1em)/3);
  padding-top: 30%;
  margin: 0 auto;
}
#change ul li:nth-of-type(2) {
  margin: 0 .5em;
}
#change ul li:not(:last-of-type) {
  margin-bottom: 0em;
}
#change ul li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: auto;
  max-width: none;
  height: 100%;
}
/*======================================
what
/*======================================*/
#what .img01 {
  height: 350px;
  overflow: hidden;
}
#what .desc01 {
  position: relative;
  overflow: hidden;
}
#what .img02 {
  position: absolute;
  top: 4em;
  right: 0;
}
#what .img03 {
  flex: 1;
}
#what .desc03 {
  width: calc(50% - 2em);
}
#what .desc03 {
  margin-right: 2em;
  padding-top: 0;
}
/*======================================
point
/*======================================*/
#point h3 {
  font-size: 250%;
}
#point ol li {
  padding: 3em;
  margin: 3em auto;
}
#point ol li:nth-of-type(1) {
  padding: 3em;
}
#point ol li:last-of-type {
  margin-bottom: 0;
}
#point ol li:not(:last-of-type) {
  margin-bottom: 2em;
}
#point ol li h4 {
  font-size: 180%;
}
#point ol li p {
  margin: -.8em auto 1.5em;
}
/*======================================
flow
/*======================================*/
#flow ol li {
  width: calc(100%/3);
  padding-bottom: 2em;
  padding-right: 5%;
}
#flow ol li:nth-of-type(7), #flow ol li:nth-of-type(8) {
  padding-bottom: 0;
}
#flow ol li:after {
  position: absolute;
  content: "";
  width: 7%;
  height: 0;
  padding-top: calc(7%*7.22);
  background: url(../img/flow-arrow-PC.png) no-repeat center;
  background-size: cover;
  bottom: auto;
  left: auto;
  right: 3%;
  top: 0;
}
#flow ol li h3 {
  font-size: 2vw;
}
/*======================================
voice
/*======================================*/
/*voice-list*/
#voice ul li {
  margin: 4em auto;
}
#voice ul li .bordr-wrap {
  padding: 2em;
}
/*======================================
FAQ
/*======================================*/
#FAQ dt {
  margin-bottom: .7em;
}
/*======================================
footer
/*======================================*/
.googlemaps .inner {
  height: 290px;
}
footer #copy-right span:last-of-type {
  display: inline-block;
  margin-left: 3px;
}
/*mapを画像に*/
footer .info {
  text-align: left;
  padding: 1.5em;
}
footer .info .inner {
  margin-right: 2em;
}
footer .info .title {
  width: 40%;
  max-width: 250px;
}
footer .info ul {
  text-align: left;
}
footer .map-img {
  width: 40%;
}
@media screen and (min-width: 1024px) {
  .wrap {
    max-width: 960px;
    padding: 0 2em;
  }
  #recommend .recommend-bottom {
    margin-top: -11em;
  }
}
@media screen and (min-width: 1150px) {}