@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Metal&display=swap');
main {
  margin-bottom: 5em;
  /* ----------------------------------------------------
	KV
---------------------------------------------------- */
  .box__lyt--kv {
    position: relative;
    width: 100%;
	  background-color: #2c1c17;
	  
	@media screen and (min-width:769px) {
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		aspect-ratio: 16 / 12.5;
		max-height: 100vh;
	}
	  
	  
    .lyt--tit {
      position: relative;
      color: #b09e8b;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
	  padding: 20vw 0 13vw;
		@media screen and (min-width:769px) {padding: 0;}
		
      .lyt-inner {
        position: relative;
		  max-width: min(86%,474px);
        margin: auto;
        z-index: 5;
		  @media screen and (min-width:769px) {
			  max-width: min(100%,474px);
		  }
        h1 {
          font-family: 'Zen Old Mincho', serif;
		  font-size: clamp(2rem, 2.6vw, 2.6rem);
          font-weight: 500;
			  opacity: 0;
			animation: simple-fade .6s ease-out .4s forwards;
        }
        .lyt--tit-line {
			position: relative;
			&::before,&::after{
				content: "";
				position: absolute;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: currentColor;
				transform-origin: left;
				animation: border 1s linear forwards;
			}
			&::before{top: 0;}
			&::after{bottom: 0;}
			
			
          margin-top: .6em;
          padding: .6em .6em;
			@media screen and (min-width:769px) {
				padding: .6em 3em;
			}
          .lyt--eve-tit {
            font-family: "Metal", serif;
            font-style: italic;
		    font-size: clamp(4.2rem, 6vw, 6rem);
            line-height: 1.2;
			  opacity: 0;
			  animation: simple-fade 1s ease-out 1s forwards;
          }
			#text {mask: url(#mask);}
			.handwriting {width: 100%;height: auto;
			.handwriting_text {fill: #b09e8b;}
			.handwriting_mask_line {
				fill: none;
				stroke: #fff;
				stroke-width: 7;
				stroke-linecap: round;
				stroke-linejoin: round;
				stroke-dasharray: 4000px;
				opacity: 0;
				animation: handwriting 4s linear 1.6s forwards;
				animation-fill-mode: backwards;
				}
			}
          figure {
            width: 86%;
            margin: auto;
            line-height: 1;
			@media screen and (min-width:769px) {
				width: 90%;
			}
          }
        }
      }
      &::before {
        content: "";
        position: absolute;
		  top: 0;
		  left: 0;
        width: 100%;
        height: 100%;
        background: url("../img/kv.webp") 90% center no-repeat;
        background-size: cover;
        mix-blend-mode: screen;
        opacity: 0;
        z-index: 1;
		animation: blur 1.5s ease-out .3s forwards;
      }
    }
    .lyt--mv {
      position: relative;
		line-height:0;
		
	  background-color: #2c1c17;
      img {
        width: 100%;
        height: 100%;
		aspect-ratio: 1 / 1.1;
        object-fit: cover;
		opacity: 0;
		animation: simple-fade 1s ease-out 1.6s forwards;
		  @media screen and (min-width:769px) {
			  aspect-ratio:auto;
		  }
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 24%;
        background-image: linear-gradient(180deg, rgba(44, 28, 23, 1), rgba(44, 28, 23, 0.82) 27%, rgba(44, 28, 23, 0.11) 78%, rgba(44, 28, 23, 0));
		  z-index: 5;
		@media screen and (min-width:769px) {
			width: 40%;
			height: 100%;
			background-image: linear-gradient(90deg, rgba(44, 28, 23, 1), rgba(44, 28, 23, 0.82) 33%, rgba(44, 28, 23, 0.11) 78%, rgba(44, 28, 23, 0));
		}
      }
    }
    &::after {
      content: "";
      position: absolute;
      top: 1em;
      left: 76%;
      background: url("../img/logo_dm.svg") center center no-repeat;
      max-width: min(20%,100px);
		width: 100%;
      aspect-ratio: 2 / 1;
      z-index: 10;
		animation: simple-fade 1s ease-out forwards;
		@media screen and (min-width:769px) {
			width: 7%;		
			left: 2em;
		}
    }
  }
  .box__lyt--prologue{
	  margin-bottom: 6vw;
	  @media screen and (min-width:769px) {
		  margin-bottom: 12vw;
	  }
	  
	  .lyt--parallax {
		  position: relative;
		  height: 70.2222vw;
		  overflow: hidden;
		  @media screen and (min-width:769px) {
		  height: 52.2222vw;
		  }
		  img {
			  position: absolute;
			  top: -20vw;
			  left: 0;
			  width: 100%;
			  height: 140%;
			  object-fit: cover;
				  object-position: 60% 50%;
			  will-change: transform;
			  @media screen and (min-width:769px) {
				  top: -20%;
				  height: 120%;
			  }
			 }
		  
		.lyt--gardenroom {
			position: absolute;
			inset: 0;			
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;			
			background-attachment: fixed;
			background-image: url("../img/ph_prologue01.webp");
			/*opacity: 0;
			animation: fade-pllax 20s infinite;*/
			
			/*&.bg1 {background-image: url("../images/pic_parallax01.webp");animation-delay: 0s;}	*/	
		}
	  }
	  .lyt--introduction{
		  position: relative;
		  width: 94%;
		  margin: -10vw auto 0;
		  z-index: 5;
		  @media screen and (min-width:960px) {
		  display: grid;
		  grid-template-columns: 1.5fr 1.5fr;
		  grid-template-areas: "gre gal";
		  column-gap: 6em;
		  justify-items:space-between;
		  }
		  
		  
		  .lyt--greetings{
			  grid-area: gre;
			  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
			  line-height: 2.2;
			  letter-spacing:.05em;
			  padding: 4vw;
			  background-color: #39251e;
			  p{+ p{margin-top: 1.2em;}}
			  sup{vertical-align: super; font-size: .7em;font-weight: 300;}	
			  
			  
			  .lyt--gallery-in{
				  width: 90%;
				  margin: 2vw auto;
			  display: flex;
			  align-items: flex-start;
			  column-gap: 1em;
			  img{
				  width: 100%;
				  height: 100%;
				  aspect-ratio: 1 / 1.15;
				  object-fit: cover;
			  }
			  .food{&.fadeBlock{transition-delay: .1s;}}
			  @media screen and (min-width:960px) {display: none;}		
			  }
		  }
		  
		  .lyt--gallery{
			  display: none;
			  @media screen and (min-width:960px) {
			  grid-area: gal;
			  display: flex;
			  align-items: flex-start;
			  column-gap: 1em;
			  img{
				  width: 100%;
				  height: 100%;
				  aspect-ratio: 1 / 1.15;
				  object-fit: cover;
			  }
				  .wine{margin-top: 6vw;&.fadeBlock{transition-delay: .8s;}img{object-position:70% 100%;aspect-ratio: 1.1 / 1.4;}}
			  .food{&.fadeBlock{transition-delay: .4s;}img{/*width: 100%;
				  height: 100%;object-fit: 80%;*/object-position:70% 100%}}
		  }			  
		  }
	  }
	  
	  
	  
	  
	  
	  .note{
		  font-family: "Noto Sans JP", sans-serif;
		  font-size: 1.2rem;
		  line-height: 1.7;
		  font-weight: 400;
		  margin-top: 1.5em;
	  }
  }
  .box__lyt--sommelier{
		position: relative;
		padding: 0 0;
	 @media screen and (min-width:769px) {
		  display: grid;
		  grid-template-columns: 1.25fr 1fr;
		  grid-template-areas: "prof ph";
		  overflow: hidden;
	  }
		
		.lyt--ph{
			grid-area: ph;
			
			.parallax {	
				position: relative;
				width: 100%;
				height: 100%;
				line-height: 0;
				z-index: 1;
				
				li{
					position: absolute;
					inset: 0;
					opacity: 0;
					width: 100%;
					height: 100%;
					animation: fade-pllax 20s infinite;
					
					&:nth-child(1){animation-delay: 0s; img{object-position: 35% 100%}}
					&:nth-child(2){animation-delay: 10s; img{object-position: 48% 100%}}
					
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		
		}
		.lyt--profile{
			position: relative;
			width: 100%;
				@media screen and (min-width:769px) {
			grid-area: prof;
				}
			
			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background: url("../img/bg_profile.webp") 50% center no-repeat;
				background-size: cover;
				mix-blend-mode: screen;
				opacity: .1;
				z-index: 1;
			}
			.lyt--inner{
				position: relative;
				display: flex;
				flex-direction: column;
				max-width: min(90%,580px);
				margin: auto;
				font-size: clamp(1.4rem, 1.6vw, 1.6rem);				
				letter-spacing:.03em;
				font-weight: 500;
				color: #221815;
				background-color: #b09e8b;
				
				padding: 2em 1.4em;
				z-index: 5;
				letter-spacing:.01em;
				.parallax{max-width: min(100%,380px);margin: 0 auto 4vw;}
				@media screen and (min-width:769px) {
					padding: 2em;letter-spacing:.08em;
					.parallax{ display: none}
				}
				
				
				.lyt--career{
					p{
						&.lyt--name{font-size: clamp(1.8rem, 3.4vw, 3.4rem);margin-top: .4em;}
						+ p{
							margin-top: 1em;
						}
					}
					.lyt--sub-text{
						font-size: clamp(1.2rem, 1.6vw, 1.6rem);
					}
					
					dl{
						margin:1.6em 0;
						dt{
							display: inline-block;
							font-weight: 700;
							/*margin-bottom: .6em;
							border-radius: 6px;
							padding: .1em 1em;
							color: #b09e8b;
							background-color: #39251e;*/
						}
						dd{font-size: clamp(1.2rem, 1.6vw, 1.6rem);
								padding-bottom: .4em;
							+ dd{
								padding-top: .4em;
								border-top: 1px dotted rgba(57,37,30,.6);
							}
							@media screen and (min-width:769px) {
								padding-bottom: .2em;
								+ dd{padding-top: .2em;}
							}
						}
					}
				}
				.lyt--message{
					.lyt--hdg{
						position: relative;
						font-style: italic;
						font-size: clamp(1.8rem, 2.4vw, 2.4rem);
						margin-bottom: .4em;
						&::after{
							content: "";
							position: absolute;
							top: .2em;
							bottom: 0;
							right: 0;
							margin: auto;
							width: calc(100% - 4.75em);
							height: 1px;
							background-color: #221815;							
						}
					}
				}
				.lyt--sign{
					width: 36%;
					margin-top: auto;
					margin-left: auto;
				}
			}
			
			
		}
	}
	
  .box__lyt--event{
	  position: relative;
	  margin-bottom: 6vw;
	  padding: 8vw 0 12vw;
	  
	  .lyt--overview{
		  position: relative;
		  max-width: min(90%,960px);
		  margin: auto;
		  border: 1px solid #b09e8b;
		  backdrop-filter: blur(6px);		  
		  background-color: rgba(0,0,0,.4);
		  padding: 6vw .9em;
		  z-index: 5;
		  
		  .lyt--details{
			  max-width: min(100%,768px);
			  margin: auto;
			  
			  dl{
				  max-width: min(90%, 620px);
				  margin: 0 auto 1.6em;
				  display: grid;
				  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
				  grid-template-columns: 3.1fr 6.55fr;
				  gap: .5em 0;
				  
				  @media screen and (min-width:769px) {
					  grid-template-columns: 1.85fr 8fr;
				  }
				  
				  dt{&::after{content: " :";}}
				  
				  dt,dd{
					  letter-spacing:.05em;
					  &:nth-child(odd){ letter-spacing:.2em; }
					  &:nth-child(odd):nth-child(-n+10){
						  letter-spacing:.75em;
						  &::after{content: ":";}
					  }
				  }
				  
				  
				  
			  }
		  }
		  
		  .lyt--summary{
			  max-width: min(100%,768px);
			  margin: 2vw auto;
			  padding: 1.6em 0;
			  border-top: 1px solid;
			  border-bottom: 1px solid;
			  border-color: #b09e8b;
			  
			  .lyt--hdg{
				  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
				  font-weight: 700;
				  text-align: center;
				  
				  @media screen and (min-width:769px) {		
				  margin-bottom: .6em;
				  }
			  }
			  
			  .lyt--date{
				  max-width: min(90%, 620px);
				  margin: .3em auto 1em;/**/
				  text-align: center;
				  
				  @media screen and (min-width:769px) {					  
				  display: grid;
				  grid-template-columns: 7.6fr 1.2fr;
				  column-gap: .6em;
				  align-items: center;
				  }
				  
				  .lyt--time{
					  font-size: clamp(2rem, 3.4vw, 3.2rem);
					  font-weight: 700;
					  letter-spacing:.02em;
					  color: #b09e8b;
					  margin-bottom: .4em;
					  /*margin: 1em 0 1.6em;*/
					  @media screen and (min-width:769px) {		
						  margin-bottom: 0;
					  }
				  }
				  em{
					  border-radius: 6px;
					  font-size: clamp(1.6rem, 2vw, 2rem);
					  font-weight: 700;
					  padding: .1em 1em;
					  color: #221815;
					  background-color: #b09e8b;
				  
				  @media screen and (min-width:769px) {		
					  padding: 0;		
					  margin: .2em 0 0;
				  }
				  }
			  }
		  }
		  
		  .lyt--reservation{
			  max-width: min(90%,768px);
			  margin: auto;
			  column-gap: 2em;
			  align-items: center;
				  
				  @media screen and (min-width:769px) {		
					  display: grid;
					  grid-template-columns: 1fr 1fr;
					  grid-template-areas: "guide ph";
				  }
			  
			  
			  figure{
				  grid-area: ph;
				  text-align: right;
				  font-size: 1.2rem;
				  margin: 3em 0;
					  
				  @media screen and (min-width:769px) {	margin: 0;}
				  img{
					   width: 100%;
					   height: 100%;
					   aspect-ratio: 2 / 1.5;
					   object-fit: cover;
					  
					  @media screen and (min-width:769px) {	aspect-ratio: 1.5 / 2; }
				  }
			  }
			  
			  aside{
				  grid-area: guide;
				  text-align: center;
				  @media screen and (min-width:769px) {	text-align: left;letter-spacing:.08em}
				  
				  .lyt--hdg{
					  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
					  font-weight: 700;
					  margin-bottom: .6em;
				  }
				  .lyt--tel{
					  font-size: clamp(2.6rem, 3.4vw, 3.2rem);
					  font-weight: 700;
					  letter-spacing:.02em;
					  color: #b09e8b;
				  }
				  
				  
				  .lyt-dlogo{
					  max-width: 260px;
					  margin: 3.5em auto.4em;	
				  @media screen and (min-width:769px) {	 margin: 3.5em 0 .4em;	}
					  }
				  
				  .lyt-contact{
					  font-size: 1.4rem;
					  max-width: 430px;
					  margin:1em auto 0;
					  text-align: left;
					  dt{ font-weight: 700;
					  }
					  dd{
						  /*font-size: 1.4rem;*/
						  text-indent: -1em;
						  padding-left: 1em;
					  }
					}
			  }
		  }		  
	  }
	  
	  
	  &::before {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: url("../img/bg_event.webp") center center no-repeat;
		  background-size: cover;
		  mix-blend-mode: overlay;
		  opacity: .3;
		  z-index: 1;
		  transition:all 1s;
	  }	
  }
	
	
	
  ul {
    &.note {
      max-width: min(90%, 620px);
      margin: auto;
      font-family: "Noto Sans JP", sans-serif;
      li {
        font-size: 1.2rem;
        font-weight: 400;
        a {
          color: #daccb4;
          text-decoration: underline
        }
      }
    }
  }
}

@keyframes blur {
  0% {filter: blur(30px); opacity: 0;}
  100% {filter: blur(5px); opacity: .1;}
}
@keyframes border {
  0% {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@keyframes handwriting {
  0% {stroke-dashoffset: 4000px;}
  100% {stroke-dashoffset: 0;}
}

@keyframes fade-pllax {
  0% {opacity: 0;}
  10% {opacity: 1;}
  70% {opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes simple-fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/*
.bnr__lyt--plan{
	position: relative;
	width: 90%;
	margin: -10vw auto 0;
	display: flex;
	justify-content: center;
	column-gap: 3em;
	z-index: 5;
	
	li{
		max-width: min(380px,46%);
		
		figure{
			position: relative;
			transition: transform .6s ease-out;
			
			&::after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50%;
				opacity: .5;
				background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(255, 255, 255, 0) 80%);
				transition: opacity .4s ease-out;
				z-index: 1;
			}
			
			img{
				border-radius: 18px;
				width: 100%;
				height: 100%;
				aspect-ratio: 1.618 / 1.5;
				object-fit: cover;
				box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, .4);
			}
			figcaption{
				position: absolute;
				width: 100%;
				left: 0;
				bottom: .4em;
				font-size: 1.8rem;
				font-weight: 800;
				padding: 0 0 0 .6em;
				text-shadow: 2px 3px 6px rgba(0, 0, 0, .8);
				z-index: 10;
				
				&::before{
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					right: 1.65em;
					margin: auto;
					width: 9px;
					height: 9px;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform: rotate(135deg);
					transition: bottom .2s ease-out;
				}
			}
			
			
			&:hover{
				transform:translateY(-20px);
				
				&::after{
					opacity: 1;
				}
			figcaption{
				&::before{
					bottom: -.5em;
					}
				}
			}
		}
		
	}
	
	&:has(li:nth-child(n+3)){
		background-color: aqua
	}
}*/


/* ----------------------------------------------------
	image-animation
---------------------------------------------------- */
.image-animation {
	position: relative;
	overflow: hidden;
}

.image-animation picture {
	display: block;
}

.image-animation img {
	display: block;
	transform: scale(2);
	clip-path: inset(0 100% 0 0);
	transition: transform 4s ease, clip-path 1.6s ease;
}

.image-animation.is-reveal img {
	transform: scale(1);
	clip-path: inset(0 0 0 0);
}