@charset "UTF-8";
:root {
  --base_color:#009ce7; }

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

.contactBtn {
  width: 240px;
  position: absolute;
  right: 5%;
  top: 20%; }
  .contactBtn a {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 1;
    background: url("../img/common/arrow.svg") no-repeat right 15px center/15px 15px;
    background-color: #fff;
    color: var(--base_color);
    border-radius: 50px;
    text-align: center;
    padding: 15px 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 15px 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: 30vh;
  margin-bottom: 5%; }
  #mainVisual h2 {
    width: 20vw;
    margin: 0 auto 3% auto; }
  #mainVisual p {
    font-weight: 400;
    font-size: 1.0vw; }

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

h3 {
  font-size: 2.6vw;
  font-weight: 600;
  margin-bottom: 3%; }

h4 {
  font-size: 1.8vw;
  font-weight: 600;
  margin-bottom: 1%; }

.sp {
  display: none; }

a {
  transition: all .3s; }

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

header {
  width: 100%;
  position: absolute;
  padding: 25px 5%;
  z-index: 5; }
  header h1 {
    width: 140px; }
    header h1 a:hover {
      opacity: 0.8; }
  header h2 {
    display: none; }
  header .sns {
    display: none; }
  header .onlineBtn {
    display: none; }

.onlineBtn {
  position: fixed;
  right: 35px;
  top: 360px;
  z-index: 10; }
  .onlineBtn ul {
    display: flex;
    justify-content: flex-start;
    transform: rotate(90deg);
    transform-origin: bottom right; }
  .onlineBtn li {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 15px;
    margin-right: 2px;
    letter-spacing: 1px; }
    .onlineBtn li a {
      display: block;
      background: #1A155A;
      color: #fff;
      line-height: 1;
      padding: 10px 20px;
      border-radius: 0 0 6px 6px; }
    .onlineBtn li a:hover {
      opacity: 0.7; }

.language {
  position: absolute;
  right: 0%;
  top: 0%; }
  .language ul {
    display: flex;
    font-weight: 600;
    font-size: 0.8vw; }
  .language li a {
    display: block;
    background: #fff;
    padding: 0.5vw 0.6vw;
    color: var(--base_color);
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff; }
  .language li a.on {
    background: var(--base_color);
    color: #fff; }
  .language li a:hover {
    background: var(--base_color);
    color: #fff; }

footer {
  position: relative;
  width: 100%;
  padding: 30px 0%;
  background: #fff;
  position: sticky;
  position: -webkit-sticky;
  z-index: 2; }
  footer a:hover {
    opacity: 0.7; }
  footer h2 {
    width: 290px;
    padding: 30px 0;
    margin-left: 5%; }
  footer .cpy {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin-left: 5%;
    letter-spacing: 0; }
  footer .linkArea {
    position: absolute;
    right: 5%;
    top: 30px; }
    footer .linkArea ul {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px; }
    footer .linkArea li {
      margin-left: 15px; }
    footer .linkArea .menu {
      font-family: urw-din, sans-serif;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0; }
      footer .linkArea .menu a {
        position: relative; }
      footer .linkArea .menu a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #333;
        bottom: -2px;
        transform: scale(0, 1);
        transform-origin: right top;
        /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
        transition: transform 0.3s;
        /*変形の時間*/ }
      footer .linkArea .menu a:hover::after {
        transform: scale(1, 1);
        /*ホバー後、x軸方向に1（相対値）伸長*/
        transform-origin: left top;
        /*左から右に向かう*/ }
    footer .linkArea .sns li {
      width: 32px; }
    footer .linkArea .other {
      font-size: 12px; }
      footer .linkArea .other a {
        position: relative; }
      footer .linkArea .other a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #333;
        bottom: -2px;
        transform: scale(0, 1);
        transform-origin: right top;
        /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
        transition: transform 0.3s;
        /*変形の時間*/ }
      footer .linkArea .other a:hover::after {
        transform: scale(1, 1);
        /*ホバー後、x軸方向に1（相対値）伸長*/
        transform-origin: left top;
        /*左から右に向かう*/ }

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

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

#page-top.RightMove {
  animation: RightAnime 0.5s 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 .wrap {
  display: flex;
  justify-content: space-between; }
#overview div {
  width: 90%; }
#overview dl {
  display: table;
  margin-bottom: 3%; }
  #overview dl dt {
    display: table-cell;
    width: 200px; }
  #overview dl dd {
    display: table-cell; }

#shop .wrap {
  display: flex;
  justify-content: space-between; }
#shop .txt {
  width: 50%; }
  #shop .txt p {
    margin-bottom: 2%; }
  #shop .txt a {
    position: relative;
    display: block;
    font-size: 1.1vw;
    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: 30%; }
  #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); }
#shop .pht {
  width: 45%; }

#history .wrap dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1%; }
  #history .wrap dl dt {
    width: 10%; }
  #history .wrap dl dd {
    width: 85%; }

#brand dl {
  overflow: hidden;
  margin-bottom: 2%; }
  #brand dl dt {
    font-size: 1.8vw;
    font-weight: 600; }
  #brand dl dd {
    float: left; }
  #brand dl .pht {
    width: 35%;
    margin-right: 2.5%; }
  #brand dl .txt {
    width: 40%;
    margin-right: 2.5%; }
    #brand dl .txt h4 {
      font-size: 1.4vw; }
    #brand dl .txt p {
      margin-bottom: 3%; }
  #brand dl .graf {
    width: 20%; }
#brand dl:last-child {
  margin-bottom: 5%; }
#brand .bgraf {
  text-align: center; }
  #brand .bgraf h4 {
    color: var(--base_color);
    font-size: 2.4vw;
    margin-bottom: 0%; }
  #brand .bgraf p {
    font-size: 1.6vw;
    font-weight: 500;
    margin-bottom: 3%; }
  #brand .bgraf .pht {
    width: 70%;
    margin: 0 auto 3% auto; }

#products h3 {
  margin-bottom: 0; }
#products p {
  margin-bottom: 5%;
  font-size: 1.5vw; }
#products dl {
  overflow: hidden;
  margin-bottom: 2%; }
  #products dl dt {
    font-size: 1.8vw;
    font-weight: 600; }
  #products dl dd {
    float: left; }
  #products dl .pht {
    width: 35%;
    margin-right: 2.5%; }
  #products dl .txt {
    width: 62.50%; }
    #products dl .txt h4 {
      font-size: 1.4vw; }
    #products dl .txt p {
      margin-bottom: 3%;
      font-size: 1.0vw; }

#contact a {
  position: relative;
  display: block;
  font-size: 1.1vw;
  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: 70%;
  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%); } }
.sl4 {
  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%); } }