/*
$color-lightgray: #f9f9f9;
$color-marketing: #F00077;
$color-scm: #A648F0;
$color-dx: #3074F9;
$color-creative: #37F1C5;
$color-corporate: #E0FF4F;

@mixin text-color-white { color: white; }
@mixin text-color-black { color: black; }

@mixin text-color-marketing { color: $color-marketing; }
@mixin text-color-scm { color: $color-scm; }
@mixin text-color-dx { color: $color-dx; }
@mixin text-color-creative { color: $color-creative; }
@mixin text-color-corporate { color:$color-corporate; }

@mixin bg-color-lightgray { background-color: $color-lightgray; }
@mixin bg-color-marketing { background-color: $color-marketing; }
@mixin bg-color-scm { background-color: $color-scm; }
@mixin bg-color-dx { background-color: $color-dx; }
@mixin bg-color-creative { background-color: $color-creative; }
@mixin bg-color-corporate { background-color: $color-corporate; }
*/
@font-face {
  font-family: "YuGothic_Local";
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}
@font-face {
  font-family: "YuGothic_Local";
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
}
.header,
.footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.header *,
.header *::before,
.header *::after,
.footer *,
.footer *::before,
.footer *::after {
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.header ul,
.header ol,
.footer ul,
.footer ol {
  list-style: none;
}
.header a,
.footer a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

.header {
  position: absolute;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.header h2 {
  padding: 30px 0 0 30px;
}
.header h2 img {
  width: 48px;
  height: auto;
}
.header .lang-navi {
  font-size: 0;
  padding: 32px 21px 0 0;
}
.header .lang-navi li {
  color: #c8c8c8;
  display: inline-block;
  padding: 0px 10px;
  font-size: 15px;
  line-height: 140%;
  transition: all 0.15s;
}
.header .lang-navi li + li {
  border-left: 1px solid rgba(200, 200, 200, 0.3);
}
.header .lang-navi li.current {
  color: #01BF4D;
}

.footer {
  position: fixed;
  bottom: 0;
  z-index: 100;
  color: #000;
  background-color: #000;
  width: 100%;
  height: auto;
}
.footer__wrap {
  background-color: #01BF4D;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}
.footer__wrap:hover {
  cursor: pointer;
}
.footer__wrap:hover .foot-warrow-r::after {
  right: 7px;
}
.footer__inner {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 90%;
}
.footer__text {
  font-weight: bold;
  font-size: 11px;
  line-height: 160%;
}
.footer__text span.left {
  display: inline-block;
  padding-right: 12px;
}
.footer .foot-warrow-r {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 0.3s;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  padding: 0px 8px 0px 0px;
  color: #000;
  border: 2px solid #01BF4D;
  position: relative;
}
.footer .foot-warrow-r span {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  margin-left: -5px;
  min-width: 120px;
}
.footer .foot-warrow-r::after {
  content: "";
  margin: auto;
  position: absolute;
  top: -17px;
  bottom: 0;
  right: 0px;
  background-image: url("data:image/svg+xml,%3csvg width='52' height='12' viewBox='0 0 52 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 5.25a.75.75 0 0 0 0 1.5v-1.5Zm50.53 1.28a.75.75 0 0 0 0-1.06L46.757.697a.75.75 0 0 0-1.06 1.06L49.939 6l-4.242 4.243a.75.75 0 0 0 1.06 1.06L51.53 6.53ZM1 6.75h50v-1.5H1v1.5Z' fill='black'/%3e%3c/svg%3e");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 52px;
  height: 12px;
  transition: all 0.15s;
}
.footer .foot-warrow-r.en span {
  padding-left: 6px;
}
@media (min-width: 640px) {
  .header {
    justify-content: space-between;
  }
  .header h2 {
    padding: 50px 0 0 50px;
  }
  .header h2 img {
    width: 60px;
  }
  .header .lang-navi {
    padding: 50px 35px 0 0px;
  }
  .header .lang-navi li {
    font-size: 18px;
  }
  .footer__inner {
    width: 95%;
  }
  .footer__text {
    font-size: 14px;
  }
}
@media (min-width: 1100px) {
  .header .lang-navi {
    padding: 50px 90px 0 0px;
  }
  .footer .foot-warrow-r {
    font-size: 18px;
    padding: 19px 72px 19px 24px;
  }
  .footer .foot-warrow-r span {
    display: inline-block;
    margin: 0;
    font-size: 12px;
  }
  .footer .foot-warrow-r::after {
    top: 0;
    right: 10px;
  }
  .footer .foot-warrow-r.en {
    padding: 19px 12px 19px 24px;
  }
}
@media (hover: hover) {
  .header h2 {
    cursor: pointer;
  }
  .header h2:hover {
    -webkit-animation: blink 0.5s ease 0s forwards;
            animation: blink 0.5s ease 0s forwards;
  }
  @-webkit-keyframes blink {
    0% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes blink {
    0% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
  .header .lang-navi li a {
    cursor: pointer;
  }
  .header .lang-navi li a:hover {
    -webkit-animation: blink 0.5s ease 0s forwards;
            animation: blink 0.5s ease 0s forwards;
  }
  @keyframes blink {
    0% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
  .footer__wrap {
    cursor: pointer;
  }
  .footer__wrap:hover {
    -webkit-animation: blink 0.5s ease 0s forwards;
            animation: blink 0.5s ease 0s forwards;
  }
  @keyframes blink {
    0% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
}