/*layout   ======================================
  header、footer、hamburger など
  =================================================*/
img {
  height: auto;
}

.container {
  margin: auto;
  max-width: 800px;
  width: 100%;
}

/*左右余白アリ*/
.content {
  margin: auto;
  max-width: 800px;
  width: calc(100% - 30px);
}

/*左右余白ナシ*/
.content--pdLess {
  max-width: 100% !important;
  width: 100% !important;
}

/*スマホの時のみ左右余白ナシ*/
.content--pdLess--sp {
  max-width: 100%;
  width: 100%;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  width: 100%;
}

.column2 {
  width: calc(96%/2);
  margin: 0% 2% 0%;
}

.column3 {
  margin-top: 2%;
  margin-right: 2%;
  width: calc(88%/3);
}

.column2--pc3 {
  position: relative;
  width: 48.5%;
  margin-right: 1.5%;
}

.column2--pc3:nth-child(2),
.column2--pc3:nth-child(4),
.column2--pc3:nth-child(6),
.column2--pc3:nth-child(8),
.column2--pc3:nth-child(10),
.column2--pc3:nth-child(12),
.column2--pc3:nth-child(14),
.column2--pc3:nth-child(16) {
  margin-right: 0%;
}

@media all and (min-width:591px) {
  .content {
    width: calc(100% - 30px);
  }

  /*左右余白ナシ*/
  .content--pdLess {
    width: 100% !important;
    max-width: 800px !important;
    margin: auto;
  }

  /*スマホの時のみ左右余白ナシ*/
  .content--pdLess--sp {
    max-width: 1000px;
    width: calc(100% - 30px);
  }

  .column2--pc3 {
    margin-right: 2%;
    width: calc(96%/3);
  }

  .column2--pc3:nth-child(2),
  .column2--pc3:nth-child(4),
  .column2--pc3:nth-child(5),
  .column2--pc3:nth-child(8),
  .column2--pc3:nth-child(10),
  .column2--pc3:nth-child(11),
  .column2--pc3:nth-child(14),
  .column2--pc3:nth-child(17) {
    margin-right: 2%;
  }


  .column2--pc3:nth-child(3),
  .column2--pc3:nth-child(6),
  .column2--pc3:nth-child(9),
  .column2--pc3:nth-child(12),
  .column2--pc3:nth-child(15),
  .column2--pc3:nth-child(18) {
    margin-right: 0%;
  }

}

/*component =====================================
    サイト内で何度も使いまわしたいもの(btnや各ブロックのタイトルなど)
    =================================================*/
/*画像ボタン*/
a.btn,
button.btn {
  margin: 5px auto 5px;
  padding: 5px 0;
  max-width: 500px;
  width: 80%;
  border: 1px solid #FFF;
  border-radius: 5px;
  background-color: #FFF;
  color: #004DA0;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  font-family: 'M PLUS 1p', sans-serif;
  transform: rotate(0.05deg);
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
  transition: 0.4s;
  cursor: pointer;
}

a.btn:hover,
button.btn:hover {
  margin: 10px auto 0px;
  border: 1px solid #004DA0;
  background-color: #004DA0;
  color: #FFF;
  transition: 0.4s;
  opacity: .6;
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
}

@media all and (min-width: 591px) {

  a.btn,
  button.btn {
    padding: 7px 0;
    max-width: 420px;
    width: 60%;
    font-size: 1.9rem;
    line-height: 1.3;
  }
}

a.btn_usedcar {
  background-image: url(../images/btn_usedcar.png);
  background-size: 100% 100%;
  transition: 0.4s;
  cursor: pointer;
}

a.btn_usedcar:hover {
  background-image: url(../images/btn_usedcar_on.png);
  transition: 0.4s;
}

/*project  ======================================
    各ブロックごとのスタイルを指定
    =================================================*/
/*mainVisual*/

.push_btn_bg2::after {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  background-image: url(../images/push_btn.png);
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -34%;
  left: 7%;
  transition: 0.1s;
  z-index: 12;
}

.push_btn_bg2:hover::after {
  background-image: url(../images/push_btn_on.png);
  transition: 0.1s;
  z-index: 12;
}

.push_btn_bg2:active::after {
  background-image: url(../images/push_btn_after.png);
  transition: 0.2s;
  z-index: 12;
}

.push_btn_bg2:hover::before {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  background-image: url(../images/push_btn_on2.png);
  transition: 0.3s;
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -103%;
  left: 7%;
  transition: 0.3s;
  z-index: 13;
}

