@charset "UTF-8";
/* ==========================================================
Name:
    base.css

Description:
    サイト全体に共通する設定を記述する

Contents:
    base settings
    javascript style hooks
    base blocks
========================================================== */
/* ==========================================================
*
*   base settings
*
========================================================== */
/* ---------------------------------------------
*   Noto Sans JP
--------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=EB+Garamond:500&display=swap");
/* ---------------------------------------------
*   html, body
--------------------------------------------- */
html,
body {
  color: #444;
  font-weight: 400;
  font-size: 2.9333333333vw;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html {
  overflow: auto;
  scroll-behavior: smooth;
}

body {
  position: relative;
  padding-bottom: 24px;
  line-height: 1.5;
  min-width: 320px;
  /* overflow-y: scroll; */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
body.open {
  overflow: hidden;
}

/* ---------------------------------------------
*   header
--------------------------------------------- */
.header-logo{
  display: flex;
  align-items: center;
  position: relative;
  left: 15px;
  margin: 15px auto;
}
.logo{
  max-width: 130px;
}
/* ---------------------------------------------
*   footer
--------------------------------------------- */
.footer{
  text-align: center;
}
/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------
*   <img> tag
--------------------------------------------- */
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ---------------------------------------------
*   button
--------------------------------------------- */
button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  color: #444;
}

.ebis-tag {
  height: 0;
}

* {
  outline-color: #fff !important;
}

/* ---------------------------------------------
*   sp-none
--------------------------------------------- */
.sp-none {
  display: none;
}

/* ==========================================================
*
*   javascript style hooks
*
========================================================== */
/* ==========================================================
*
*   base blocks
*
========================================================== */


/* ---------------------------------------------
*   wrapper
--------------------------------------------- */
.wrapper {
  transition: all .5s;
}
.wrapper.open {
  transform: translateX(86.66667vw);
}

/* ---------------------------------------------
*   overlay
--------------------------------------------- */
.overlay {
  content: "";
  position: fixed;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}

.overlay.open {
  width: 100%;
  height: 100vh;
  opacity: 1;
}

.text-bold {
  font-weight: 500;
}

.text-normal {
  font-size: 14px;
}

.text-middle {
  font-size: 15px;
}

.text-large {
  font-size: 16px;
}

.text-mlarge {
  font-size: 19px;
}

.text-xlarge {
  font-size: 24px;
}

/* ==========================================================
*
*   PC_base settings
*
========================================================== */
@media screen and (min-width: 760px) {
  /* ---------------------------------------------
  *   html, body
  --------------------------------------------- */
  html,
  body {
    color: #666;
    font-size: 14px;
  }
  body {
    min-width: 1220px;
  }
  body.product {
    position: relative;
    overflow: visible;
  }
  /* ---------------------------------------------
  *   header
  --------------------------------------------- */
  .header-logo{
    max-width: 1220px;
  }
  .logo{
    max-width: 170px;
  }
  
  /* ---------------------------------------------
  *   <img> tag
  --------------------------------------------- */
  img {
    max-width: 100%;
    width: auto;
  }

  /* ---------------------------------------------
  *   pc-none/sp表示
  --------------------------------------------- */
  .sp-none{
    display: block;
  }
  .pc-none {
    display: none;
  }
  /* ==========================================================
  *
  *   javascript style hooks
  *
  ========================================================== */
  /* ==========================================================
  *
  *   base blocks
  *
  ========================================================== */

  body.error .wrapper {
    margin-top: 95px;
  }

}