.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before,
header .gr2 .reserve a:after {
  background-color: var(--brown);
}

header,
header .gr1 h1,
.hamburger:after {
  color: var(--brown);
}

header .gr2 .reserve a {
  border-color: var(--brown);
}

header .gr2 .reserve a:hover {
  color: var(--light);
}

header .gr2 .reserve a:hover:after {
  background: var(--light);
}

#key {
  position: relative;
  padding-top: 290px;
}

#key h2 {
  width: 66vw;
  margin: 0 auto -30vw;
  position: relative;
  z-index: 1;
}

#key .img {
  margin: 0 0vw 0 -28vw;
  position: relative;
  z-index: 0;
}

#key .img:before {
  content: "";
  background:
    url("../img/shared/shadow_left.png") repeat-y left top,
    url("../img/shared/shadow_right.png") repeat-y right top;
  background-size: 6vw;
  position: absolute;
  left: 28vw;
  right: 0vw;
  top: 0;
  bottom: 0;
  z-index: 1;
}

#key .deco {
  width: 35vw;
  position: absolute;
  left: -3vw;
  top: 106vw;
  z-index: 1;
  mix-blend-mode: multiply;
}

@media screen and (min-width: 768px) {
  #key {
    padding-top: 287px;
  }
  #key h2 {
    width: 433px;
    margin: 0;
    position: absolute;
    right: 169px;
    top: 272px;
    z-index: 2;
  }
  #key .key-eng {
    height: 663px;
    text-align: right;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
  }
  #key .key-eng:before {
    content: "";
    background-image: url("../img/shared/bg.jpg");
    position: absolute;
    left: -100vw;
    right: calc(50% + 500px);
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  #key .key-eng:after {
    content: "";
    background:
      url("../img/shared/shadow_left.png") repeat-y left top,
      url("../img/shared/shadow_right.png") repeat-y right top;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  #key .key-eng img {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }
  #key .key-wine {
    width: 27.4%;
    position: absolute;
    right: 14.2%;
    bottom: 10%;
    z-index: 2;
  }
  #key .key-wine img {
    width: 100%;
    height: auto;
  }
  #key .deco {
    width: 234px;
    right: 1086px;
    left: auto;
    top: 466px;
    z-index: 2;
    mix-blend-mode: multiply;
  }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  #key {
    padding-top: 367px;
  }
  #key h2 {
    top: 352px;
    right: calc(50% - 450px);
  }
  #key .key-eng {
    top: 80px;
  }
  #key .key-eng:before {
    opacity: 0;
  }
  #key .deco {
    top: 546px;
    right: auto;
    left: calc(50% - 600px);
  }
}

#lead {
  position: relative;
  z-index: 0;
}

#lead:before {
  content: "";
  width: 100vw;
  background-image: url("../img/about/lead_deco2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 140vw;
  bottom: 0;
  z-index: -1;
}

#lead .img-group1 {
  gap: 5vw;
  position: relative;
  z-index: 0;
  padding-right: 6.7vw;
  margin-bottom: 15vw;
}

#lead .img-group1 .txt-deco {
  height: 110vw;
  color: #b1a192;
  font-size: 3vw;
  line-height: 1.5;
  letter-spacing: 0.1em;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  position: absolute;
  left: 3.3vw;
  top: 30vw;
  z-index: -1;
}

#lead .img-group1 .txt-deco .txt-latin {
  letter-spacing: 0.1em;
}

#lead h2 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.2em;
  margin-bottom: 5vw;
}

#lead .txt {
  padding: 0 3.3vw 6vw;
}

#lead .img-group2 {
  position: relative;
  padding-top: 23vw;
  margin-bottom: 15vw;
}

#lead .img-group2 .img3 {
  width: 60vw;
  margin-left: 25vw;
}

#lead .img-group2 .deco {
  width: 50vw;
  position: absolute;
  left: 10vw;
  top: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}

#lead .img-group3 {
  position: relative;
  padding: 5vw 0 0 20vw;
}

