@charset "UTF-8";
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/webfonts/fa-brands-400.woff2") format("woff2");
  font-display: swap; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap; }
html {
  position: relative;
  min-height: 100%;
  overflow-x: hidden; }

section {
  overflow: hidden; }

body {
  width: 100%;
  padding-top: 0vw;
  font-size: 16px;
  line-height: 1.5;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo;
  position: relative;
  color: #000;
  text-align: center; }
  body .wrap {
    max-width: 750px;
    margin: 0 auto;
    position: relative; }

section {
  margin: 0;
  padding: 0; }

@media screen and (max-width: 767px) {
  body {
    font-size: 3.2vw; } }
img {
  width: auto;
  max-width: 100%;
  vertical-align: top; }

a {
  outline: none;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  display: block; }

a:hover {
  text-decoration: none;
  opacity: 0.7;
  transition: 0.3s ease-in-out; }

/*=====================================================
ヘッダー
======================================================*/
/*=====================================================
フッター
======================================================*/
footer {
  padding: 30px 0 0;
  color: #e3500f; }
  footer .flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    justify-content: space-between;
    padding: 15px 0 0; }
    footer .flexbox .left {
      width: 45%; }
      footer .flexbox .left .name {
        text-align: left;
        font-weight: bold;
        line-height: 1.1;
        font-size: 27px; }
        footer .flexbox .left .name span {
          font-size: 20px; }
      footer .flexbox .left .license {
        background: #e3500f;
        color: #fff;
        padding: 5px 10px;
        margin: 10px 0;
        font-weight: bold; }
      footer .flexbox .left .address1 {
        text-align: left;
        font-weight: bold;
        line-height: 1.1;
        font-size: 23px; }
      footer .flexbox .left .address2 {
        text-align: left;
        font-size: 18px;
        line-height: 1.3; }
    footer .flexbox .right {
      width: 52%; }
      footer .flexbox .right img {
        width: 100%;
        max-width: none; }
  footer .gmap {
    position: relative;
    width: 100%;
    padding-top: 300px;
    margin-top: 40px; }
    footer .gmap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

@media screen and (max-width: 767px) {
  footer {
    padding: 6vw 0; }
    footer .flexbox {
      padding: 3vw 0 0; }
      footer .flexbox .left {
        width: 45%; }
        footer .flexbox .left .name {
          font-size: 4.2vw; }
          footer .flexbox .left .name span {
            font-size: 3.6vw; }
        footer .flexbox .left .license {
          padding: 1vw 2vw;
          margin: 2vw 0;
          font-size: 2.6vw; }
        footer .flexbox .left .address1 {
          font-size: 3.6vw; }
        footer .flexbox .left .address2 {
          font-size: 3.2vw; }
      footer .flexbox .right {
        width: 52%; }
        footer .flexbox .right img {
          width: 100%;
          max-width: none; } }
/*=====================================================
共通
======================================================*/
.contents_wrap {
  width: 90%;
  margin: 0 auto; }

.cta_flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  height: auto;
  justify-content: space-between;
  width: 100%;
  padding: 15px 3%; }
  .cta_flex a {
    display: block;
    margin-bottom: 8px; }
    .cta_flex a.col1 {
      width: 100%; }
    .cta_flex a.col2 {
      width: 49%; }
    .cta_flex a.col3 {
      width: 32%; }

.cta_wrap {
  margin-top: 50px; }

/*=====================================================
MAIN
======================================================*/
#main_img {
  position: relative; }
  #main_img .main_cta {
    width: 100%;
    position: absolute;
    bottom: 0.5%; }

#about {
  background: url("../img/pattern04.jpg");
  background-size: 6.5%;
  padding-bottom: 0px; }
  #about .navi {
    background: #FFF104;
    text-align: center;
    padding-bottom: 1px; }
    #about .navi .navi_wrap {
      padding: 0 10%; }
      #about .navi .navi_wrap a {
        display: block;
        margin: 10px 0; }
      #about .navi .navi_wrap img {
        width: 100%; }
  #about .campaign_bg {
    position: relative; }
    #about .campaign_bg .cta_wrap {
      margin: 0;
      width: 95%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }

#reason {
  background: url("../img/pattern02.jpg");
  background-size: 6.5%;
  padding-bottom: 40px; }

#plan {
  background: url("../img/pattern01.jpg");
  background-size: 6.5%;
  padding-bottom: 40px; }

#newcar {
  background: url("../img/pattern03.jpg");
  background-size: 6.5%;
  padding-bottom: 40px; }

#flow {
  background: url("../img/pattern04.jpg");
  background-size: 6.5%;
  padding-bottom: 40px; }

#otoku {
  background: url("../img/pattern05.jpg");
  background-size: 6.5%;
  padding-bottom: 40px; }

