@charset "UTF-8";
:root {
  /*===================== Color =====================*/
  --color-light-gray: #C8C8C8;
  --color-light-green: #46B41E;
  /*===================== Font =====================*/
  --font-montserrat: "Montserrat", sans-serif;
  --font-manrope: "Manrope", sans-serif;
}

/*================================= 見出し =================================*/
/*======================= SP-VW =======================*/
/*======================= PC-VW =======================*/
/*================================= コンテンツ 角丸 =================================*/
body {
  background: #fff;
}

main {
  box-sizing: border-box;
  padding: 0 calc(20 / 750 * 100vw) calc(20 / 750 * 100vw) calc(20 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  main {
    padding: 0 18px 18px 18px;
  }
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: calc(30 / 750 * 100vw) 0 calc(42 / 750 * 100vw) calc(10 / 750 * 100vw);
  height: calc(121 / 750 * 100vw);
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  header {
    height: auto;
    height: 103px;
    padding: 44px 0 33px 18px;
  }
}
header h1 {
  width: 32%;
}
@media screen and (min-width: 768px) {
  header h1 {
    width: 206px;
  }
}
header time {
  font-weight: 500;
  font-family: var(--font-manrope);
  font-size: calc(22 / 750 * 100vw);
  line-height: 1.2em;
}
@media screen and (min-width: 768px) {
  header time {
    font-size: 16px;
  }
}

div.link-wrap {
  width: 100%;
  height: calc(100svh - 141 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap {
    height: auto;
    display: flex;
    justify-content: space-between;
    -moz-column-gap: 8px;
         column-gap: 8px;
  }
}
div.link-wrap a {
  display: block;
  border-radius: calc(10 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap a {
    border-radius: 10px;
  }
}
div.link-wrap a {
  overflow: hidden;
  isolation: isolate;
  position: relative;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  div.link-wrap a {
    height: calc(100vh - 130px);
  }
}
div.link-wrap a:hover::before {
  opacity: 0;
}
div.link-wrap a:hover div.txt-wrap h2 span.inner, div.link-wrap a:hover div.txt-wrap p span.inner {
  display: block;
}
div.link-wrap a:hover div.txt-wrap h2 span.inner:nth-of-type(1), div.link-wrap a:hover div.txt-wrap p span.inner:nth-of-type(1) {
  transform: translate(0, -1.2em);
}
div.link-wrap a:hover div.txt-wrap h2 span.inner:nth-of-type(2), div.link-wrap a:hover div.txt-wrap p span.inner:nth-of-type(2) {
  transform: translate(0, 0);
}
div.link-wrap a:hover picture {
  display: block;
  transform: scale(1.04);
}
div.link-wrap a:hover video {
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1.04);
}
div.link-wrap a:hover img {
  filter: blur(0);
  animation: top-img 50s forwards;
}
div.link-wrap a:hover .dots {
  transform: scale(0.66);
}
div.link-wrap a:hover .dots::after {
  transform: scale(2.3);
}
div.link-wrap a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
  transition: opacity 0.3s;
}
div.link-wrap a .dots {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-light-green);
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 50em;
  transition: all 0.3s;
}
div.link-wrap a .dots::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50em;
  box-sizing: border-box;
  transition: 0.3s;
  border: solid 1px var(--color-light-green);
}
div.link-wrap a.dealer {
  width: 100%;
  height: calc(68% - 10 / 750 * 100vw);
  margin-bottom: calc(20 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap a.dealer {
    width: 80%;
    height: auto;
    margin-bottom: 0;
  }
}
div.link-wrap a.dealer h2 {
  font-weight: 500;
  font-size: calc(45 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap a.dealer h2 {
    font-size: clamp(30px, 35 / 1366 * 100vw, 1000px);
  }
}
div.link-wrap a.brand {
  height: calc(32% - 10 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap a.brand {
    width: 20%;
    height: auto;
  }
  div.link-wrap a.brand:hover {
    width: 66.4%;
  }
}
@media screen and (min-width: 768px) {
  div.link-wrap a.brand div.txt-wrap {
    left: calc(32 / 1366 * 100vw);
  }
}
@media screen and (min-width: 1000px) {
  div.link-wrap a.brand div.txt-wrap {
    left: calc(38 / 1366 * 100vw);
  }
}
div.link-wrap a.brand h2 {
  font-weight: 500;
  font-size: calc(45 / 750 * 100vw);
}
@media screen and (min-width: 768px) {
  div.link-wrap a.brand h2 {
    font-size: clamp(20px, 25 / 1366 * 100vw, 1000px);
  }
}
div.link-wrap a picture {
  display: block;
  transition: 0.3s;
  top: 0;
  left: 0;
  position: relative;
  height: 100%;
}
div.link-wrap a video {
  filter: blur(10px);
  transition: all 0.3s;
}
div.link-wrap a img {
  filter: blur(10px);
  transition: filter 0.3s;
}
@keyframes top-img {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
  }
}
div.link-wrap a img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  div.link-wrap a img {
    height: calc(100vh - 130px);
  }
}
div.link-wrap a video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  div.link-wrap a video {
    height: calc(100vh - 130px);
  }
}
div.link-wrap a div.txt-wrap {
  position: absolute;
  z-index: 2;
  color: #fff;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  width: 100%;
}
@media screen and (min-width: 768px) {
  div.link-wrap a div.txt-wrap {
    left: 56px;
  }
}
div.link-wrap a div.txt-wrap h2, div.link-wrap a div.txt-wrap p {
  overflow: hidden;
  position: relative;
  height: 1.1em;
  line-height: 1.1em;
}
div.link-wrap a div.txt-wrap h2 span.inner, div.link-wrap a div.txt-wrap p span.inner {
  display: block;
  transition: all 0.3s;
}
div.link-wrap a div.txt-wrap h2 span.inner:nth-of-type(2), div.link-wrap a div.txt-wrap p span.inner:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 1.2em);
  font-family: var(--font-montserrat);
}
div.link-wrap a div.txt-wrap p {
  font-size: calc(20 / 750 * 100vw);
  line-height: 1.2em;
  font-weight: 400;
  margin-top: 0.8em;
}
@media screen and (min-width: 768px) {
  div.link-wrap a div.txt-wrap p {
    font-size: clamp(10px, 14 / 1366 * 100vw, 1000px);
  }
}
div.link-wrap a div.txt-wrap p span.inner:nth-of-type(2) {
  font-weight: 400;
  color: var(--color-light-gray);
}/*# sourceMappingURL=top.css.map */