#lead .img-group3 .eng {
  position: absolute;
  left: 2vw;
  right: 2vw;
  top: 0vw;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  #lead {
    padding: 159px 0 0;
  }
  #lead:before {
    width: 854px;
    height: 1030px;
    left: calc(50% - 427px);
    top: 358px;
    bottom: auto;
  }
  #lead .img-group1 {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 82px;
    position: absolute;
    left: 0;
    top: 0;
    padding-right: 0;
    margin-bottom: 0;
  }
  #lead .img-group1 .txt-deco {
    height: 600px;
    font-size: 16px;
    line-height: 1.7;
    left: 69px;
    top: 565px;
  }
  #lead .img-group1 .img2 {
    margin-left: 45px;
  }
  #lead h2 {
    margin-bottom: 89px;
  }
  #lead .txt {
    text-align: center;
    padding: 0 0 105px;
  }
  #lead .img-group2 {
    position: absolute;
    right: calc(50% - 653px);
    top: 177px;
    padding-top: 144px;
    margin-bottom: 0;
  }
  #lead .img-group2 .img3 {
    width: 290px;
    margin-left: 0;
  }
  #lead .img-group2 .deco {
    width: 292px;
    left: -91px;
  }
  #lead .img-group3 {
    padding: 0;
  }
  #lead .img-group3 .img4 {
    width: 545px;
    margin-left: auto;
  }
  #lead .img-group3 .eng {
    width: 725px;
    left: auto;
    right: 275px;
    top: 41px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  #lead .img-group1 .img2 {
    margin-left: 0;
  }
  #lead .img-group2 {
    right: calc(50% - 600px);
  }
}

#lead2 {
  position: relative;
  overflow: hidden;
  transform: translate(0px, 0px);
}

#lead2:after {
  content: "";
  background:
    url("../img/shared/shadow_left.png") repeat-y left top,
    url("../img/shared/shadow_right.png") repeat-y right top;
  background-size: 3vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
}

#lead2 .scroll-action1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#lead2 .scroll-action1:before {
  content: "";
  width: 100%;
  background: url("../img/shared/bg.jpg");
  position: absolute;
  top: 0;
  left: 0;
  bottom: calc(50% + 25vw);
  z-index: -1;
}
#lead2 .scroll-action1:after {
  content: "";
  width: 100%;
  background: url("../img/shared/bg.jpg");
  position: absolute;
  bottom: -40vh;
  left: 0;
  top: calc(50% + 25vw);
  z-index: -1;
}

#lead2 .scroll-action1 h2 {
  margin: 0 -3vw;
}

#lead2 .scroll-action1 h2 img {
  width: 100%;
  max-width: inherit;
  height: auto;
}

#lead2 .scroll-action2 {
  background: url("../img/shared/bg2.jpg");
  height: calc(100vh - 67px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#lead2 .scroll-action2 .main-image-wrap {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 0 17vw;
}

#lead2 .scroll-action2 .main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lead2 .scroll-action2 .content-bottom {
  padding: 5vw 6.7vw 0;
}

#lead2 .scroll-action2 .content-bottom .txt {
  font-size: 3.5vw;
  line-height: 1.7;
}

#lead2 .scroll-action2 .title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
}

#lead2 .scroll-action2 .title-wrap p {
  white-space: nowrap;
  color: var(--white);
  font-size: 14vw;
  line-height: 1;
  font-weight: 700;
  opacity: 0.2;
}

@media screen and (max-width: 767px) {
  #lead2 .scroll-action2 .text-right,
  #lead2 .scroll-action2 .text-left {
    text-align: center;
    margin: 0 -15vw;
  }
  #lead2 .scroll-action2 .main-image-wrap img {
    margin-top: 5vw;
  }
  #lead2 .fz32 {
    font-size: 5.5vw;
  }
}

