@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0; }

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; }

main {
  display: block; }

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace, monospace;
  font-size: inherit; }

address {
  font-style: inherit; }

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

img,
embed,
object,
iframe {
  vertical-align: bottom; }

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit; }

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none; }

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

select::-ms-expand {
  display: none; }

option {
  padding: 0; }

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0; }

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

label[for] {
  cursor: pointer; }

details {
  display: block; }

summary {
  display: list-item; }

[contenteditable] {
  outline: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption {
  text-align: left; }

td,
th {
  vertical-align: top;
  padding: 0; }

th {
  text-align: left;
  font-weight: bold; }

template {
  display: none; }

[hidden] {
  display: none; }

/*********************
#all
*********************/
body {
  font-size: 16px;
  color: #333;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

.r-container {
  max-width: 1280px;
  margin: 0 auto; }
  .r-container.min {
    max-width: 1080px; }

.r-flex {
  display: flex;
  justify-content: space-between; }

p {
  line-height: 1.6; }

ul li {
  line-height: 1.8; }

img {
  width: 100%; }

span.block {
  display: block; }

section {
  padding-top: calc(80 / 1280 * 100vw);
  padding-bottom: calc(80 / 1280 * 100vw);
  background: #000; }
  section.block {
    padding: 0; }

.blank {
  padding-top: calc(80 / 1280 * 100vw);
  padding-bottom: calc(80 / 1280 * 100vw); }
  .blank.min {
    padding-top: calc(40 / 1280 * 100vw);
    padding-bottom: calc(40 / 1280 * 100vw); }

.bl {
  background: #000; }

.en {
  font-family: abajimin-syuveb, sans-serif;
  font-weight: 400;
  font-style: normal; }

.f-min {
  font-size: .8rem; }

/*********************
#all
*********************/
/*********************
#animation
*********************/
.scroll a {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr; }
  .scroll a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #fff;
    animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite; }
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0; }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0; }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%; }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%; } }
.VueCarousel-navigation-button {
  color: #fff !important;
  opacity: 1 !important;
  outline: none !important; }

.VueCarousel-navigation-next {
  right: -2% !important; }

.VueCarousel-navigation-prev {
  left: -2% !important; }

.fadein {
  opacity: 0;
  transition: all 2s;
  transform: translateY(100px); }
  .fadein.active {
    opacity: 1;
    transform: translateY(0); }

/*********************
#animation
*********************/
/*********************
#header
*********************/
header .inner {
  position: fixed;
  width: 100%;
  padding: .5rem 0;
  z-index: 100;
  transition: 1s; }
  header .inner .r-flex {
    justify-content: space-between;
    align-items: center; }
    header .inner .r-flex.r-container {
      width: 90%; }
  header .inner h1 {
    transition: 3s;
    opacity: 0; }
    header .inner h1 a img {
      width: auto;
      height: 40px; }
header.headerColorScroll {
  transition: 2s; }
  header.headerColorScroll .inner {
    background: rgba(0, 0, 0, 0.6); }
    header.headerColorScroll .inner h1 {
      opacity: 1; }

/*********************
#header
*********************/
/*********************
#footer
*********************/
footer section {
  padding: 0; }
footer .copy {
  padding: 1.5rem 0;
  border-top: 1px solid #fff; }
  footer .copy.r-container {
    max-width: 1280px; }
  footer .copy p {
    text-align: center;
    font-size: .8rem;
    color: #fff; }

/*********************
#footer
*********************/
/*********************
#nav
*********************/
nav .inner {
  background: none !important; }
  nav .inner.pc {
    position: relative;
    display: block; }
    nav .inner.pc ul.r-flex {
      justify-content: flex-end; }
    nav .inner.pc ul li a {
      color: #fff;
      display: block;
      transition: .3s; }
      nav .inner.pc ul li a span {
        text-align: center;
        display: block;
        letter-spacing: 0.1rem; }
        nav .inner.pc ul li a span.en {
          font-size: 1.2rem;
          text-transform: capitalize; }
        nav .inner.pc ul li a span.translate {
          display: block; }
      nav .inner.pc ul li a:hover {
        color: #DAA520; }
    nav .inner.pc ul li:nth-child(-n+6) {
      margin-left: 3rem; }
  nav .inner.sp {
    display: none; }

/*********************
#nav
*********************/
/*********************
#mainvisual
*********************/
.mainvisual {
  background: url("../img/use/top-cocktail.webp") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.4);
  background-blend-mode: darken;
  height: 100vh; }
  .mainvisual .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 3; }
    .mainvisual .inner svg {
      width: 460px;
      height: auto; }

#hoya-logo .st03,
#hoya-logo .st04,
#hoya-logo .st06 {
  stroke: #fff;
  stroke-width: 1px;
  fill: transparent;
  stroke-dasharray: 2500px;
  stroke-dashoffset: 2500px;
  animation: anime01 3s ease-in 0s forwards; }
