@charset "UTF-8";

main {
  margin-bottom: 5em;
  /* ----------------------------------------------------
	KV
---------------------------------------------------- */
  .box__lyt--kv {
	  position: relative;
	  width: 100%;
	  height: 88vh;
	  background-color: #2c2e2f;
	  
	  @media screen and (min-width:768px) {
		  height: 100vh;
	  }
    .lyt--tit {
		position: relative;
		width: 64.32291%;
		height: 100%;
		padding: 0 20vw 0 0;	
		writing-mode: vertical-rl;
		text-orientation: upright;
		
	  @media screen and (min-width:768px) {
		padding: 20vw 0 0;	
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	  }
	  
		
      .lyt-inner {
		  position: relative;
		  max-width: min(700px,80%);
		  height: 86%;
		  z-index: 5;
		  color: #f6d76b;
		  text-align: right;
		  
		  @media screen and (min-width:768px) {
			  height: 100%;
		  }
	  
		  h1 {
			  font-family: 'Zen Old Mincho', serif;
			  font-size: clamp(2rem, 2.6vw, 2.6rem);
			  font-weight: 400;
			  text-align: left;
			  padding-top: 2em;
			  animation: blur 1s ease-out .6s forwards;
			  opacity: 0;
			  
			  @media screen and (min-width:768px) {
				  padding-top: 0;
				  text-align: center;
				  animation: blur 1s ease-out .4s forwards;
			  }
		  }
		  
        .lyt--tit-line {
			position: relative;
			padding: 0 1em 1em 0;
			font-family: 'Zen Old Mincho', serif;
			font-size: clamp(2rem, 2.6vw, 2.6rem);
			font-weight: 400;
			
			@media screen and (min-width:768px) {
				margin-top: .8em;
				padding: .6em 0 .6em 3em;
				text-align: center;
			}
			
			
			.lyt--eve-tit {
				font-size: clamp(3.6rem, 5vw, 5rem);
				background: linear-gradient(10deg, #f2c575 20%, #f6d76b 30%, #fff6d7 45%, #f6d76b 60%, #d18a0d 100%);
				color: transparent;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				text-fill-color: transparent;
				background-size: 200%;
				line-height: 1.5;
				animation: blur 1s ease-out 1s forwards, gold 4s ease-out 2.2s forwards;
				opacity: 0;
			}
			.lyt--eve-subtit{
				position: relative;
				max-width: min(400px,90%);
				margin: auto;
				
				background: linear-gradient(10deg, #f2c575 20%, #f6d76b 30%, #fff6d7 45%, #f6d76b 60%, #d18a0d 100%);
				color: transparent;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				text-fill-color: transparent;
				background-size: 200%;
				
				animation: blur 1s ease-out 1.4s forwards, gold 2s ease-out 2.2s forwards;
				opacity: 0;
				
				&::before,&::after{
					content: "";
					position: absolute;
					top: .1em;
					bottom: 0;
					margin: auto;
					width: calc( 50% - 6.6em );
					height: 1px;
					
				}
			&::before{left: 0;background-color: #ebd075;}
			&::after{right: 0;background-color: #edc453;}
			}
			
			&::before{
				content: "";
				position: absolute;
				top: 0;
				right: .5em;
				width: 1px;
				height: 100%;
				background-image: linear-gradient(180deg, rgba(240, 215, 165, 1), rgba(207, 142, 46, 1));
				transform-origin: top;
				animation: border-sp 1s linear forwards;
				opacity: 0;
				
				@media screen and (min-width:768px) {
					right: auto;
					left: 0;
					width: 100%;
					height: 1px;
					transform-origin: left;
					background-image: linear-gradient(90deg, rgba(240, 215, 165, 1), rgba(207, 142, 46, 1));
					animation: border-pc 1s linear forwards;
				}
			}
		  }
		}
		
		&::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("../img/mv_akasaka.webp") 72% 35% no-repeat;
			filter: grayscale(100%);
			mix-blend-mode: hard-light;
			opacity: .08;
			z-index: 1;
		}
    }
    .lyt--mv {
		position: absolute;
		top: 0;
		right: 0;
		width: 59.32291%;
		height: 100%;
		clip-path: polygon(37.677% 0, 100% 0, 100% 100%, 0 100%);
		z-index: 6;
		overflow: hidden;
		background-color: #2c2e2f;
		img{
			width: 108%;
			height: 108%;
			object-fit: cover;
			object-position: 47% 90%;
			transform: scale(1.08)
		}
    }
    &::after {
		content: "";
		position: absolute;
		top: 1em;
		right: 1.6em;
		background: url("../img/logo_dm.svg") center center no-repeat;
		max-width: min(20%,120px);
		width: 100%;
		aspect-ratio: 2 / 1;
		z-index: 10;
	}
  }

  .box__lyt--introduction{
	  padding: 10vw 0;
	  overflow: hidden;
	  
	  .lyt--inner{
		  max-width: min(90%, 768px);
		  margin: auto;
		  position: relative;
		  
		  @media screen and (min-width:768px) {
		  }
		  
		  .lyt--ph{
		  position: absolute;
			  
			  
		  @media screen and (max-width:767px) {display: none;}
		  
		  img{object-fit: cover;}
		  
		  &.dinner01{
			  top: 0;
			  right: min(48.7rem, 56.438vw);
			  width: min(50.2rem, 56.438vw);
			  aspect-ratio: 2 / 3;
			  @media screen and (max-width:820px) {aspect-ratio: 2 / 3.5;}
			  img{
				  width: 100%;
				  height: 100%;
				  
				  object-position: 0;
			  }
		  }
	  }
		  
		  .lyt-lead{
			  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
			  line-height: 2;
			  letter-spacing: .08em;
			  
			  
			  .lyt--ph{
				  position: relative;
				  display: block;
				  margin: 2em 0 0;
				  
				  @media screen and (min-width:768px) {display: none;}
				  
				  
				  &.dinner01{
					  top: auto;
					  right: auto;
					  left: auto;
					  margin: 2em auto;
					  width: min(44.2rem, 62.438vw);
					  aspect-ratio: 1 / 1.1;
				  }
			  }
			  p{ + p{ margin-top: .9em;}}
			  
			  @media screen and (min-width:768px) {
				  max-width: min(80%, 400px);
				  margin: auto 0 auto auto;
				  line-height: 2.6;
				  letter-spacing: .1em;
				  .dinner01{ display: none; }
				  p{width: 100%;margin: 0; + p{ margin-top: .9em;}}
			  }
		  }
	  }
	  
	  
	}
	
  .box__lyt--event{
	  padding: 10vw 0;
	  margin-bottom: 10vw;
	  background-color: #343434;
	  
	  .box__lyt--chef{
		  position: relative;
		  max-width: min(1100px,88%);
		  margin: auto;
		  @media screen and (min-width:768px) {padding-bottom: min(26.2rem, 80.438vw);}		  
		  @media screen and (min-width:1100px) {padding-bottom: 0vw;}
		  
		  .lyt--chef{
			  position: relative;
			  width: 100%;
			  line-height: 0;
			  background-color: #3f4143;
			  z-index: 1;
			  img{
				  width: 120%;
				  height: 120%;
				  object-fit: cover;
				  aspect-ratio: 1 / .8;
				  object-position: 80% center;
			  }
			  @media screen and (min-width:768px) {
				  max-width: min(460px,80%);
				  img{
					  width: 110%;
					  height: 110%;
					  aspect-ratio: 1 / 1.218;
					  object-position: 75% center;
				  }
			  }
		  }
		  .lyt--profile{
			  position: relative;
			  width: 100%;
			  padding: 1.8em .6em;
			  background-color: #343434;
			  z-index: 3;
			  
			  &::before{
				  content: "";
				  position: absolute;
				  top: -13vw;
				  left: -5%;
				  width: 110%;
				  height: 15vw;
				  background-color: #343434;
				  clip-path: polygon(0 0, 100% 92%, 100% 100%, 0% 100%);
			  }
			  
			  @media screen and (min-width:768px) {
				  position: absolute;
				  bottom: 0;
				  right: 0;
				  max-width: min(620px, 90%);
				  padding: 2em;
				  &::before{
					  display: none;
				  }
			  }
			  
			  @media screen and (min-width:1100px) { bottom: -1.8vw;}
			  
			  .lyt-post{
				  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
				  letter-spacing:.05em;
				  font-weight: 700;
				  color: #b8a25d;
				  @media screen and (min-width:768px) {letter-spacing:.08em;}		
			  }
			  .lyt-name{
				  font-size: clamp(2.4rem, 2.8vw, 2.8rem);
				  font-weight: 900;
				  color: #b8a25d;
			  }
			  dl{
				  margin-top: 1.2em;
				  dt{ font-size: clamp(1.4rem, 2vw, 1.6rem); font-weight: 700;}
				  dd{
					  font-size: clamp(1.4rem, 2vw, 1.6rem);
					  text-indent: -4.7em;
					  margin-left: 4.7em;
				  }
			  }
		  }
	  }
	  .box__lyt--chef-message{
		  width: 100%;
		  overflow: hidden;
		  padding: 6vw 0;
		  
		  .lyt--h2,.lyt--h3{
			  font-family: "Tangerine", cursive;	
			  color: #b8a25d;		  
			  .sub--min{
				  font-family: 'Zen Old Mincho', serif;
			  }
		  }
		  
		  
		  .lyt--h2{
			  position: relative;
			  font-size: clamp(5.2rem,7.2vw, 7.2rem);
			  font-weight: 700;
			  text-align: center;
			  clip-path: inset(0 0 100% 0);
			  transition: clip-path 2s ease;
			  
			  &::before,&::after {
				  content: "";
				  position: absolute;
				  top: .78em;				  
				  width: calc(50% - 3em);
				  height: 1px;
				  background: #b8a25d;
				  z-index: 1;
				  transform: scaleX(0);
				  transition: transform 1.6s ease-out;
			  }
			  &::before{left: 0;transform-origin: left;}
			  &::after{right: 0;transform-origin: right;}
			  
			  
			  &.is-reveal {
				  clip-path: inset(0 0 0 0);
				  &::before,&::after {
					  transform: scaleX(1);
				  }
			  }
		  }
		  
		  .lyt--inner{
			  max-width: min(1100px,100%);
			  margin: auto;
			  padding: 6vw 0;
			  
			  .lyt-book,.lyt-soup{
				  position: relative;	
				  
				  .lyt-doc{
					  margin: 2em auto;
					  font-size: clamp(1.4rem, 2vw, 1.6rem);
					  line-height: 2;
					  letter-spacing: .1em;
					  
					  @media screen and (min-width:768px) and (max-width:1100px) { max-width: min(460px,86%); }
					  @media screen and (min-width:768px) { margin: auto auto; }
					  
					  .lyt--h3{
						  font-size: clamp(4.8rem,6.8vw, 6.8rem);
						  line-height: .8;
						  font-weight: 700;
						  padding: 0;
						  margin: 0;
					  }
					  
				  }
				  
				  figure{
					  grid-area: ph;
					  aspect-ratio: 1.618 / 1;
					  background-color: #3f4143;
					  
					  @media screen and (min-width:768px) and (max-width:1100px) { aspect-ratio: 1 / 1.618; }
					  @media screen and (min-width:1101px) {aspect-ratio: 1 / 1.1;}
					  
					  img{
						  width: 108%;
						  height: 108%;
						  object-fit: cover;
					  }
					  
				  }
			  }
			  
			  .lyt-book{
				  display: flex;
				  .lyt-doc{ width: 90%;padding: 0 0 6vw; }
			  }
			  
			  .lyt-soup{
				  @media screen and (min-width:768px) {display: grid;}
				  grid-template-columns: 1fr  1.04fr;
				  grid-template-areas: "doc ph";
				  
				  .lyt-doc{
					  grid-area: doc;
					  max-width: min(460px,80%);
					  padding: 4vw 0 3vw;
					  display: flex;
					  flex-direction: column;
					  
					  .lyt--h3{						  
						  .sub--min{
							  display: block;
							  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
							  line-height: 2;
						  }
					  }
					  .lyt-sine{
						  position: relative;
						  margin: 0 2em 0 auto;
						  &::after {
							  content: "";
							  position: absolute;
							  top: .8em;						  
							  left: 0;
							  width: 120px;
							  aspect-ratio: 1 / .7;
							  background: url("../img/sign.svg") 72% 35% no-repeat;
							  z-index: 5;
							  @media screen and (min-width:768px) {
								  top: 0;
								  left: 1.8em;
							  }
							  @media screen and (min-width:768px) and (max-width:1100px) {	
								  left: -.4em;
							  }		  
						  }
					  }
					  
				  }
				  
				  figure{
					  
					  aspect-ratio: 1 / .8;
					  @media screen and (min-width:768px) and (max-width:1100px) {aspect-ratio: 1 / 1.918;}		 
					  @media screen and (min-width:1101px) {aspect-ratio: 1 / 1.1;}
					  
					  img{
						  object-position: 68% 74%;
						  @media screen and (min-width:768px) { object-position: 68% 88%;}
					  }
					  
				  }
				  
			  }
				  
			  }
			  
			  		  
		  }
	  
	  .lyt--interlude{z-index: 1;}
	  
	  .box__lyt--info{
		  position: relative;
		  padding: 120px 0 0;
		  margin-top: -120px;
		  z-index: 3;
		  
		  
		  &::before{
			  content: "";
			  position: absolute;
			  top: 5px;
			  right: 0;
			  width: 110%;
			  height: 120px;
			  z-index: -1;
			  background-color: #343434;
			  clip-path: polygon(0% 90%, 100% 30%, 100% 100%, 0% 100%);
			  @media screen and (min-width:768px) {
				  top: 2px;
				  clip-path: polygon(7.5% 100%, 100% 0, 100% 100%, 0% 100%);
			  }
		  }
		  
		  .lyt--lead,.lyt--info{
			  max-width: min(1100px,88%);
			  margin: auto;
			  .lyt--h2,.lyt--h3{				  
				  font-size: clamp(5rem,7.2vw, 7.2rem);
				  font-family: "Tangerine", cursive;
				  color: #b8a25d;
				  font-weight: 700;	
				  line-height: 1;
				  @media screen and (min-width:768px) {
					  line-height: 1.4;
				  }
			  }
		  }
		  .lyt--lead{
			  padding: 3.6vw 0;
			  background-color: rgba(235,29,32, .5)
			  .lyt--h2{	  
			  }
			  .lyt--doc{
				  font-size: clamp(1.4rem, 2vw, 1.6rem);
				  line-height: 2;
				  letter-spacing: .1em;
			  }
		  }
		  .lyt--info{
			  padding: 4em 2em;
			  background-color: #2a292b;
			  outline: 1px solid #b8a25d;
			  outline-offset: -1em;
			  .lyt--h3{
				  text-align: center;
			  }
			  .lyt--guide{
				  max-width: min(680px,100%);
				  margin: 2em auto 0;
				  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
				  dt,dd{
					  letter-spacing:.05em;
					  &:nth-child(odd){ letter-spacing:.2em;}
					  &:nth-child(odd):nth-child(-n+10){letter-spacing:.75em;}
					  }
				  
				  dt{
					  font-weight: 700;
					  margin-top: 1em;
					  padding: 0 1em;
				  }
				  dd{
					  padding: 0 1em;
					  ul{&.note{margin: 0;}}
					  + dt{ border-top: 1px solid rgba(255,255,255,.2); padding-top: 1em;}
				  }
			  }
			  .lyt--app{
				  max-width: min(680px,100%);
				  margin: 1.6em auto 1em;
				  border: 1px solid #b8a25d;
				  dt,dd{
					  padding: .6em 1em;
				  }
				  
				  dt{
					  text-align: center;
					  font-weight: 700;
					  background-color: #b8a25d;
				  }
				  dd{
					  text-align: center;
				  }
			  }
			  
			  
			  @media screen and (min-width:768px) {
				  padding: 5em;
				  outline-offset: -2em;
				  
				  .lyt--guide{
					  display: grid;
					  grid-template-columns: 1.5fr 6fr;
					  gap: 1em .5em;
					  dt,dd{
					  letter-spacing:.05em;
					  &:nth-child(odd){ letter-spacing:.2em; }
					  &:nth-child(odd):nth-child(-n+10){letter-spacing:.75em;}
					  }
					  dt{
					  margin-top: 0;
					  padding: 0;
				  }
					  dd{
					  padding: 0;
					  + dt{ border-top: none; padding-top: 0;}
				  }
				  }
				  .lyt--app{
				  display: grid;
				  grid-template-columns: 1.2fr 4fr;
				  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
				  border: 1px solid #b8a25d;
					  
				  dd{
					  text-align: left;
				  }
			  }
			  }
		  }
		  
		  
		  .lyt--reservation{
			  max-width: min(680px,100%);
			  margin: 2em auto 0;
			  
			  
			  aside{
				  grid-area: guide;
				  text-align: center;
				  
				  .lyt--hdg{
					  font-size: clamp(1.6rem, 2.2vw, 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;
					  
					  img{transform: scale(1);}
				  }
				  .lyt-contact{
					  font-size: 1.4rem;
					  max-width: min(450px,100%);
					  margin:1em auto 0;
					  text-align: left;
					  dt{ 
						  text-align: center;
						  font-weight: 700;
						  letter-spacing:.02em;
					  }
					  dd{
						  text-indent: -1em;
						  padding-left: 1em;
					  }
					}
			  }
		  }		 
		  
	  }
	}
		
	
  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
        }
      }
    }
  }
}

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

.image-animation picture {
	display: block;
}

.image-animation{
	
	img {
		display: block;
		transform: scale(1.4);
		transition: transform 4s ease, clip-path 1.6s ease;
	}
	
	&.bottom{img{clip-path: inset(0 0 100% 0);}}
	&.right{img{clip-path: inset(0 100% 0 0);}}
	&.left{img{clip-path: inset(0 0 0 100%);}}
	&.mv{img{clip-path: inset( 0 0 100% 100%);}}
}

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

/* ----------------------------------------------------
	animation
---------------------------------------------------- */

@keyframes border-sp {
  0% {transform: scaleY(0);opacity: 1;}
  100% {transform: scaleY(1);opacity: 1;}
}
@keyframes border-pc {
	0% {transform: scaleX(0);opacity: 1;}
	100% {transform: scaleX(1);opacity: 1;}
}

				
@keyframes blur {
  0% {filter: blur(30px); opacity: 0;}
  100% {filter: blur(0px); opacity: 1;}
}
@keyframes gold { 
    0%{ background-position: 0% 0%; }
    50%{background-position: 100% 0%;}
    100%{background-position: 50% 0%;}
}




				
@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;}
}