#campaign {
  padding-bottom: 40px; }
  #campaign .campaign_cta {
    position: relative; }
    #campaign .campaign_cta .cta_wrap {
      width: 100%;
      margin-top: 10px;
      position: absolute;
      top: 0;
      left: 0; }

#contact {
  padding: 40px 0;
  color: #e3500f; }
  #contact .contact_ttl {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px; }
  #contact .form_box {
    padding: 30px 30px 30px 30px;
    margin-top: 40px;
    text-align: center;
    background: #fee7da;
    color: #000; }
    #contact .form_box form {
      margin-top: 10px; }
      #contact .form_box form select, #contact .form_box form input[type=text], #contact .form_box form input[type=email], #contact .form_box form textarea {
        border: none;
        box-sizing: border-box;
        padding: 8px 10px;
        width: 100%;
        border-radius: 5px;
        font-size: 18px;
        margin-bottom: 5px; }
      #contact .form_box form textarea {
        height: 200px; }
      #contact .form_box form input[type=submit], #contact .form_box form input[type=reset] {
        font-size: 18px;
        padding: 5px 20px;
        cursor: pointer; }
      #contact .form_box form table {
        width: 100%; }
        #contact .form_box form table th, #contact .form_box form table td {
          display: block; }
        #contact .form_box form table th {
          text-align: left;
          padding: 5px 0;
          vertical-align: top; }
          #contact .form_box form table th span {
            color: #d00;
            margin-left: 10px; }
        #contact .form_box form table td {
          margin-bottom: 20px; }

.thanks {
  padding: 150px 0;
  text-align: center;
  font-size: 23px;
  border-bottom: 10px #f63 solid; }
  .thanks p {
    margin-bottom: 50px; }

@media screen and (max-width: 767px) {
  #about {
    padding-bottom: 0vw; }
    #about .navi .navi_wrap a {
      display: block;
      margin: 2vw 0; }

  #reason {
    padding-bottom: 8vw; }

  #plan {
    padding-bottom: 8vw; }

  #newcar {
    padding-bottom: 8vw; }

  #flow {
    padding-bottom: 8vw; }

  #campaign {
    padding-bottom: 8vw; }
    #campaign .campaign_cta .cta_wrap {
      margin-top: 2vw; }

  #contact {
    padding: 8vw 0; }
    #contact .contact_ttl {
      font-size: 7vw;
      margin-bottom: 4vw; }
    #contact .form_box {
      padding: 5vw;
      margin-top: 8vw; }
      #contact .form_box form {
        margin-top: 2vw; }
        #contact .form_box form select, #contact .form_box form input[type=text], #contact .form_box form input[type=email], #contact .form_box form textarea {
          padding: 1.6vw 2vw;
          border-radius: 1vw;
          font-size: 3.4vw;
          margin-bottom: 1vw; }
        #contact .form_box form textarea {
          height: 50vw; }
        #contact .form_box form input[type=submit], #contact .form_box form input[type=reset] {
          font-size: 3.6vw;
          padding: 1vw 4vw;
          cursor: pointer; }
        #contact .form_box form table {
          width: 100%; }
          #contact .form_box form table th, #contact .form_box form table td {
            display: block; }
          #contact .form_box form table th {
            text-align: left;
            padding: 1vw 0;
            vertical-align: top; }
            #contact .form_box form table th span {
              color: #d00;
              margin-left: 2vw; }
          #contact .form_box form table td {
            margin-bottom: 4vw; }

  #contact {
    padding: 8vw 0; }
    #contact .form_box {
      padding: 4vw 2vw 4vw;
      border-radius: 1.6vw;
      font-size: 4vw; }
      #contact .form_box .txt01 {
        font-size: 4vw; }
      #contact .form_box .contact_tel {
        font-size: 8vw;
        padding-left: 14vw; }
        #contact .form_box .contact_tel:before {
          width: 12vw;
          height: 8vw;
          top: 2.4vw;
          left: 0; }
      #contact .form_box form {
        margin-top: 2vw; }
        #contact .form_box form input[type=text], #contact .form_box form input[type=email], #contact .form_box form textarea {
          padding: 1.6vw 2vw;
          border-radius: 1vw;
          font-size: 3.6vw;
          margin-bottom: 1vw; }
        #contact .form_box form textarea {
          height: 40vw; }
        #contact .form_box form input[type=submit] {
          font-size: 3.6vw;
          padding: 1vw 4vw; }

  #confirm {
    padding: 6vw 0;
    font-size: 4.8vw; }

  .thanks {
    padding: 30vw 0;
    text-align: center;
    font-size: 4.6vw;
    border-bottom: 2vw #f63 solid; }
    .thanks p {
      margin-bottom: 10vw; } }