@charset "UTF-8";
@import url(./common.css);
/*==================================================================*/
/* style css　*/
/*==================================================================*/
/* -------------------------------------------- */
/* mainvisual */
/* -------------------------------------------- */
.mainvisual .bg-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainvisual .bg-slider .catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 95%;
  font-size: 3.2em;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 7px rgba(70, 36, 17, 0.5);
}

/* -------------------------------------------- */
/* お知らせ */
/* -------------------------------------------- */
.news {
  padding: 3em 0;
}
.news .news-in {
  display: flex;
  align-items: center;
}
.news .news-in .title-area {
  width: 20%;
  display: inline-block;
  padding: 2em 6em 2em 0;
}
.news .news-in .title-area .news-title {
  margin-bottom: 2em;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  display: inline-block;
}
.news .news-in .title-area .news-title h2 {
  margin-right: .5em;
  font-size: 1.6em;
}
.news .news-in .title-area .news-title p {
  color: #b2691f;
  font-size: .9em;
}
.news .news-in .title-area .link a {
  padding: 0.5em 1em;
  display: inline-block;
  border: 1px solid black;
  text-decoration: none;
  line-height: 1;
}
.news .news-in .title-area .link a:hover {
  background: #000;
  color: #fff;
}
.news .news-in .news-block {
  width: 80%;
  padding: 2em 0 2em 6em;
  border-left: 1px solid #cccccc;
}
.news .news-in .news-block dl {
  display: flex;
  align-items: center;
  margin-bottom: 1.5em;
}
.news .news-in .news-block dl dt {
  width: 30%;
  max-width: 180px;
  min-width: 180px;
  margin-right: 1em;
  color: #6d6d6d;
}
.news .news-in .news-block dl dt span {
  display: inline-block;
  margin-left: 1em;
  padding: 0 0.5em;
  border: 1px solid black;
  font-size: .8em;
  color: #000;
}
.news .news-in .news-block dl dd {
  width: 70%;
}
.news .news-in .news-block dl:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------- */
/* うなぎやのこだわり */
/* -------------------------------------------- */
.about {
  margin-bottom: 2em;
  background: url("/image/about_photo.jpg") no-repeat bottom center;
  background-size: cover;
}
.about .inblock {
  position: relative;
  height: 740px;
}
.about .inblock .about-in {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  width: 43%;
  color: #fff;
}
.about .inblock .about-in h2 {
  margin-bottom: 1em;
  font-size: 2.8em;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
}
.about .inblock .about-in .read {
  margin-bottom: 3em;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6);
}
.about .inblock .about-in .base-btn {
  text-align: right;
}

/* -------------------------------------------- */
/* おしながき */
/* -------------------------------------------- */
.menu {
  position: relative;
  padding: 10% 0;
}
.menu .menu-top .menu01 {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0;
  max-width: 30%;
  z-index: -1;
}
.menu .menu-top .menu03 {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
  max-width: 30%;
  z-index: -1;
}
.menu .menu-bottom .menu02 {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 0;
  max-width: 30%;
  z-index: -1;
}
.menu .menu-bottom .menu04 {
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 0;
  max-width: 30%;
  z-index: -1;
}
.menu .read {
  margin-bottom: 4em;
}

/* -------------------------------------------- */
/* お持ち帰り */
/* -------------------------------------------- */
.takeout {
  position: relative;
  margin-bottom: 5em;
  height: 740px;
  background: url("/image/takeout_photo.jpg") no-repeat 20% top;
  background-size: cover;
  color: #fff;
}
.takeout .takeout-in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.takeout .takeout-in .base-title p {
  color: #fff;
}
.takeout .takeout-in .base-title p:after {
  background: url("/common_img/title_logo_w.svg") no-repeat;
  content: "";
  display: inline-block;
  background-size: contain;
  width: 115px;
  height: 30px;
}
.takeout .takeout-in .read {
  margin-bottom: 4em;
}

/* -------------------------------------------- */
/* 店舗情報 */
/* -------------------------------------------- */
.company {
  margin-bottom: 5em;
}
.company .text-area {
  display: flex;
  justify-content: space-between;
}
.company .text-area .text-block {
  width: 40%;
}
.company .text-area .text-block .base-btn {
  margin-bottom: 2em;
  text-align: right;
}
.company .text-area .photo {
  width: 55%;
}
.company .photo-area {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -4em;
  z-index: -1;
}
.company .photo-area ul {
  width: 50%;
}
.company .photo-area ul.two {
  display: flex;
  justify-content: flex-end;
}
.company .photo-area ul.two li {
  width: 49%;
  margin-left: 1%;
  text-align: right;
}

