:root {
  --base_color:#009ce7; }

body {
  font-family: urw-din, sans-serif;
  letter-spacing: 0;
  font-size: 3.2vw;
  line-height: 1.6; }

.contactBtn {
  width: 45%;
  position: absolute;
  right: 3%;
  top: 40%; }
  .contactBtn a {
    position: relative;
    display: block;
    font-size: 3.2vw;
    line-height: 1;
    background: url("../img/common/arrow.svg") no-repeat right 10px center/15px 15px;
    background-color: #fff;
    color: var(--base_color);
    border-radius: 50px;
    text-align: center;
    padding: 10px 0;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 10px;
    border: 1px solid var(--base_color); }
  .contactBtn a:hover {
    background: url("../img/common/arrow2.svg") no-repeat right 10px center/15px 15px;
    background-color: var(--base_color);
    color: #fff;
    border: 1px solid #fff; }

/*index*/
#mainVisual {
  background: var(--base_color);
  text-align: center;
  color: #fff;
  padding: 35vh 0;
  margin-bottom: 15%;
  width: 100%; }
  #mainVisual h2 {
    width: 60%;
    margin: 0 auto 3% auto; }
  #mainVisual p {
    font-weight: 400;
    font-size: 2.8vw; }

section {
  padding: 0 8%;
  margin-bottom: 15%; }

h3 {
  font-size: 6.4vw;
  font-weight: 600;
  margin-bottom: 6%; }

h4 {
  font-size: 5.2vw;
  font-weight: 600;
  margin-bottom: 3%; }

a {
  transition: all .3s; }

a:hover {
  transition: all .3s; }

header {
  width: 100%;
  position: absolute;
  z-index: 5; }
  header h1 {
    width: 35%;
    margin: 5% 0 0 5%; }
    header h1 a:hover {
      opacity: 0.8; }
  header .language {
    position: absolute;
    right: 0%;
    top: 0%; }
    header .language ul {
      display: flex;
      font-weight: 600;
      font-size: 2.6vw;
      line-height: 1; }
    header .language li a {
      display: block;
      background: #fff;
      padding: 1.5vw 2vw;
      border-bottom: 1px solid #fff;
      border-left: 1px solid #fff;
      color: var(--base_color); }
    header .language li a.on {
      background: var(--base_color);
      color: #fff; }
    header .language li a:hover {
      background: var(--base_color);
      color: #fff; }

footer {
  width: 100%;
  padding: 10% 0%;
  background: #fff; }
  footer h2 {
    width: 60%;
    margin: 0 auto 5% auto; }
  footer .cpy {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0; }
  footer .linkArea {
    text-align: center; }
    footer .linkArea ul {
      margin-bottom: 10%;
      overflow: hidden; }
    footer .linkArea .menu {
      font-family: urw-din, sans-serif;
      font-weight: 400;
      font-size: 16px;
      margin-bottom: 5%; }
      footer .linkArea .menu li {
        width: 50%;
        float: left; }
      footer .linkArea .menu a {
        display: block;
        padding: 3% 0; }
    footer .linkArea .sns {
      display: flex;
      justify-content: center; }
      footer .linkArea .sns li {
        width: 7%;
        margin: 0 4%; }
    footer .linkArea .other {
      font-size: 12px; }
      footer .linkArea .other a {
        display: block;
        padding: 2% 0; }

#page-top {
  width: 40px;
  position: fixed;
  right: 3%;
  bottom: 3%;
  z-index: 1;
  opacity: 0;
  transform: translateX(100px); }
  #page-top img {
    width: 100%; }

#page-top.LeftMove {
  animation: LeftAnime 1s forwards; }

#page-top.RightMove {
  animation: RightAnime 1s forwards; }

@keyframes LeftAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
@keyframes RightAnime {
  from {
    opacity: 1;
    transform: translateX(0); }
  to {
    opacity: 1;
    transform: translateX(100px); } }
#overview div {
  width: 90%; }
#overview dl {
  margin-bottom: 5%; }