.push_btn_bg2:active::before {
  display: none;
}

.push_btn2_bg,
.push_btn2_bg2 {
  top: 36%;
  left: 52%;
  width: 34%;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.6));
}

.push_btn2_bg2::after {
  background-image: url(../images/push_btn2.png);
  top: -34%;
  left: 7%;
}

.push_btn2_bg2:hover::after {
  background-image: url(../images/push_btn2_on.png);
}

.push_btn2_bg2:active::after {
  background-image: url(../images/push_btn2_after.png);
}

.push_btn2_bg2:hover::before {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  background-image: url(../images/push_btn_on2.png);
  transition: 0.3s;
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -103%;
  left: 7%;
  transition: 0.3s;
  z-index: 13;
}

.push_btn2_bg2:active::before {
  display: none;
}

.push_btn_bg,
.push_btn_bg2 {
  top: 50%;
  left: 18.2%;
  width: 30%;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.6));
  z-index: 19;
}

.push_btn_bg2::after {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  background-image: url(../images/push_btn.png);
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -34%;
  left: 7%;
  transition: 0.1s;
  z-index: 12;
}

.push_btn_bg2:hover::after {
  background-image: url(../images/push_btn_on.png);
  transition: 0.1s;
  z-index: 12;
}

.push_btn_bg2:active::after {
  background-image: url(../images/push_btn_after.png);
  transition: 0.2s;
  z-index: 12;
}

.push_btn_bg2:hover::before {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  background-image: url(../images/push_btn_on2.png);
  transition: 0.3s;
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -103%;
  left: 7%;
  transition: 0.3s;
  z-index: 20;
}

.push_btn_bg2:active::before {
  display: none;
}

.push_btn2_bg,
.push_btn2_bg2 {
  top: 50%;
  left: 50.5%;
  width: 30%;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.6));
  z-index: 19;
}


.push_btn2_bg2::after {
  display: block;
  content: "";
  width: 86%;
  height: 100%;
  content: "";
  position: absolute;
  background-image: url(../images/push_btn2.png);
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  top: -34%;
  left: 7%;
  transition: 0.1s;
  z-index: 12;
}

.push_btn2_bg2:hover::after {
  background-image: url(../images/push_btn2_on.png);
}

.push_btn2_bg2:active::after {
  background-image: url(../images/push_btn2_after.png);
}

.push_btn2_bg2:hover::before {
  background-image: url(../images/push_btn_on2.png);
  top: -103%;
  left: 7%;
  transition: 0.3s;
  z-index: 20;
}

.push_btn2_bg2:active::before {
  display: none;
}


.shiny-btn::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  transition: 0.2s;
  -webkit-animation: shiny-btn 3s ease-in-out infinite;
  animation: shiny-btn 3s ease-in-out infinite;
}

@-webkit-keyframes shiny-btn {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes shiny-btn {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.usedcar_txt1 {
  top: 8%;
  left: 0;
  width: 25%;
  z-index: 2;
}

.usedcar_txt2 {
  top: -4.5%;
  left: 20%;
  width: 28%;
  z-index: 1;
}

.usedcar_txt3 {
  top: -4.5%;
  left: 51%;
  width: 28%;
  z-index: 2;
}

.usedcar_txt4 {
  top: 7%;
  right: 0;
  width: 28%;
  z-index: 2;
}

.bg__title_usedcar_search {
  background-image: url(../images/title_usedcar_search_bg.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
}

/*chusen*/
.bg--chusen {
  background-color: #FFF400;
  border-top: 8px solid #000;
}

/*animation =====================================
    画像遅延表示など動きの設定
    =================================================*/

.fadein--show.usedcar_txt1 {
  -webkit-animation: boyoyon .3s;
  animation: boyoyon .3s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.fadein--show.usedcar_txt2 {
  -webkit-animation: boyoyon .3s;
  animation: boyoyon .3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.fadein--show.usedcar_txt3 {
  -webkit-animation: boyoyon .3s;
  animation: boyoyon .3s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.fadein--show.usedcar_txt4 {
  -webkit-animation: boyoyon .3s;
  animation: boyoyon .3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes boyoyon {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1.0);
  }

}

@keyframes boyoyon {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}


.main_bg {
  background: url(../images/mainvisual_bg.webp) no-repeat center top /cover;
}

.main_btn {
  bottom: 120px;
  left: 0;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .main_btn {
    bottom: 15vw;
  }
}

.bg__title_usedcar_recommend {
  background-image: url(../images/title_usedcar_search_bg.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
}