@media screen and (min-width: 768px) {
  #lead2:after {
    background-size: auto;
  }
  #lead2 .scroll-action1 {
    height: 100vh;
  }
  #lead2 .scroll-action1:before {
    bottom: calc(50% + 250px);
  }
  #lead2 .scroll-action1:after {
    top: calc(50% + 250px);
    bottom: -180px;
  }
  #lead2 .scroll-action1 h2 {
    margin: 0;
		position: relative;
		z-index: 1;
  }
	#lead2 .scroll-action1 h2:before{
		content: '';
		width: 50vw;
		background-image: url('../img/shared/bg.jpg');
		position: absolute;
		left: -45vw;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
	#lead2 .scroll-action1 h2:after{
		content: '';
		width: 50vw;
		background-image: url('../img/shared/bg.jpg');
		position: absolute;
		right: -45vw;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
  #lead2 .scroll-action2 {
    min-height: 100vh;
    height: auto;
    justify-content: start;
    padding: 213px 0 172px;
  }
  #lead2 .scroll-action2 .main-image-wrap {
    padding: 0;
    width: 500px;
    margin: 0 auto 64px;
    overflow: visible;
    z-index: 1;
  }
  #lead2 .scroll-action2 .fz32 {
    letter-spacing: 0.2em;
  }
  #lead2 .scroll-action2 .text-left {
    position: absolute;
    left: calc(50% - 337px);
    bottom: -30px;
  }
  #lead2 .scroll-action2 .text-right {
    position: absolute;
    right: calc(50% - 330px);
    top: 0;
  }
  #lead2 .scroll-action2 .content-bottom {
    padding: 0;
  }
  #lead2 .scroll-action2 .content-bottom .txt {
    font-size: 16px;
    line-height: 35px;
    text-align: center;
  }
  #lead2 .scroll-action2 .title-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    gap: 36vw;
  }
  #lead2 .scroll-action2 .title-wrap p {
    font-size: 9.8vw;
  }
}

@media screen and (min-width: 1390px) {
  #lead2 .scroll-action2 .title-wrap {
    gap: 495px;
  }
  #lead2 .scroll-action2 .title-wrap p {
    font-size: 138px;
  }
}

@media screen and (min-width: 768px) and (max-height: 930px) {
  #lead2 .scroll-action2 {
    padding-top: 100px;
  }
}

@media screen and (min-width: 768px) and (max-height: 750px) {
  #lead2 .scroll-action2 {
    padding-top: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  #lead2 .scroll-action2 {
    padding: 200px 0 100px;
    justify-content: center;
  }
}

#ingredient-1 {
  padding-top: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 0;
  color: var(--light);
}

#ingredient-1 .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  z-index: 1;
}

#ingredient-1 .special-bg {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100vh - 63px);
  z-index: -1;
}

#ingredient-1 .special-bg p {
  width: 100%;
  height: 50%;
}

#ingredient-1 .wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 50vh;
}

#ingredient-1 h2 {
  margin: 0 -5vw -4vw -7vw;
}

@media screen and (min-width: 768px) {
  @-webkit-keyframes fadeInUp-pc {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  @keyframes fadeInUp-pc {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  #ingredient-1 .fadeInUp-pc {
    -webkit-animation-name: fadeInUp-pc;
    animation-name: fadeInUp-pc;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
  }
  @-webkit-keyframes fadeInDown-pc {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  @keyframes fadeInDown-pc {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0%);
      opacity: 1;
    }
  }
  #ingredient-1 .fadeInDown-pc {
    -webkit-animation-name: fadeInDown-pc;
    animation-name: fadeInDown-pc;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
  }
  #ingredient-1 .special-bg {
    height: 100vh;
  }
  #ingredient-1 .special-bg p {
    width: 50%;
    height: 100%;
  }
  #ingredient-1 h2 {
    margin: 0 63px -39px 0px;
  }
}

#ingredient-2 {
  position: relative;
  z-index: 0;
  padding-bottom: 20vw;
}

#ingredient-2:before {
  content: "";
  width: 100vw;
  height: 100vw;
  background-image: url("../img/about/ingredient_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

#ingredient-2 .row1 {
  margin-bottom: 15vw;
}

#ingredient-2 .row1 .img-group {
  gap: 6vw;
  padding: 0 3.3vw 8vw 0;
}

#ingredient-2 .row1 .img-group .img1 {
  margin-left: -3.3vw;
}

#ingredient-2 .row1 .img-group .img2 {
  margin-bottom: 10vw;
}

#ingredient-2 .row1 .col-text {
  padding: 0 3.3vw;
}

#ingredient-2 .row1 .col-text h3 {
  margin-bottom: 4vw;
}

#ingredient-2 .row2 {
  position: relative;
}

#ingredient-2 .row2 .deco {
  width: 34vw;
  position: absolute;
  top: -7vw;
  left: 54vw;
  z-index: 1;
  mix-blend-mode: multiply;
}

#ingredient-2 .row2 .eng {
  position: absolute;
  top: 29vw;
  left: -3vw;
  z-index: 2;
}

#ingredient-2 .row2 .img3 {
  width: 60vw;
  margin-left: -3.3vw;
}

