@charset "utf-8";

html {
  font-size : calc(100vw / 9.60);
}
body {
  font-size : .16rem;
  font-family : "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, Meiryo, メイリオ, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}
a {
  text-decoration : none;
  color : #000000;;
}
header {
  margin : 0;
}
header nav {
  position : fixed;
  z-index : 10;
  width : 100%;
  background-color : #ffffff;
  height : .6rem;
  box-shadow : 0 .02rem .05rem rgba(0,0,0,.3);
  transition : 1s;
}
h1 {
  font-size : .2rem;
  margin : 0;
  width : 1.5rem;
  padding : .15rem .1rem 0;
  box-sizing : border-box;
  transition : 1s;
}
h1 img {
  width : 100%;
}
body.top header nav {
  background-color : transparent;
  box-shadow : none;
  transition : 1s;
}

body.top header nav h1 {
  opacity : 0;
}

body.top header nav ul li a {
  color : #ffffff;
}

.top_image {
  height : 100vh;
  background-image : url(../img/mecca.jpg);
  background-size : cover;
  background-position : center;
  position : relative;
  max-height : 6rem;
}
.slogan {
  position : absolute;
  bottom : .4rem;
  font-size : .6rem;
  font-family : "Roboto", sans-serif;
  font-weight : 700;
  right : 0;
  left : 0;
  margin : auto;
  /* text-align: center; */
  width : 2.9rem;
  line-height : 1;
  letter-spacing : -.05em;
  mix-blend-mode : difference;
  color : #ffffff;
}
div#greeting,
div#nissyotei {
  height : 3rem;
  position : relative;
  background-image : url(../img/kawasaki.jpg);
  background-size : cover;
}
.message {
  box-sizing : border-box;
  width : 4rem;
  position : absolute;
  right : 0;
  left : 0;
  top : -.2rem;
  padding : .5rem .9rem;
  margin : auto;
  background-color : #2f9329;
  color : #ffffff;
  font-size : .14rem;
  border-radius : .2rem;
  height : 3.4rem;
  z-index : 9;
}
.message h4 {
  margin : .1em 0 .5em;
  font-size : .3rem;
  /* text-decoration: underline; */
  border-bottom : 3px solid #cccccc;
}
div#greeting:before,
div#greeting:after,
div#nissyotei:before,
div#nissyotei:after {
  content : "";
  display : block;
  width : 50%;
  height : 100%;
  float : left;
}
div#nissyotei {
  height : 4.2rem;
}

div#kawasaki {
  display : flex;
  height : 3.5rem;
  padding : .1rem;
  box-sizing : border-box;
}

.address {
  width : 50%;
  box-sizing : border-box;
  padding : 0 .6rem;
}

.gmap {
  width : 50%;
}

div#yokohama {
  height : 3.5rem;
  display : flex;
  flex-flow : row-reverse;
  padding : .1rem;
  box-sizing : border-box;
  margin : 1rem 0 0 0;
}
div#shopinfo h2 {
  font-size : .5rem;
  margin : 1em;
  font-family : "Roboto",sans-serif;
  font-weight : 700;
  color : #2f9329;
  letter-spacing : -.05em;
  /* text-transform: uppercase; */
  display : inline-block;
}

.address h3 {
  font-size : .3rem;
  margin : 0 0 1em 0;
  border-bottom : .15em solid red;
  display : inline-block;
  padding : 0 .3rem 0 0;
  font-family : "Roboto",sans-serif;
}

.address address {
  font-style : normal;
  font-size : .17rem;
}
div#yokohama .address {
  text-align : right;
}

div#yokohama .address h3 {
  padding : 0 0 0 .3rem;
}
.phone:before {
  content : "\f095";
  font-family : "Font Awesome 5 Free";
  padding : 0 .8em 0 0;
  font-weight : bold;
}
.opentime p {
  margin : 0;
}

.opentime h5 {
  margin : .1rem 0;
}
.sns {
  font-size : .3rem;
  text-align : right;
}
.sns a {
  color : #000000;
}
div#yokohama .sns {
  text-align : left;
}
div#shopinfo {
  margin : 0 0 1rem 0;
}

div#nissyotei::before {
  background-image : url(../img/showroom1.jpg);
  background-size : cover;
}

div#nissyotei::after {
  background-image : url(../img/showroom2.jpg);
  background-size : cover;
}

#nissyotei .message {
  background-color : #e60012;
  height : 4.6rem;
}
nav ul {
  position : absolute;
  right : .1rem;
  list-style : none;
  padding : 0;
  margin : 0;
  display : flex;
  top : 0;
  height : .55rem;
}

nav ul li {
  padding : 0;
  margin : 0;
  padding : 0;
  line-height : .6rem;
}