#hoya-logo .st01,
#hoya-logo .st02,
#hoya-logo .st05 {
  stroke: #b71c22;
  stroke-width: 1px;
  fill: transparent;
  stroke-dasharray: 1000px;
  stroke-dashoffset: 1000px;
  animation: anime02 3s ease-in 0s forwards; }

@keyframes anime01 {
  0% {
    stroke-dashoffset: 2500px; }
  30% {
    fill: transparent; }
  60% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 0;
    fill: #fff; } }
@keyframes anime02 {
  0% {
    stroke-dashoffset: 1000px; }
  30% {
    fill: transparent; }
  60% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 0;
    fill: #b71c22; } }
/*********************
#mainvisual
*********************/
/*********************
#modal
*********************/
.modal-wrap .single-style,
.modal-wrap .single-style2,
.modal-wrap .single-style3 {
  width: 50%;
  margin: 0 1rem;
  cursor: pointer; }
  .modal-wrap .single-style img,
  .modal-wrap .single-style2 img,
  .modal-wrap .single-style3 img {
    display: block;
    width: 210px;
    height: 210px; }
.modal-wrap .single-style2:first-child img {
  margin-left: auto; }
.modal-wrap .modal-area.r-flex {
  align-items: center; }
.modal-wrap .modal-layer,
.modal-wrap .modal-layer2,
.modal-wrap .modal-layer3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 0.65s;
  pointer-events: none;
  opacity: 0;
  z-index: 10000; }
  .modal-wrap .modal-layer.isShow,
  .modal-wrap .modal-layer2.isShow,
  .modal-wrap .modal-layer3.isShow {
    transition: opacity 0.65s;
    pointer-events: auto;
    opacity: 1; }
.modal-wrap .modal-layer-mask {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100vh; }
.modal-wrap .modal-layer-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%); }
.modal-wrap .modal-close {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 30px;
  z-index: 10;
  cursor: pointer; }
.modal-wrap .modal-style-inner {
  width: 100%; }
.modal-wrap .modal-style-inner-wrap {
  display: flex; }
.modal-wrap .modal-style-inner-wrapslide {
  width: 100% !important;
  height: auto; }
.modal-wrap .modal-items {
  width: auto;
  height: 100vh;
  position: relative; }