#ingredient-2 .row2 .img4 {
  width: 76vw;
  margin: -29vw -17vw 0 auto;
}

#ingredient-2 .row2 .col-text {
  padding: 0 3.3vw;
}

#ingredient-2 .row2 .col-text h3 {
  margin-bottom: 4vw;
}

@media screen and (min-width: 768px) {
  #ingredient-2 {
    padding-bottom: 184px;
  }
  #ingredient-2:before {
    width: 1081px;
    height: 675px;
  }
  #ingredient-2 .row1 {
    margin-bottom: 53px;
  }
  #ingredient-2 .row1 .img-group {
    gap: 0;
    padding: 0;
  }
  #ingredient-2 .row1 .img-group .img1 {
    width: 500px;
    margin-left: calc(50% - 144px);
  }
  #ingredient-2 .row1 .img-group .img2 {
    margin-bottom: 0;
    position: absolute;
    top: 93px;
    right: calc(50% - 689px);
  }
  #ingredient-2 .row1 .col-text {
    padding: 0;
    width: 575px;
    margin-top: 280px;
  }
  #ingredient-2 .row1 .col-text h3 {
    margin-bottom: 51px;
  }
  #ingredient-2 .row2 .deco {
    width: 214px;
    top: -1px;
    left: calc(50% - 370px);
  }
  #ingredient-2 .row2 .eng {
    top: 94px;
    left: calc(50% - 359px);
  }
  #ingredient-2 .row2 .img3 {
    width: 442px;
    margin: 0 0 68px calc(50% - 703px);
  }
  #ingredient-2 .row2 .img4 {
    width: 764px;
    margin: 0;
    position: absolute;
    top: -98px;
    right: calc(50% - 820px);
  }
  #ingredient-2 .row2 .col-text {
    width: 705px;
    padding: 0;
    text-align: right;
  }
  #ingredient-2 .row2 .col-text h3 {
    margin-bottom: 37px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1360px) {
  #ingredient-2 .row1 .img-group .img2 {
    right: calc(50% - 600px);
  }
  #ingredient-2 .row2 .col-text {
    width: 680px;
  }
  #ingredient-2 .row1 .img-group .img1 {
    margin-left: 0;
  }
}

#experience {
  position: relative;
  padding: 30vw 0 0;
}

#experience:before {
  content: "";
  width: 100vw;
  height: 15vw;
  background-image: url("../img/about/deco.png");
  background-repeat: no-repeat;
  background-size: 167vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

#experience .row1 {
  margin-bottom: 15vw;
}

#experience .row1 h2 {
  color: var(--brown);
  font-size: 12vw;
  line-height: 1.09;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 10vw;
}

#experience .row1 h2 span {
  text-transform: uppercase;
}

#experience .row1 h3 {
  margin-bottom: 8vw;
}

#experience .row1 .txt {
  padding: 0 3.3vw;
}

#experience .row2 {
  position: relative;
  z-index: 0;
  padding: 0 10vw 10vw;
}

#experience .row2:after {
  content: "";
  background-image: url("../img/shared/bg3.jpg");
  position: absolute;
  left: 0;
  right: 0;
  top: 15vw;
  bottom: 0;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 83%);
}

#experience .row2 .mainimg {
  position: relative;
  z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#experience .row2 .mainimg video{
	display: block;
	width: 100%;
	height: 49vw;
	object-fit: cover;
	object-position: 50%;
}
#experience .row2 .mainimg:before {
  content: "";
  width: 1px;
  background: var(--dark);
  height: 10vw;
  position: absolute;
  left: 50%;
  top: -10vw;
  z-index: 2;
}

#experience .row2 .mainimg:after {
  content: "";
  width: 1px;
  background: var(--light);
  height: 10vw;
  position: absolute;
  left: 50%;
  top: 0vw;
  z-index: 2;
}

#experience .row2 .eng-ttl {
  padding: 0 25vw;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

#experience .row2 .eng-ttl1 {
  top: 20vw;
}

#experience .row2 .eng-ttl2 {
  bottom: 30vw;
}

#experience .row2 .eng-txt {
  width: 86vw;
  color: #352b1b;
  font-size: 3vw;
  line-height: 1.7;
  letter-spacing: 0.1em;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  position: absolute;
  top: 30vw;
}

