@charset"utf-8";
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0
}

.pc-hidden {
  display: block
}

.sp-hidden {
  display: none
}

img {
  max-width: 100%;
  width: auto
}

@media (min-width:900px) {
  .sp-hidden {
    display: block
  }
  .pc-hidden {
    display: none
  }
  img {
    max-width: initial;
    width: auto
  }
  a[href^="tel:"] {
    pointer-events: none
  }
}

#wrapper {
  position: relative;
  overflow: hidden
}

main {
  display: block
}

.inner {
  max-width: 90vw;
  margin: 0 auto;
  position: relative
}

@media (min-width:900px) {
  article {}
  .inner {
    max-width: 1000px;
    margin: 0 auto
  }
}

header {
  width: 100%;
  z-index: 10;
  height: 18vw;
  position: fixed
}

header.fixed {
  width: 100%;
  z-index: 10;
  transition: .2s;
  background: #fff;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25)
}

header.fixed.hide {
  transform: translateY(-100%)
}

header .inner {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  align-content: center
}

header h1.siteid {
  width: 55vw
}

header h1 a {
  display: block;
  margin: 2.5% 0 0 5%;
  padding: 2.5vw 0 2.5vw 10vw;
  font-size: .5625rem;
  background: url(../img/siteid.png) left center no-repeat;
  background-size: contain;
  color: #fff
}

header.fixed h1 a {
  color: #232323
}

header .contact {
  width: 18vw;
  margin-right: 18vw
}

header .drawer-toggle.drawer-hamburger {
  padding: 0;
  width: 18vw;
  height: 18vw;
  position: absolute;
  background: url(../img/ham_btn.png) no-repeat;
  background-size: cover;
  z-index: auto
}

.drawer-open h1 a {
  color: #232323
}

.drawer-open header {
  background: #fff
}

.drawer--top.drawer-open .drawer-hamburger {
  background: url(../img/ham_btn_close.png) no-repeat;
  background-size: cover
}

.drawer-open header .drawer-toggle.drawer-hamburger span {
  background: transparent
}

.drawer--top.drawer-open .drawer-nav {
  margin-top: 17.5vw;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .25)
}

.drawer--top .drawer-nav {
  top: -100vh
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

.drawer-nav {
  padding: 0 0 10vw;
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

.drawer-nav ul li {
  border-bottom: 1px solid #E5E5E5;
  padding: .75rem 0
}

.drawer-nav .pc-site {
  padding: 2rem 5vw 0
}

.drawer-overlay {
  background-color: transparent
}

@media (min-width:900px) {
  header {
    height: 80px
  }
  header .inner {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1400px
  }
  header.fixed {
    width: 100%;
    z-index: 10
  }
  header h1.siteid {
    width: 40%
  }
  header h1 a {
    margin: 5px 5% 0;
    padding: 10px 0 10px 50px;
    font-size: 12px;
    background: url(../img/siteid.png) left center no-repeat;
    background-size: 45px 66px;
    color: #fff
  }
  header .contact {
    min-width: 202px;
    width: auto;
    margin-right: 0
  }
  header .drawer-toggle.drawer-hamburger {
    display: none
  }
  .drawer-nav {
    padding: 0
  }
  .drawer-nav ul {
    padding: 0
  }
  .drawer-nav ul li {
    border-bottom: none;
    padding: 0;
    white-space: nowrap
  }
  .drawer-nav .pc-site {
    padding: 0 0;
    position: absolute;
    right: 210px;
    top: 15px;
    width: auto
  }
  .drawer-nav .drawer-menu {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .drawer-nav {
    padding: 0;
    background: transparent;
    width: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }
  .drawer-nav li a {
    display: block;
    font-size: 16px;
    padding: 0 1rem;
    color: #fff
  }
  .drawer-menu-item {
    padding: 0
  }
  header.fixed .drawer-menu li a {
    color: #232323
  }
  .drawer--top .drawer-nav {
    top: auto
  }
}

footer {
  background: #efefef;
  padding: 2.5vw 0;
  font-size: .75rem
}

footer a {
  color: #fff
}

footer ul {
  display: flex;
  margin: 0 auto;
  text-align: center;
  justify-content: center
}

footer ul li:not(:last-child):after {
  content: "?";
  padding-left: 1rem
}

footer ul li {
  margin: .5rem 1rem 0 0
}

@media (min-width:900px) {
  footer {
    font-size: 12px;
    padding: 20px 0
  }
}