@charset "utf-8";

body {
  font-family: 'Kaisei Opti', serif;
  background-color: #ddd5b9;

  /* background: url(images/retro.jpeg);
  background-size: 100%;
  background-attachment: fixed; */
  /* background-repeat: no-repeat; */
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

header.header {
  width: 100%;
  height: 700px;
  margin-bottom: 30px;
}


/* ハンバーガーメニュー２ */
/* hamburger */
.hamburger {
  /* display: block;
  position: fixed;
  z-index: 3;
  right: 13px;
  top: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center; */
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #402f22;
  border-radius: 25%;
  -moz-border-radius: 25%;
  -webkit-border-radius: 25%;
}

.hamburger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 6px;
  background: white;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 19px;
  left: 14px;
}

.hamburger span:nth-child(2) {
  top: 29px;
  left: 14px;

}

.hamburger span:nth-child(3) {
  top: 39px;
  left: 14px;

}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  background: #fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  visibility: hidden;
}

/* nav.globalMenuSp div.taputapu {
  position: absolute;
  top: 100px;
  height: 100px;
  background: white;
  z-index: 3;

} */



nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-size: 30px;
  color: #402f22;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}

nav.globalMenuSp ul li:first-child {
  padding-top: 30px;
}

nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}

nav.globalMenuSp ul li:hover {
  background: #ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #402f22;
  padding: 2em 0;
  text-decoration: none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible;
}


/* hamburger end*/

/* ハンバーガーメニュー2おわり */

.slide-img {
  filter: sepia(1);
}


.steam-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
}

p.steam01 img::before,
p.steam02 img::before,
p.steam03 img::before {
  background-color: rgba(0, 0, 0, 0.7);
}

@keyframes steam-move-01 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }

  6% {
    opacity: 0.15;
  }

  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 0.3;
  }

  66% {
    transform: scaleY(1, 0.8) rotateY(4deg);
  }

  100% {
    filter: blur(18px);
    transform: scaleY(1.5, 1.3) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}

@keyframes steam-move-02 {
  0% {
    filter: blur(12px);
    transform: scale(0.8, 0.8) rotateY(0deg);
    opacity: 0;
    bottom: -1300px;
  }

  6% {
    opacity: 0.15;
  }

  33% {
    transform: scale(0.9, 1.1) rotateY(30deg);
    opacity: 0.3;
  }

  66% {
    transform: scaleY(1, 0.8) rotateY(4deg);
  }

  100% {
    filter: blur(18px);
    transform: scaleY(1.5, 1.3) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}

.steam-01 {
  left: calc(50% - 350px);
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
}

.steam-02 {
  left: calc(50% - 350px);
  -webkit-animation: steam-move-02 20s infinite linear;
  animation: steam-move-02 20s infinite linear;
}

main.main {
  position: relative;
  top: 0;
}

.main__gallery #lightgallery_images a img,
.header__img img {
  filter: sepia(0.5);
}

.main__gallery #lightgallery_images a img::hover {
  filter: none;
}

/* トップイメージ */
/* ul.header__img--g {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.header__img {
  width: 100%;
  position: absolute;
  top: 0px;
  height: 700px;
}

.header__img--g li {
  width: 50%;
}

img.header__img1,
img.header__img2 {
  width: 100%;
  vertical-align: bottom;
  line-height: 1.0em;
}

img.header__img3,
img.header__img4 {
  width: 200%;
  vertical-align: bottom;
  line-height: 1.0em;
}

img.header__img--pc {
  display: none;
} */

/* トップイメージ */
@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 12s linear 0s;
  animation: zoomUp 12s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-img {
  background-size: cover;
  background-position: center center;
  height: 700px;
}

.slide-text {
  position: absolute;
  z-index: 10;
  font-size: 40px;
  color: #fff;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-weight: bold;
}

/* トップイメージ */

ul.header__nav--pc {
  position: absolute;
  top: 20px;
  z-index: 100;
}

ul.header__nav--pc li a {

  text-decoration: none;
  list-style: none;
  color: white;
}

p.shopname {
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  /* align-items: center; */
  color: white;
  font-size: 13.5vw;
  /* position: absolute; */
  left: 43.5%;
  /* z-index: 10; */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-shadow: 1px 2px 3px #000000;
}