.modal-wrap .modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }
  .modal-wrap .modal-box .modal-style-area {
    width: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    .modal-wrap .modal-box .modal-style-area .image {
      width: 40%; }
      .modal-wrap .modal-box .modal-style-area .image img {
        width: 100%;
        height: 400px;
        object-fit: cover; }
        .modal-wrap .modal-box .modal-style-area .image img.object-left {
          object-position: left; }
    .modal-wrap .modal-box .modal-style-area .details {
      width: 55%;
      font-family: 'Noto Sans JP', sans-serif;
      text-align: justify; }
      .modal-wrap .modal-box .modal-style-area .details .ttl {
        border-bottom: 0.5px solid #DAA520;
        padding-bottom: 1.25rem;
        margin-bottom: 1rem; }
        .modal-wrap .modal-box .modal-style-area .details .ttl h2 {
          color: #DAA520;
          font-size: 1.4rem;
          font-weight: 400;
          letter-spacing: .1rem;
          line-height: 1.4;
          margin-bottom: .75rem; }
        .modal-wrap .modal-box .modal-style-area .details .ttl h3 {
          color: #fff;
          font-size: 14px;
          text-transform: capitalize; }
      .modal-wrap .modal-box .modal-style-area .details p {
        color: #fff;
        font-weight: 300; }
.modal-wrap .swiper-button-prev {
  background: url("../img/common/arrow-prev.svg") no-repeat;
  width: 25px;
  height: 35px;
  left: 10%;
  outline: none; }
  .modal-wrap .swiper-button-prev:after {
    content: none; }
.modal-wrap .swiper-button-next {
  background: url("../img/common/arrow-next.svg") no-repeat;
  width: 25px;
  height: 35px;
  right: 10%;
  outline: none; }
  .modal-wrap .swiper-button-next:after {
    content: none; }

/*********************
#modal
*********************/
/*********************
#r-page
*********************/
.fb_wrapper {
  margin: 0 auto;
  width: 500px; }
  .fb_wrapper .fb-page,
  .fb_wrapper .fb_iframe_widget {
    width: 100% !important; }
    .fb_wrapper .fb-page span,
    .fb_wrapper .fb_iframe_widget span {
      width: 100% !important; }
    .fb_wrapper .fb-page iframe,
    .fb_wrapper .fb_iframe_widget iframe {
      width: 100% !important; }

.r-page .inner .subttl h2 {
  color: #DAA520;
  font-size: 3.8rem;
  letter-spacing: .1rem;
  text-transform: uppercase; }
.r-page .inner .subttl p {
  font-size: 1.2rem;
  color: #fff;
  margin-top: 1rem; }
.r-page .inner .subttl.pad {
  padding-top: calc(120 / 1280 * 100vw); }
.r-page .inner .box {
  max-width: 980px;
  margin: 0 auto;
  padding-top: calc(120 / 1280 * 100vw); }
.r-page .inner.concept {
  height: 100vh; }
  .r-page .inner.concept .box.r-flex {
    align-items: center; }
  .r-page .inner.concept .box .txtarea {
    width: 50%;
    margin-left: auto; }
    .r-page .inner.concept .box .txtarea p {
      color: #fff;
      text-align: justify; }
      .r-page .inner.concept .box .txtarea p:nth-child(n+2) {
        margin-top: 1rem; }
  .r-page .inner.concept .box .image {
    position: relative; }
    .r-page .inner.concept .box .image img {
      width: 380px;
      height: 250px;
      object-fit: cover;
      position: relative;
      z-index: 1;
      border: 1px solid #DAA520; }
    .r-page .inner.concept .box .image:after {
      content: '';
      position: absolute;
      width: 380px;
      height: 250px;
      background: #DAA520;
      left: 20px;
      top: 20px;
      z-index: 0; }
.r-page .inner.whisky {
  background: url("../img/use/top-whisky.webp") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: darken;
  height: 100vh; }
  .r-page .inner.whisky .subttl {
    text-align: center; }
.r-page .inner.spirits {
  height: 100vh;
  background: url("../img/use/top-spirits.webp") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: darken; }
  .r-page .inner.spirits .subttl {
    text-align: center; }
.r-page .inner.cocktail {
  height: 100vh;
  background: url("../img/use/top-cocktail.webp") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: darken; }
  .r-page .inner.cocktail .subttl {
    text-align: center; }
.r-page .inner.instagram .box {
  width: 100%; }
.r-page .inner.access {
  background: url("../img/use/top.webp") center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.8);
  background-blend-mode: darken; }
  .r-page .inner.access .col {
    color: #fff;
    width: 49%; }
    .r-page .inner.access .col.details h1 {
      text-align: center;
      margin-bottom: 1rem; }
      .r-page .inner.access .col.details h1 img {
        height: 100px;
        width: auto; }
    .r-page .inner.access .col.details .data dl dt,
    .r-page .inner.access .col.details .data dl dd {
      font-size: .9rem;
      vertical-align: top;
      padding: .5rem;
      line-height: 1.6; }
    .r-page .inner.access .col.details .data dl dt {
      width: 20%; }
    .r-page .inner.access .col.details .data dl dd span.block {
      display: block; }
    .r-page .inner.access .col.details .data dl dd span.min {
      font-size: .8rem; }
    .r-page .inner.access .col.map iframe {
      width: 100%;
      height: 100%; }

/*********************
#r-page
*********************/
/*----------レスポンシブ----------*/
@media screen and (min-width: 92em) {
  .r-container {
    max-width: inherit; } }
@media screen and (max-width: 79.9375em) {
  /*********************
  #nav
  *********************/
  nav .inner.pc {
    display: none; }
  nav .inner.sp {
    display: block; }

  .menu-btn {
    position: fixed;
    top: 18px;
    right: 3%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 101;
    border: solid 1px #fff;
    -webkit-transition: all 3s ease-in-out;
    transition: all .3s ease-in-out; }

  .menu-btn-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    width: 30%;
    background: #fff;
    -webkit-transition: all 3s ease-in-out;
    transition: all .3s ease-in-out; }
    .menu-btn-line:before, .menu-btn-line:after {
      content: "";
      height: 1px;
      width: 100%;
      background: #fff;
      position: absolute;
      left: 0;
      -webkit-transition: inherit;
      transition: inherit; }
    .menu-btn-line:before {
      top: -5px; }
    .menu-btn-line:after {
      top: 5px; }

  .open .menu {
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1; }
  .open .menu-btn {
    border-color: #fff; }
  .open .menu-btn-line {
    background-color: transparent; }
    .open .menu-btn-line:before, .open .menu-btn-line:after {
      top: 0;
      background: #fff; }
    .open .menu-btn-line:before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
    .open .menu-btn-line:after {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }

  .menu {
    position: fixed;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, 0.9);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 100; }
    .menu ul {
      transform: translateY(30%);
      padding: 0;
      list-style-type: none; }
    .menu li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-family: abajimin-syuveb, sans-serif;
      text-transform: capitalize;
      letter-spacing: .1rem;
      text-align: center; }
      .menu li a {
        display: block;
        font-size: 1rem;
        color: #fff;
        text-decoration: none;
        -webkit-transition: all .2s;
        transition: all .2s; }
        .menu li a:hover {
          transform: translateX(5px);
          -webkit-transition: all .2s;
          transition: all .2s; }

  /*********************
  #nav
  *********************/ }