#experience .row2 .eng-txt1 {
  left: 2vw;
  text-align: left;
}

#experience .row2 .eng-txt2 {
  right: 2vw;
  text-align: right;
}

#experience .row2 .pasta-btn {
  width: 55vw;
  position: absolute;
  left: 21vw;
  top: 30vw;
  z-index: 3;
}

#experience .row2 .pasta-btn a {
  display: block;
  position: relative;
}

#experience .row2 .pasta-btn a .on {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

#experience .row2 .pasta-btn a .off {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  #experience {
    padding: 235px 0 0;
  }
  #experience:before {
    width: 1454px;
    height: 105px;
    background-size: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #experience .row1 {
    margin-bottom: 184px;
  }
  #experience .row1 h2 {
    font-size: 110px;
    margin-bottom: 98px;
  }
  #experience .row1 h3 {
    margin-bottom: 31px;
  }
  #experience .row1 .txt {
    padding: 0;
    text-align: center;
  }
  #experience .row2 {
    padding: 0 0 171px;
  }
  #experience .row2:after {
    top: 155px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 68.5%);
  }
	#experience .row2 .mainimg{
		width: 859px;
		margin: 0 auto;
	}
  #experience .row2 .mainimg:before {
    height: 114px;
    top: -114px;
  }
  #experience .row2 .mainimg:after {
    height: 114px;
  }
	#experience .row2 .mainimg video{
		height: 525px;
	}
  #experience .row2 .eng-ttl {
    padding: 0;
  }
  #experience .row2 .eng-ttl1 {
    top: 245px;
  }
  #experience .row2 .eng-ttl2 {
    bottom: 419px;
  }
  #experience .row2 .eng-txt {
    width: 460px;
    font-size: 16px;
    line-height: 1.75;
    top: 415px;
  }
  #experience .row2 .eng-txt1 {
    left: calc(50% - 610px);
  }
  #experience .row2 .eng-txt2 {
    right: calc(50% - 600px);
  }
  #experience .row2 .pasta-btn {
    width: 567px;
    left: calc(50% - 298px);
    top: 336px;
  }
  #experience .row2 .pasta-btn a .on {
    opacity: 0;
  }
  #experience .row2 .pasta-btn a .off {
    opacity: 1;
  }
  #experience .row2 .pasta-btn a:hover .on {
    opacity: 1;
  }
  #experience .row2 .pasta-btn a:hover .off {
    opacity: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  #experience .row1 h2 {
    font-size: 100px;
  }
  #experience .row2 .eng-txt1 {
    left: calc(50% - 580px);
  }
  #experience .row2 .eng-txt2 {
    right: calc(50% - 580px);
  }
}

.popup-pasta h2 {
  margin: 0 -6vw 6vw;
}

.popup-pasta .img {
  margin-bottom: 6vw;
}

.popup-pasta .txt {
  text-align: justify;
}

@media screen and (min-width: 768px) {
  .popup-pasta h2 {
    margin: 0 0 67px;
  }
  .popup-pasta .img {
    margin-bottom: 69px;
  }
  .popup-pasta .txt {
    text-align: center;
  }
}

#menu .row1 {
  padding: 20vw 0;
  position: relative;
  z-index: 0;
}

#menu .row1:after {
  content: "";
  background-image: url("../img/about/menu_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#menu .row1 .ttl-group {
  position: relative;
  padding-bottom: 30vw;
}

#menu .row1 .ttl-group .ttl1 {
  width: 54vw;
}

#menu .row1 .ttl-group .ttl2 {
  font-size: 16vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--brown);
  text-transform: uppercase;
  text-align: center;
  padding-left: 10vw;
}

#menu .row1 .ttl-group h2 {
  font-size: 5vw;
  font-weight: 500;
  line-height: 2;
  position: absolute;
  left: 0;
  top: 33vw;
}

#menu .row1 .map-group {
  margin: 10vw 0 -8vw;
  position: relative;
}

#menu .row1 .map-group .menu-map {
  margin: 0 -2vw 0 -16vw;
}

#menu .row1 .map-group .map-btn {
  position: absolute;
  z-index: 1;
}

#menu .row1 .map-group .map-btn a {
  display: block;
  position: relative;
}

#menu .row1 .map-group .map-btn a .on {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

#menu .row1 .map-group .map-btn a .off {
  opacity: 0;
}