.newarrival {
  color: white;
  /* text-shadow: 1px 2px 3px #000000; */
  background: #212e2c;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
  margin: 0 auto;
  padding: 1em;
  width: 80%;
  border: 8px solid rgb(46, 37, 37);
  box-shadow: 2px 2px 4px rgb(66, 52, 52), 2px 2px 2px rgb(0, 0, 0) inset;
  /* display: flex;
  justify-content: center; */
  position: relative;
  /* top: 10%; */
  /* position: absolute;
  bottom: 50px;
  right: 3.5%;
  left: 3.5%; */
  margin-bottom: 100px;
}

dl.newarrival__day {
  font-size: 13px;
  line-height: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  /* justify-content: center; */
}

.newarrival__day dt {
  width: 25%;
  text-align: right;

}

.newarrival__day dd {
  width: 75%;
}

.newarrival p {
  /* width: 100%; */
  text-align: center;
}



.main__aboutmoritahiko {
  /* margin-top: 200px; */
  width: 100%;
  /* background: white; */
  margin-bottom: 150px;
}

.main__aboutmoritahiko h1 {
  color: #402f22;
  padding: 0px 0 0 40px;
  font-size: 40px;
  text-shadow: 1px 2px 3px #817e7e;
}

.main__aboutmoritahiko p {
  margin: 0 auto;
  padding: 40px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

span.big {
  font-size: 30px;
  color: rgb(146, 105, 28);
  text-shadow: 1px 2px 3px #8b8989;

}

img.main__aboutmoritahiko--img {
  margin: 0 auto;
  width: 300px;
  display: block;
}

canvas {
  /* width: 100%; */
  /* height: 300px; */
  /* position: absolute; */
  /* top: 250px; */
  /* background-color: rgba(201, 187, 129, 0.5); */
}

.main__menu {
  display: flex;
  background-color: #cdcf95;
  /* background-color: white; */
  background-image: url(http://www.transparenttextures.com/patterns/asfalt-dark.png);
  padding: 50px 0;
}

.main__menu_frame {
  width: 88%;
  margin: 0 auto;
  background-color: #876205;
  background-image: url(http://www.transparenttextures.com/patterns/dark-wood.png);
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  padding: 3% 3% 3%;
  border: transparent 1px solid;
  border-radius: 15px;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
  margin-bottom: 150px;
}

.main__menu_frame h1 {
  color: white;
  font-size: 40px;
  padding: 0 0 0 40px;
  text-shadow: 1px 2px 3px #000000;
}

.main__menu_frame p {
  padding: 10px;
  color: white;
  text-shadow: 1px 2px 3px #000000;
}




.main__menu--name,
.main__menu--hotorice,
.main__menu--value {
  width: 30%;
  margin: 0 auto;
  display: none;
}

ul.main__menu--smp {
  text-align: left;
  width: 100%;
  font-size: 4vw;
}







li.main__menu--smp--value {
  text-align: left;
}


.main__menu--name li,
.main__menu--hotorice li,
.main__menu--value li {
  line-height: 50px;
  text-align: left;
  font-size: clamp(13px, 1.5vw, 25px);
  color: #402f22;
  padding: 0;
}

.main__menu--hotorice li::before,
.main__menu--value li::before {
  content: "　　　";
}

.main__menu--name li::before {
  content: "　";
}


.frame_oct {
  background: linear-gradient(45deg, transparent 14px, rgb(201, 187, 129) 15px, rgb(201, 187, 129) 16px), linear-gradient(135deg, transparent 14px, rgb(201, 187, 129) 15px, rgb(201, 187, 129) 16px), linear-gradient(225deg, transparent 14px, rgb(201, 187, 129) 15px, rgb(201, 187, 129) 16px), linear-gradient(315deg, transparent 14px, rgb(201, 187, 129) 15px, rgb(201, 187, 129) 16px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  /* 隙間ができる場合は51% 51%にする */
  background-repeat: no-repeat;
  margin: 0 auto;
  /* box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5); */
  /* width: 95%; */
}

.frame_oct::before,
.frame_oct::after {
  display: block;
  content: "";
  width: auto;
  margin: 0 20px;
}

.frame_oct::before {
  border-top: solid 1px rgb(201, 187, 129);
}

.frame_oct::after {
  border-bottom: solid 1px rgb(201, 187, 129);
}

.frame_oct>div {
  border-left: solid 1px rgb(201, 187, 129);
  border-right: solid 1px rgb(201, 187, 129);
  margin: 20px 0;
  padding: 0 20px;
}

/*---------------------
  ボタン
  --------------------*/



button {
  /* width: 260px;
  height: 40px;
  padding: 0 15px;
  margin: 0 auto 20px;
  color: #fff; */
  background: rgb(201, 187, 129);
  border: none;
  color: #402f22;
  text-decoration: none;
  list-style: none;
}

button:focus {
  outline: none;
}

button#btn1::hover {
  color: #cdcf95;
}

/*---------------------
    ふきだし
    --------------------*/
.balloon1,
.balloon2,
.balloon3,
.balloon4,
.balloon5,
.balloon6,
.balloon7,
.balloon8,
.balloon9,
.balloon10,
.balloon11 {
  position: absolute;
  left: 12%;
  width: 240px;
  height: 250x;
  padding: 10px;
  color: rgb(0, 0, 0);
  background: #fff;
  text-align: left;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
  border-radius: 25px;
  /* font: 16px / 2 "游ゴシック"; */
}

li.balloon1,
li.balloon2,
li.balloon3,
li.balloon4,
li.balloon5,
li.balloon6,
li.balloon7,
li.balloon8,
li.balloon9,
li.balloon10,
li.balloon11 {
  font-size: 14px;
  line-height: 18px;
  padding: 13px;
}

li #btn1::active {
  color: white;
}

.main__gallery {
  margin-bottom: 200px;
}

#lightgallery_images {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.main__gallery #lightgallery_images img {
  width: 29vw;
  height: 29vw;
  object-fit: cover;
  vertical-align: bottom;
}

.main__gallery h1 {
  color: #402f22;
  padding: 50px 0 0 40px;
  font-size: 40px;
  text-shadow: 1px 2px 3px #c4c3c3;
}

#lightgallery_images a {
  text-decoration: none;
  display: block;
  margin: 0;
  padding: 0.3%;
}