@media screen and (max-width: 69.5em) {
  .r-container {
    max-width: inherit;
    width: 95%; } }
@media screen and (max-width: 37.5em) {
  /*********************
  #modal
  *********************/
  .modal-wrap .modal-box {
    position: inherit;
    top: auto;
    left: auto;
    transform: none;
    width: 85%;
    margin: 0 auto;
    padding: 4rem 0; }
    .modal-wrap .modal-box .modal-style-area {
      width: inherit;
      display: block;
      margin: 0 auto; }
      .modal-wrap .modal-box .modal-style-area .image {
        width: 100%; }
        .modal-wrap .modal-box .modal-style-area .image img {
          height: 250px; }
      .modal-wrap .modal-box .modal-style-area .details {
        width: 100%; }
        .modal-wrap .modal-box .modal-style-area .details .ttl h2 {
          margin-top: 1rem;
          font-size: 1rem; }
        .modal-wrap .modal-box .modal-style-area .details .ttl h3 {
          font-size: 12px; }
  .modal-wrap .modal-items {
    overflow: scroll; }
  .modal-wrap .modal-close {
    top: 3%;
    right: 5%; }
  .modal-wrap .swiper-button-next {
    right: 3%; }
  .modal-wrap .swiper-button-prev {
    left: 3%; }

  /*********************
  #modal
  *********************/
  /*********************
  #all
  *********************/
  section {
    overflow: hidden; }

  .scroll a {
    bottom: 10%;
    font-size: 12px; }

  .mainvisual {
    height: 90vh; }
    .mainvisual .inner {
      top: 40%; }
      .mainvisual .inner svg {
        width: 280px; }

  .r-container {
    width: 85%; }

  .r-page .inner .box {
    padding-top: calc(160 / 1280 * 100vw);
    padding-bottom: calc(200 / 1280 * 100vw); }
  .r-page .inner .subttl {
    text-align: center; }
    .r-page .inner .subttl h2 {
      font-size: 2.2rem; }
    .r-page .inner .subttl p {
      font-size: 1rem;
      margin-top: .5rem; }
    .r-page .inner .subttl.pad {
      padding-top: calc(180 / 1280 * 100vw); }
  .r-page .inner.concept {
    height: auto; }
    .r-page .inner.concept .box.r-flex {
      display: block; }
    .r-page .inner.concept .box .col {
      width: 100%; }
      .r-page .inner.concept .box .col .image img {
        width: 315px;
        height: 240px;
        margin: 0 auto; }
      .r-page .inner.concept .box .col .image:after {
        width: 315px;
        height: 240px;
        left: 3%;
        top: 3%; }
    .r-page .inner.concept .box .txtarea {
      width: 100%;
      margin-top: 2rem; }
      .r-page .inner.concept .box .txtarea p {
        font-size: 14px; }
  .r-page .inner.whisky, .r-page .inner.spirits, .r-page .inner.cocktail {
    height: inherit; }
  .r-page .inner.access {
    background-color: rgba(0, 0, 0, 0.9); }
    .r-page .inner.access .box {
      padding-bottom: 1rem; }
    .r-page .inner.access .r-flex {
      display: block; }
    .r-page .inner.access .col {
      width: 100%; }
      .r-page .inner.access .col.details h1 img {
        height: 80px; }
      .r-page .inner.access .col.details .data dl dt {
        width: auto; }
      .r-page .inner.access .col.map {
        margin-top: 1rem; }
        .r-page .inner.access .col.map iframe {
          height: 300px; }

  .modal-wrap .single-style,
  .modal-wrap .single-style2,
  .modal-wrap .single-style3 {
    width: 100%;
    margin: 0 auto; }
    .modal-wrap .single-style img,
    .modal-wrap .single-style2 img,
    .modal-wrap .single-style3 img {
      margin: 0 auto; }
    .modal-wrap .single-style:nth-child(n+2),
    .modal-wrap .single-style2:nth-child(n+2),
    .modal-wrap .single-style3:nth-child(n+2) {
      margin-top: 2rem; }
  .modal-wrap .modal-area.r-flex {
    display: block; }

  /*********************
  #all
  *********************/
  /*********************
  #header
  *********************/
  header .inner {
    padding: 1rem 0; }
    header .inner h1 a img {
      height: 35px; }

  .menu-btn {
    top: 2%;
    width: 40px;
    height: 40px; }

  /*********************
  #header
  *********************/
  /*********************
  #footer
  *********************/
  /*********************
  #footer
  *********************/
  /*********************
  #nav
  *********************/
  /*********************
  #nav
  *********************/ }