#menu .row1 .map-group .btn1 {
  width: 20vw;
  left: 0;
  top: 40vw;
}

#menu .row1 .map-group .btn2 {
  width: 24vw;
  top: 16vw;
  left: 7vw;
}

#menu .row1 .map-group .btn3 {
  width: 21vw;
  top: -6vw;
  left: 56vw;
}

#menu .row1 .map-group .btn4 {
  width: 22vw;
  left: 66vw;
  top: 38vw;
}

#menu .row1 .map-group .btn5 {
  width: 23vw;
  left: 74vw;
  top: 58vw;
}

#menu .row1 .banner-group .banner a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--brown);
  color: var(--light);
  height: 40vw;
  position: relative;
  padding-top: 2vw;
}

#menu .row1 .banner-group .banner a span {
  display: block;
}

#menu .row1 .banner-group .banner a .eng1 {
  pointer-events: none;
}

#menu .row1 .banner-group .banner a .eng2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 9vw;
  padding: 0 14vw;
  text-align: center;
}

#menu .row1 .banner-group .banner a .arrow {
  width: 9vw;
  margin-top: 2vw;
}

#menu .row1 .banner-group .banner a .jp {
  font-size: 5vw;
  line-height: 2;
  font-weight: 500;
}

#menu .row1 .banner-group .banner1 {
  margin-bottom: 6vw;
}

#menu .row1 .banner-group .banner1 a .eng1 {
  width: 60vw;
  position: absolute;
  left: -2vw;
  top: -8vw;
  z-index: 1;
}

#menu .row1 .banner-group .banner2 a .eng1 {
  width: 60vw;
  position: absolute;
  right: -2vw;
  bottom: -14vw;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  #menu .infinite-slider p {
    width: 46vw;
  }
}

@media screen and (min-width: 768px) {
  #menu .row1 {
    padding: 0 0 213px;
  }
  #menu .row1:after {
    top: 106px;
  }
  #menu .row1 .ttl-group {
    padding-bottom: 0;
  }
  #menu .row1 .ttl-group .ttl1 {
    width: 432px;
    margin: 0 0 -4px -3px;
  }
  #menu .row1 .ttl-group .ttl2 {
    font-size: 140px;
    padding-left: 82px;
  }
  #menu .row1 .ttl-group h2 {
    font-size: 28px;
    line-height: 1.75;
    letter-spacing: 0.1em;
    left: calc(50% - 43px);
    top: 9px;
  }
  #menu .row1 .note {
    margin: 9px 0 0 12px;
  }
  #menu .row1 .map-group {
    margin: -9px 0 -29px;
  }
  #menu .row1 .map-group .menu-map {
    width: 1007px;
    margin: 0 0 0 -18px;
  }
  #menu .row1 .map-group .map-btn a .on {
    opacity: 0;
  }
  #menu .row1 .map-group .map-btn a .off {
    opacity: 1;
  }
  #menu .row1 .map-group .map-btn a:hover .on {
    opacity: 1;
  }
  #menu .row1 .map-group .map-btn a:hover .off {
    opacity: 0;
  }
  #menu .row1 .map-group .btn1 {
    width: 167px;
    left: 99px;
    top: 383px;
  }
  #menu .row1 .map-group .btn2 {
    width: 193px;
    top: 160px;
    left: 230px;
  }
  #menu .row1 .map-group .btn3 {
    width: 170px;
    top: -35px;
    left: 648px;
  }
  #menu .row1 .map-group .btn4 {
    width: 164px;
    left: 729px;
    top: 367px;
  }
  #menu .row1 .map-group .btn5 {
    width: 138px;
    left: 800px;
    top: 515px;
  }
  #menu .row1 .banner-group {
    gap: 50px;
  }
  #menu .row1 .banner-group .banner {
    width: 360px;
  }
  #menu .row1 .banner-group .banner a {
    height: 160px;
    padding-top: 7px;
  }
  #menu .row1 .banner-group .banner a .eng2 {
    top: 35px;
    padding: 0;
    text-align: center;
  }
  #menu .row1 .banner-group .banner a .arrow {
    width: 36px;
    margin-top: 10px;
  }
  #menu .row1 .banner-group .banner a .jp {
    font-size: 20px;
  }
  #menu .row1 .banner-group .banner a:hover {
    opacity: 0.8;
  }
  #menu .row1 .banner-group .banner1 {
    margin-bottom: 0;
  }
  #menu .row1 .banner-group .banner1 a .eng1 {
    width: 266px;
    left: -83px;
    top: -30px;
  }
  #menu .row1 .banner-group .banner2 a .eng1 {
    width: 269px;
    right: -28px;
    bottom: -66px;
  }
}