footer.footer {
  /* height: 350px; */
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #402f22;
  height: 300px;

}

.footer__shopinfo,
.footer__shopinfo2 {
  padding: 20px;
  line-height: 30px;
  color: white;
  margin: 0 auto;
}



@media screen and (min-width:900px) {



  .newarrival {
    width: 700px;
    position: relative;
    top: 10px;
  }

  p.shopname {
    writing-mode: horizontal-tb;
  }
}



@media screen and (min-width:670px) {

  .header__img {
    display: none;
  }

  p.shopname {
    height: 100vh;
    font-size: 8vw;
  }

  .newarrival {
    margin-bottom: 150px;
  }

  .newarrival dl {
    line-height: 30px;
    font-size: 20px;
  }

  .newarrival dl.newarrival__day {
    font-size: 20px;
    line-height: 30px;
  }

  .main__menu--name,
  .main__menu--hotorice,
  .main__menu--value {
    display: inline-block;
  }

  ul.main__menu--smp {
    display: none;
  }

  .main__menu_frame h1 {
    padding: 0;
  }

  .main__menu_frame p {
    padding: 10px;
    color: white;
    text-shadow: 1px 2px 3px #000000;
  }

  .balloon1,
  .balloon2,
  .balloon3,
  .balloon4,
  .balloon5,
  .balloon6,
  .balloon7,
  .balloon8,
  .balloon9,
  .balloon10,
  .balloon11 {
    left: 17%;
  }

  .main__gallery #lightgallery_images img {
    width: 15.3vw;
    height: 15.3vw;
    object-fit: cover;
    vertical-align: bottom;
  }

  #lightgallery_images {
    width: 80%;
  }

  .main__menu_frame {
    margin: 0 auto;
    width: 75%;
    margin-bottom: 150px;
  }

  .main__aboutmoritahiko h1,
  .main__menu_frame h1,
  .main__gallery h1 {
    text-align: center;
  }

  h1.shopname {
    font-size: 10vh;
    left: 47%;
  }

  .main__new {
    width: 700px;
    justify-content: space-between;
  }

  footer.footer {
    flex-direction: row;
    height: 180px;
  }

  @media screen and (min-width:900px) {



    .newarrival {
      width: 700px;
      position: relative;
      top: 10px;
    }

    p.shopname {
      writing-mode: horizontal-tb;
      position: absolute;
      left: 10%;
      top: -100px;
      font-size: 100px;
      width: 450px;
      line-height: 130px;
      letter-spacing: 20px;
    }

    ul.header__nav--pc {
      display: inline-block;
      display: flex;
      text-decoration: none;
      list-style: none;
      color: white;
    }

  }


}