/* -------------------------------------------- */
/* アクセス */
/* -------------------------------------------- */
.map {
  position: relative;
  margin-bottom: 5em;
  padding-bottom: 30%;
  height: 0;
  min-height: 250px;
  overflow: hidden;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* -------------------------------------------- */
/* instagram */
/* -------------------------------------------- */
.instagram {
  margin-bottom: 5em;
}
.instagram h2 {
  margin-bottom: 3em;
  text-align: center;
  line-height: 0;
}
.instagram h2 img {
  max-width: 180px;
}
.instagram ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.instagram ul li {
  width: 23%;
}
.instagram ul li .oj-image {
  width: 100%;
  height: 15vw;
}

/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1025px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  .mainvisual .bg-slider {
    height: 70vh;
  }
  .mainvisual .bg-slider .catch {
    font-size: 2.8em;
  }

  /* -------------------------------------------- */
  /* お知らせ */
  /* -------------------------------------------- */
  .news .news-in .title-area {
    padding: 2em 2em 2em 0;
  }
  .news .news-in .news-block {
    padding: 2em 0 2em 3em;
  }

  /* -------------------------------------------- */
  /* うなぎやのこだわり */
  /* -------------------------------------------- */
  .about .inblock {
    height: 600px;
  }
  .about .inblock .about-in {
    width: 60%;
  }
  .about .inblock .about-in h2 {
    font-size: 2.4em;
  }

  /* -------------------------------------------- */
  /* お持ち帰り */
  /* -------------------------------------------- */
  .takeout {
    height: 600px;
  }

  /* -------------------------------------------- */
  /* 店舗情報 */
  /* -------------------------------------------- */
  .company .photo-area {
    margin-top: -2em;
  }

  /* -------------------------------------------- */
  /* instagram */
  /* -------------------------------------------- */
  .instagram ul li .oj-image {
    height: 20vw;
  }
}
/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 769px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  .mainvisual .bg-slider {
    height: 50vh;
  }
  .mainvisual .bg-slider .catch {
    font-size: 2.4em;
  }

  /* -------------------------------------------- */
  /* お知らせ */
  /* -------------------------------------------- */
  .news {
    padding: 2em 0;
  }
  .news .news-in {
    display: block;
  }
  .news .news-in .title-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1em;
    padding: 0;
  }
  .news .news-in .title-area .news-title {
    margin-bottom: 0;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }
  .news .news-in .title-area .news-title h2 {
    margin-right: 0;
    font-size: 1.4em;
  }
  .news .news-in .news-block {
    width: 100%;
    padding: 1em 0 0 0;
    border-left: none;
    border-top: 1px solid #cccccc;
  }
  .news .news-in .news-block dl {
    display: block;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #cccccc;
  }
  .news .news-in .news-block dl dt {
    width: 100%;
    max-width: none;
    margin-right: 0;
  }
  .news .news-in .news-block dl dd {
    width: 100%;
  }

  /* -------------------------------------------- */
  /* うなぎやのこだわり */
  /* -------------------------------------------- */
  .about .inblock {
    height: 500px;
  }
  .about .inblock .about-in {
    width: 100%;
    transform: none;
    -webkit-transform: none;
    top: 10%;
  }
  .about .inblock .about-in .text {
    margin-bottom: 1em;
    padding: 1em;
    background: rgba(0, 0, 0, 0.4);
  }
  .about .inblock .about-in .text h2 {
    margin-bottom: 0;
    padding-bottom: .5em;
    text-align: center;
    font-size: 2em;
  }
  .about .inblock .about-in .text .read {
    margin-bottom: 0;
  }
  .about .inblock .about-in .base-btn {
    text-align: center;
  }

  /* -------------------------------------------- */
  /* おしながき */
  /* -------------------------------------------- */
  .menu .read {
    margin-bottom: 2em;
  }

  /* -------------------------------------------- */
  /* お持ち帰り */
  /* -------------------------------------------- */
  .takeout {
    margin-bottom: 5em;
    height: 500px;
    background-position: 35% top;
  }
  .takeout .takeout-in .base-title p:after {
    width: 100px;
  }
  .takeout .takeout-in .read {
    margin-bottom: 2em;
  }

  /* -------------------------------------------- */
  /* 店舗情報 */
  /* -------------------------------------------- */
  .company {
    margin-bottom: 3em;
  }
  .company .text-area {
    display: block;
  }
  .company .text-area .text-block {
    width: 100%;
    margin-bottom: 1.5em;
  }
  .company .text-area .text-block .read {
    margin-bottom: 2em;
  }
  .company .text-area .text-block .base-btn {
    text-align: center;
  }
  .company .text-area .photo {
    width: 100%;
  }
  .company .photo-area {
    position: static;
    margin-top: 0;
    align-items: start;
  }
  .company .photo-area ul {
    width: 46%;
  }
  .company .photo-area ul.two {
    width: 54%;
  }
  .company .photo-area ul.two li {
    width: 49%;
    margin-left: 1%;
    text-align: right;
  }
}
/*===========================================================================*/
/*  media quary:479px  */
/*===========================================================================*/
@media screen and (max-width: 479px) {
  /* -------------------------------------------- */
  /* mainvisual */
  /* -------------------------------------------- */
  .mainvisual .bg-slider .catch {
    font-size: 1.8em;
  }

  /* -------------------------------------------- */
  /* うなぎやのこだわり */
  /* -------------------------------------------- */
  .about .inblock {
    height: 500px;
  }
  .about .inblock .about-in .text h2 {
    font-size: 1.6em;
  }

  /* -------------------------------------------- */
  /* おしながき */
  /* -------------------------------------------- */
  .menu {
    padding: 0;
  }
  .menu .menu-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
  }
  .menu .menu-top .menu01 {
    position: static;
    max-width: 48%;
  }
  .menu .menu-top .menu03 {
    position: static;
    max-width: 42%;
  }
  .menu .menu-in .read {
    text-align: left;
  }
  .menu .menu-in .base-btn {
    margin-bottom: 1em;
  }
  .menu .menu-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .menu .menu-bottom .menu02 {
    position: static;
    max-width: 46%;
  }
  .menu .menu-bottom .menu04 {
    position: static;
    max-width: 47%;
  }

  /* -------------------------------------------- */
  /* お持ち帰り */
  /* -------------------------------------------- */
  .takeout {
    margin-bottom: 3em;
  }
  .takeout .takeout-in .read {
    text-align: left;
  }

  /* -------------------------------------------- */
  /* アクセス */
  /* -------------------------------------------- */
  .map {
    margin-bottom: 3em;
  }

  /* -------------------------------------------- */
  /* instagram */
  /* -------------------------------------------- */
  .instagram h2 {
    margin-bottom: 2em;
  }
  .instagram ul li {
    width: 48%;
  }
  .instagram ul li .oj-image {
    height: 35vw;
  }
}