.popup-menu {
  padding: 6vw 0 0;
}

.popup-menu .col-text .eng-ttl {
  margin: -6vw -5vw 4vw;
}

.popup-menu .col-text .jp-ttl {
  font-size: 4.8vw;
  line-height: 1.75;
  margin-bottom: 4vw;
}

.popup-menu .col-text .price {
  font-size: 5vw;
  line-height: 1.75;
  margin-bottom: 6vw;
}

.popup-menu .col-text .txt {
  text-align: justify;
}

@media screen and (min-width: 768px) {
  .popup-menu {
    padding: 5px 0 0;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .popup-menu .img {
    width: 480px;
  }
  .popup-menu .col-text {
    width: 441px;
    position: relative;
  }
  .popup-menu .col-text .eng-ttl {
    width: 612px;
    margin: 1px 0 27px -102px;
  }
  .popup-menu .col-text .eng2 {
    margin: -1px 0 21px -102px;
  }
  .popup-menu .col-text .eng3 {
    margin-top: -1px;
  }
  .popup-menu .col-text .eng4 {
    margin-bottom: 21px;
  }
  .popup-menu .col-text .eng5 {
    margin-bottom: 8px;
  }
  .popup-menu .col-text .jp-ttl {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 27px;
    text-align: left;
  }
  .popup-menu .col-text .price {
    text-align: left;
    font-size: 22px;
    letter-spacing: 0.2em;
    margin-bottom: 49px;
  }
  .popup-menu .col-text .price2 {
    margin-bottom: 65px;
  }
  .popup-menu .col-text .price3 {
    margin-bottom: 85px;
  }
  .popup-menu .col-text .price4 {
    margin-bottom: 102px;
  }
  .popup-menu .col-text .price5 {
    margin-bottom: 72px;
  }
}

@media screen and (min-width: 768px) {
  .remodal.menu {
    padding-bottom: 114px;
  }
}

#wine {
  position: relative;
}

#wine:before {
  content: "";
  width: 20vw;
  height: 20vw;
  background-image: url("../img/about/wine_icon.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: 3vw;
  top: -7vw;
  z-index: 1;
}

#wine .row {
  padding: 30vw 0 0;
}

#wine .img-group {
  width: 63vw;
  margin: 0 auto;
  height: 105vw;
}

#wine .img-group .img {
  margin: 0 0 40vw;
  position: relative;
  will-change: transform;
}

#wine .img-group .slide1 {
  transform: rotate(8.71deg);
}

#wine .img-group .eng-ttl {
  width: 78vw;
  position: absolute;
  top: -13vw;
  left: -8vw;
  z-index: 2;
}

#wine .group-content h2 {
  letter-spacing: 0.2em;
  margin: 0 auto 6vw;
  white-space: nowrap;
}

#wine .group-content .txt {
  padding: 0 3.3vw;
}

#wine .eng-txt {
  color: #b1a192;
  font-size: 3vw;
  line-height: 1.75;
  letter-spacing: 0.1em;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  position: absolute;
  left: -20vw;
  right: -20vw;
  bottom: 0;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  #wine {
    padding: 195px 0 203px;
  }
  #wine:before {
    width: 146px;
    height: 141px;
    right: calc(50% - 600px);
    top: -53px;
  }
  #wine .row {
    padding: 0;
  }
  #wine .img-group {
    width: 541px;
    margin: 0 0 0 -90px;
    height: 708px;
    position: relative;
  }
  #wine .img-group .img {
    margin: 0 0 100px;
  }
  #wine .img-group .eng-ttl {
    width: 445px;
    top: -97px;
    left: 461px;
  }
  #wine .group-content {
    width: 450px;
  }
  #wine .group-content h2 {
    margin: 37px 0 33px 98px;
  }
  #wine .group-content .txt {
    padding: 0;
  }
  #wine .eng-txt {
    font-size: 16px;
    left: -175px;
    right: 55px;
    bottom: auto;
    top: 597px;
  }
}