@charset "UTF-8";

@import url(//fonts.googleapis.com/css?family=Lato:400,700);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);


/* # =================================================================
# Forms Reset
# ================================================================= */

header input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
header button,
header [type="button"],
header [type="reset"],
header [type="submit"],
header [role="button"] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
header [disabled] {
  cursor: default;
}

header [type="number"] {
  width: auto; /* Firefox 36+ */
}

header [type="search"] {
  -webkit-appearance: textfield; /* Safari 8+ */
}

header [type="search"]::-webkit-search-cancel-button,
header [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* Safari 8 */
}

header textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

header button,
header input,
header optgroup,
header select,
header textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

header optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule. */
}

header button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
header button::-moz-focus-inner,
header [type="button"]::-moz-focus-inner,
header [type="reset"]::-moz-focus-inner,
header [type="submit"]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
header button:-moz-focusring,
header [type="button"]::-moz-focus-inner,
header [type="reset"]::-moz-focus-inner,
header [type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

header button,
header [type="reset"],
header [type="submit"] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

header button,
header select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
header button,
header input,
header select,
header textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
header select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

header select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

header select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

header legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
}

header ::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

header [type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}


/* ---------------------------------
ヘッダー
---------------------------------- */
html header {
  font-size: 62.5%;
}

.wrapper.header {
  height: auto;
}

header {
  background-color: #fff;
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: 1rem;
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  word-wrap: break-word;
}

header * {
  margin: 0;
  padding: 0;
}

header :hover,
header a:hover {
  transition: all .3s;
  -webkit-transition: all .3s;
  text-decoration: none !important;
}

header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 980px;
  height: 80px;
  margin: 0 auto;
  padding: 0;
}

header .logo-area {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 600px;
}

header .logo-area > .title {
  margin-left: 6px;
  line-height: 1.3;
}

header .logo-area > .title > h1 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3;
}

header .logo-area > .title h1 > span {
  display: block;
  letter-spacing: 1px;
}

header .logo-area > .title h1 > .description {
  color: #6e6e6e;
  font-size: 1rem;
  font-weight: normal;
}

header .logo-area > .title h1 > .shop-name {
  border-bottom: 1px solid #ccc;
  font-size: 1.6rem;
  padding-bottom: 2px;
  margin-bottom:4px;
}

header .logo-area > .title h1 > .company-name {
  color: #6e6e6e;
  font-size: 1rem;;
  font-weight: normal;
  text-align: left;
}

header address {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 200px;
  margin: 0;
  padding: 0;
}

header address > .tel {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 4px;
  position: relative;
  padding-left: 30px;
  width: 200px;
}

header address > .tel::before {
  color: #6eb92b;
  content: "\f095";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 2.6rem;
  font-weight: bold;
  text-rendering: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  left: 2px;
  top: 2px;
}

header address > dl.hours {
  display: table;
  table-layout: fixed;
  font-size: 1.2rem;
}

header address > dl.hours dt,
header address > dl.hours dd {
  display: table-cell;
  font-size: 1.2rem;
  text-align: center;
  vertical-align: middle;
}

header address > dl.hours dt {
  background-color: #6eb92b;
  color:#fff;
  font-size: 1.1rem;
  width: 80px;
}

header address > dl.hours dt span,
header address > dl.hours dd span {
  vertical-align: 2px;
}

header address > dl.hours dt::before {
  content: "\f017";
  font-size: 1.4rem;
  padding-right:4px;
}

header address > dl.hours dd {
  background-color :#d7e8c7;
  width: 120px;
}



@media only screen and (max-width: 767px) {
  .wrapper.header {
    height: 50px;
    position: relative;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05),
    0 1px 4px 0 rgba(0, 0, 0, .08),
    0 3px 1px -2px rgba(0, 0, 0, .2);
  }

  header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  header address {
    display: none;
  }

  header > .container {
    height: 50px;
  }

  header .logo-area > a {
    margin-left:10px;
    width: 96px;
  }

  header .logo-area > a > img {
    max-width: 100%;
  }

  header .logo-area > .title > h1 {
    font-weight: normal;
  }

  header .logo-area > .title > h1 > span {
    display: block;
    font-size: .7rem;
    font-weight: bold;
  }

  header .logo-area > .title h1 > .description {
    display: none;
  }

  header .logo-area > .title h1 > .shop-name {
    font-size: 1.2rem;
    letter-spacing: 0;
    margin-bottom: 2px;
  }

  header .logo-area > .title h1 > .company-name {
    font-size: 1rem;
    letter-spacing: 0;
  }
}

/* ---------------------------------
グローバルナビゲーション
---------------------------------- */
nav.global {
  display: none !important;
}

nav.global {
  background-color: #6eb92b;
}

nav.global > .container {
  display: table;
  table-layout: fixed;
  height: 56px;
  position: relative;
  margin: 0;
  padding: 0;
}

nav.global li {
  border-right: 1px solid #4b9f00;
  display: table-cell;
  height: 56px;
  text-align: center;
  vertical-align: middle;
}

nav.global li:first-child {
  border-left: 1px solid #4b9f00;
}

nav.global li:hover {
  background: #3d8001;
}

nav.global li > img {
  vertical-align: middle;
}

nav.global li > a,
nav.global li > a > form {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
}

nav.global li > a > form > input {
  padding:20px;
}

nav.global li > a > form > button {
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width: 767px) {
  nav.global {
    display: block !important;
  }

  nav.global {
    box-shadow: none;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
  }

  nav.global a {
    font-weight: normal !important;
    text-decoration: none !important;
    color: #FFF !important;
  }

  nav.global a:hover {
    text-decoration: none !important;
  }

  nav.global > .container {
    display: block;
    table-layout: inherit;
    margin: inherit;
    height: 46px;
    width: 64px;
  }

  nav.global > .container > li {
    border-right: none;
    display: flex;
    align-items: center;
    height: 50px;
  }

  .global ul li:not(:last-child) {
    display: none;
  }

  .global ul li:last-child img {
    display: none;
  }

  nav.global li > a,
  nav.global li > a > form {
    height: 50px;
  }

  nav.global li > a > form > input[type="image"] {
    display: none;
  }

  nav.global .sp-menu {
    color: #fff;
    display: block;
    font-size: .8rem;
    height: 50px;
    padding: 4px 0;
  }

  nav.global .sp-menu::before {
    content: "\f003";
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2.4rem;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0;
  }

  nav.global button {
  background-color: transparent;
  border-style: none;
  color: inherit;
  }
}