@import url("https://use.typekit.net/kkf7emz.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap");
:root {
  --viewport: 1920;
}
@media (max-width: 1280px) {
  :root {
    --viewport: 1200;
  }
}
@media (max-width: 768px) {
  :root {
    --viewport: 768;
  }
}

html {
  scroll-behavior: initial;
  width: 100%;
  font-size: 0.83vw;
}
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  min-height: 100%;
  color: #111;
  font-family: "din-2014", "Noto Sans JP", serif;
}

span.word {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.rect {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  top: 0;
  left: 0;
}

.shikumi {
  background-image: url(../img/top/shikumi.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.franchise {
  background-image: url(../img/top/franchise-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  .franchise {
    background-image: url(../img/top/franchise-bg-sp.png);
  }
}

.sv {
  width: 100%;
  height: 19.75rem;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .sv {
    height: 12.5rem;
  }
}
.sv > div {
  width: 75rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sv > div {
    width: 80%;
  }
}

.what {
  background-image: url(../img/what/sv.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  .what {
    background-image: url(../img/what/sv-sp.png);
  }
}

.products {
  background-image: url(../img/products/sv.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.shop {
  background-image: url(../img/shop/sv.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact {
  background-image: url(../img/contact/sv.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 34.125rem;
}
@media (max-width: 768px) {
  .contact {
    height: 32.0625rem;
    background-size: cover;
  }
}

.inner {
  width: 75rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .inner {
    width: 80%;
  }
}

.inner-s {
  width: 75rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .inner-s {
    width: 90%;
  }
}

.what-bg {
  background-image: url(../img/what/what-bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.merit {
  background-image: url(../img/what/merit-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.demerit {
  background-image: url(../img/what/demerit.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.banda {
  background-image: url(../img/products/products-what-bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.shop-table tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.page-merit {
  background-image: url(../img/merit/sv.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lower {
  background-image: url(../img/merit/lower.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.system {
  background-image: url(../img/merit/system.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.black {
  background-image: url(../img/merit/black-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}