nav ul li a {
  text-decoration : none;
  font-size : .13rem;
  height : 100%;
  display : block;
  color : #000000;
  padding : 0 .12rem;
  transition : 1s;
}

nav ul li a:hover {
  border-bottom : .05rem solid #2f9329;
}

footer {
  height : 2rem;
  background-color : #212121;
  color : #555555;
  position : relative;
}
.footer_copyright {
  text-align : center;
  padding : 2em 0;
  font-size : .08rem;
  position : absolute;
  bottom : 0;
  color : #aaaaaa;
  text-align : center;
  width : 100%;
}
.footer_copyright a {
  color : #aaaaaa;
  text-decoration : none;
}
.drawer-hidden {
  display : none;
}
h1.not-found__title {
  width : 100%;
  text-align : center;
}

.not-found p {
  text-align : center;
}

.not-found ul {
  text-align : center;
  list-style : none;
}

@media only screen and (max-width:767px) {
  .drawer-open {
    display : flex;
    height : 1.2rem;
    width : 1.2rem;
    justify-content : center;
    align-items : center;
    position : absolute;
    z-index : 100;
    cursor : pointer;
    top : .2rem;
    right : .2rem;
    background-color : #2f9329;
    color : #ffffff;
    border-radius : 10%;
  }


  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    content : "";
    display : block;
    height : .07rem;
    width : .79rem;
    border-radius : 0;
    background : #ffffff;
    transition : .5s;
    position : absolute;
    color : #ffffff;
  }

  .drawer-open span:before {
    bottom : .18rem;
  }

  .drawer-open span:after {
    top : .18rem;
  }

  #drawer-check:checked ~.drawer-open span {
    background : rgba(255, 255, 255, 0);
  }

  #drawer-check:checked ~.drawer-open span::before {
    bottom : 0;
    transform : rotate(45deg);
  }

  #drawer-check:checked ~.drawer-open span::after {
    top : 0;
    transform : rotate(-45deg);
  }

  #drawer-content {
    width : 100%;
    height : 100%;
    position : fixed;
    top : 0;
    left : 100%;
    z-index : 99;
    background : rgba(16, 16, 16, .95);
    transition : .5s;
    color : #ffffff;
    display : block;
    padding : .3rem;
    box-sizing : border-box;
    overflow-y : auto;
  }
  #drawer-content li {
  }
  /*  */
  #drawer-check:checked ~#drawer-content {
    left : 0;
  }
  #drawer-check:checked ~.drawer-open {
    position : fixed;
  }
  .drawer-open span span {
    top : .36rem;
  }

  .drawer-open span span:before,
  .drawer-open span span:after {
    content : none;
  }
  header nav {
    height : 1.6rem;
  }

  h1 {
    font-size : .2rem;
    margin : 0;
    width : 3.3rem;
    padding : .55rem .1rem 0 .3rem;
    box-sizing : border-box;
  }
  .content.top_image {
    max-height : 10rem;
  }
  .slogan {
    font-size : 1rem;
    bottom : .7rem;
  }
  div#greeting {
    height : 5.9rem;
  }

  div#nissyotei {
    height : 8.3rem;
  }
  .message {
    font-size : .35rem;
    width : 7.5rem;
    height : 6.3rem;
    max-width : 90%;
  }
  .message h4 {
    font-size : .45rem;
    margin : .2rem 0 .5rem;
  }
  div#kawasaki {
    display : block;
    height : auto;
  }

  .address {
    width : 100%;
  }

  .address h3 {
    font-size : .6rem;
  }

  .address address {
    font-size : .4rem;
  }

  .address_wrap {
    /* display: flex; */
  }

  .phone {
    font-size : .7rem;
    padding : .4rem;
    font-weight : 700;
  }

  .opentime {
    font-size : .43rem;
  }

  .opentime p {
    display : block;
    width : 50%;
    float : left;
  }

  .opentime h5 {
    font-size : .5rem;
  }

  .sns {
    font-size : .8rem;
    text-align : left;
    clear : both;
    padding : .1rem;
  }

  .gmap {
    width : 100%;
    margin : .6rem 0;
  }

  div#yokohama {
    display : block;
    height : auto;
  }

  div#yokohama .sns {
    text-align : right;
  }

  #nissyotei .message {
    height : 8.8rem;
  }

  .message .opentime {
    font-size : .38rem;
  }

  nav ul li a {
    color : #ffffff;
    padding : .5rem;
    font-size : .5rem;
    border-bottom : .05rem solid #333333;
  }
}
@media (orientation: landscape) and (max-width: 767px) {
  .slogan {
    width : 100%;
    white-space : nowrap;
  }
}