#shop .txt {
  margin-bottom: 5%; }
  #shop .txt p {
    margin-bottom: 5%; }
  #shop .txt a {
    position: relative;
    display: block;
    font-size: 4.0vw;
    line-height: 1;
    background: url("../img/common/arrow2.svg") no-repeat right 15px center/15px 15px;
    background-color: var(--base_color);
    color: #fff;
    border-radius: 50px;
    text-align: center;
    padding: 15px 0;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 10px;
    border: 1px solid var(--base_color);
    width: 100%; }
  #shop .txt a:hover {
    background: url("../img/common/arrow.svg") no-repeat right 15px center/15px 15px;
    background-color: #fff;
    color: var(--base_color);
    border: 1px solid var(--base_color); }

#history .wrap dl {
  margin-bottom: 5%; }

#brand dl {
  overflow: hidden;
  margin-bottom: 10%; }
  #brand dl dt {
    font-size: 5.2vw;
    font-weight: 600;
    margin-bottom: 2%; }
  #brand dl .pht {
    margin-bottom: 5%; }
  #brand dl .txt h4 {
    font-size: 4.0vw; }
  #brand dl .txt p {
    margin-bottom: 6%; }
  #brand dl .graf {
    width: 60%;
    margin: 0 auto; }
#brand dl:last-child {
  margin-bottom: 10%; }
#brand .bgraf {
  text-align: center; }
  #brand .bgraf h4 {
    color: var(--base_color);
    font-size: 5.4vw;
    margin-bottom: 0%;
    line-height: 1.3; }
  #brand .bgraf p {
    font-size: 3.2w;
    font-weight: 500;
    margin-bottom: 6%; }
  #brand .bgraf .pht {
    width: 100%;
    margin: 0 auto 6% auto; }

#products h3 {
  margin-bottom: 0; }
#products p {
  margin-bottom: 5%; }
#products dl {
  overflow: hidden;
  margin-bottom: 10%; }
  #products dl dt {
    font-size: 5.2vw;
    font-weight: 600; }
  #products dl .pht {
    margin-bottom: 5%; }
  #products dl .txt h4 {
    font-size: 4.0vw; }
  #products dl .txt p {
    margin-bottom: 6%; }

#contact a {
  position: relative;
  display: block;
  font-size: 3.6vw;
  line-height: 1;
  background: url("../img/common/arrow2.svg") no-repeat right 15px center/15px 15px;
  background-color: var(--base_color);
  color: #fff;
  border-radius: 50px;
  text-align: center;
  padding: 15px 0;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 10px;
  border: 1px solid var(--base_color);
  width: 100%;
  margin: 0 auto; }
#contact a:hover {
  background: url("../img/common/arrow.svg") no-repeat right 15px center/15px 15px;
  background-color: #fff;
  color: var(--base_color);
  border: 1px solid var(--base_color); }

.sl1 {
  animation: slideIn1 3.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

@keyframes slideIn1 {
  0% {
    transform: translateX(50px);
    opacity: 0;
    filter: grayscale(100%); }
  15% {
    opacity: 0; }
  50% {
    filter: grayscale(100%); }
  100% {
    transform: translateX(0%); }
  90%,100% {
    opacity: 1;
    filter: grayscale(0%); } }
.sl2 {
  animation: slideIn2 3.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

@keyframes slideIn2 {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    filter: grayscale(100%); }
  15% {
    opacity: 0; }
  50% {
    filter: grayscale(100%); }
  100% {
    transform: translateY(0%); }
  90%,100% {
    opacity: 1;
    filter: grayscale(0%); } }
.sl3 {
  animation: slideIn3 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

@keyframes slideIn3 {
  0% {
    transform: translateX(40px);
    opacity: 1; }
  100% {
    transform: translateX(0%); } }
.slt4 {
  animation: slideIn4 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }

@keyframes slideIn4 {
  0% {
    transform: translateY(-50px);
    opacity: 0; }
  100% {
    transform: translateY(0%); } }