.top{
  padding-bottom: 80px;
  @media(min-width:768px){
    padding-bottom: 120px;
  }
}
.top__fv{
  @media(min-width:960px){
    display: grid;
    grid-template-columns:  calc(100%* 304 / 1440) 1fr;
    gap:  calc(100%* 40 / 1440);
    padding-left: 24px;
    max-width: 1440px;
    margin-inline: auto;
  }
.top__fv-mv-image{
  aspect-ratio: 2 / 3;
  @media(min-width:666px){
    aspect-ratio: 2 / 2.4;
  }
  @media(min-width:960px){
    aspect-ratio: 108 / 65;
  }
}
.top__fv-mv-image img{
  object-position: 37% center;
  @media(min-width:960px){
    object-position: center;
  }
}

}
.top__fv-info{
  display: none;
  @media(min-width:960px){
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
  }
  @media(min-width:1440px){
    gap: 30px;
    margin-top: 80px;
  }
}
.top__fv-logo{
  width:  calc(100%* 200 / 304);
  aspect-ratio: 200 / 298;
  margin-inline: auto;
}
.top__fv-info-list-container{
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--heading-font);
  @media(min-width:1440px){
    font-size: 20px;
    gap: 16px;
  }
}
.top__fv-info-list{
  @media(min-width:1200px){
    dt{
      width: 120px;
    }
  }
  @media(min-width:1440px){
    dt{
      width: 170px;
    }
  }
}
.top__fv-instagram{
  width: 28px;
  aspect-ratio: 1;
  margin-inline: auto;
  @media(min-width:1200px){
    width: 40px;
  }
}
.top__fv-mv{
  position: relative;
}
.top__fv-mv-text{
  font-family: var(--decole-font);
  color: var(--white);
  text-shadow: 4px 4px 4px #000;
  position: absolute;
  left: 24px;
  font-size: 44px;
  line-height: 1.4;
  top: 47%;
  opacity: 0;
  @media(min-width:666px){
    font-size: 74px;
    top: 40%;
  }
  @media(min-width:960px){
    font-size: 40px;
    line-height: 1.2;
    top: 60%;
  }
  @media(min-width:1200px){
    font-size: 56px;
    left: 32px;
  }
  @media(min-width:1440px){
    font-size: 64px;

  }
}
.top__fv-mv-menu{
  display: flex;
  flex-wrap: wrap;
  font-family: var(--heading-font);
  justify-content: center;
  gap: 0.7em 2em;
  margin-top: 12px;
  padding-inline: var(--pi);
  @media(min-width:960px){
    padding-inline: 0 24px;
    justify-content: space-between;
  }
  @media(min-width:1200px){
    font-size: 20px;
    margin-top: 24px;
  }
}

.top__news{
  padding-inline: var(--pi);
  padding-block: 28px 40px;
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  @media(min-width:666px){
    padding-block: 46px 64px;
    margin-top: 80px;
  }
  &::before{
    content: "";
    background-color: var(--main);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
}
.top__news-pc-contents{
  display: contents;
  @media(min-width:666px){
    display: flex;
    align-items: end;
    justify-content: space-between;
    max-width: 960px;
    margin-inline: auto;
  }
}
.top__news-ttl{
  @media(min-width:768px){
    font-size: 64px;
    text-shadow: 10px 12px 0 rgba(51, 51, 51, 0.15);
  }
}
.top__news-post-container{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  @media(min-width:666px){
    margin-top: 56px;
    gap: 48px;
    max-width: 960px;
    margin-inline: auto;
  }
}
.top__news-post a{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
  padding-left: 0.5em;
  border-bottom: 1px dashed;
  @media(min-width:666px){
    flex-direction: row;
    gap:  calc(100%* 40 / 960);
    padding-bottom: 12px;
    align-items: center;
  }
}
.top__news-post-time{
  font-size: 12px;
  @media(min-width:666px){
    font-size: 16px;
  }
}
.top__news-post-ttl{
  font-size: 18px;
  font-family: var(--heading-font);
  line-height: 1.2;
  @media(min-width:666px){
    font-size: 20px;
  }
}
.top__news-btn{
  margin-top: 40px;
}
.top__news-post-decole.u-upp{
  font-family: var(--decole-font);
  font-size: 72px;
  color: var(--white);
  opacity: 0.25;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 80px;
  right: -0.5em;
  z-index: -1;
  @media(min-width:666px){
    font-size: 120px;
    top: unset;
    bottom: -0.3em;
    right: 0;
  }
  @media(min-width:1200px){
    font-size: 240px;
  }
}

.top__menu{
  margin-top: 56px;
  overflow: hidden;
  position: relative;
  @media(min-width:768px){
    margin-top: 48px;
  }
}
.top__menu-heading{
  position: relative;
  @media(min-width:768px){
    translate: 260% 16px;
  }
  @media(min-width:960px){
    translate: 400% 16px;
  }
  @media(min-width:1200px){
    translate: 287% 24px;
  }
}
.top__menu-ttl-ja{
  @media(min-width:768px){
    position: absolute;
    top: 1em;
    right: 0;
  }
}
.top__menu-container{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  @media(min-width:666px){
    grid-template-columns: repeat(3,1fr);
  }
  @media(min-width:768px){
    margin-top: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
    .top__menu-list a:hover{
      scale: 1.05;
    }
}

.top__menu-card{
  background: var(--white);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.75);
  border: 1px solid var(--acc);
  @media(min-width:666px){
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.top__menu-caption{
  width: 100%;
  padding: 12px;
  line-height: 1.2;
  @media(min-width:666px){
    flex-grow: 1;
  }
}
.top__menu-btn{
  margin-inline: auto;
  margin-top: 28px;
  @media(min-width:666px){
    margin-top: 80px;
  }
}

.top__menu-decole-container{
  display: flex;
  position: absolute;
  top: 56px;
  left: 0;
  z-index: -1;
  animation: flow 150s infinite;
  @media(min-width:666px){
    top: unset;
    bottom: 10%;
    font-size: 64px;
    animation: flow 200s infinite;
  }
  @media(min-width:1200px){
    font-size: 80px;
  }
}
.top__menu-decole{
  font-size: 64px;
  font-family: var(--decole-font);
  color: var(--white);
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.30);
  opacity: 0.7;
  white-space: nowrap;
}

@keyframes flow{
  from{
    translate: 0 0;
  }to{
    translate: -100%;
  }
}


.top-reserve{
  margin-top: 80px;
  @media(min-width:960px){
    margin-top: 176px;
  }
}

.top__about{
  margin-top: 40px;
  padding-top: 34px;
  position: relative;
  @media(min-width:768px){
    margin-top: 120px;
    max-width: 1440px;
    margin-inline: auto;
    padding-top: 56px;
  }
}
.top__about-heading{
  align-items: center;
  flex-direction: row-reverse;
  position: absolute;
  top: 0;
  right: 12px;
  @media(min-width:960px){
    flex-direction: column;
    align-items: flex-end;
    right: 47%;
  }
  @media(min-width:1200px){
    right: 35%;
  }
}
.top__about-container{
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media(min-width:960px){
    flex-direction: row;
    align-items: flex-end;
    gap:  calc(100%* 40 / 1440);
  }
}
.top__about-image{
  width: 90%;
  aspect-ratio: 1;
  max-height: 462px;
  @media(min-width:960px){
    width:  calc(100%* 720 / 1440);
  }
}
.top__about-image img{
  max-height: 462px;
}
.top__about-text-container{
  padding-inline: var(--pi);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  @media(min-width:960px){
    padding-inline: 0 24px;
    max-width: 598px;
    flex: 1;
    gap: 28px;
  }
  @media(min-width:1440px){
    padding-inline: 0;
  }
}
.top__about-message{
  font-family: var(--heading-font);
  line-height: 1.2;
  font-size: 20px;
  color: var(--acc);
  @media(min-width:768px){
    font-size: 24px;
  }
  @media(min-width:1440px){
    font-size: 28px;
  }
}
.top__about-text{
  line-height: 1.5;
}
.top__about-btn{
  margin-left: auto;
}
.top__about-decole{
  font-family: var(--decole-font);
  font-size: 64px;
  color: rgba(51, 37, 12, 0.40);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  opacity: 0.25;
  position: absolute;
  top: -56px;
  left: 0;
  z-index: -1;
  @media(min-width:960px){
    font-size: 90px;
    rotate: 90deg;
    left: unset;
    top: 250%;
    right: 0;
    translate: 40%;
  }
  @media(min-width:1440px){
    font-size: 160px;
  }
}


.top__scene{
  margin-top: 40px;
  padding-top: 34px;
  position: relative;
  @media(min-width:768px){
    margin-top: 120px;
    max-width: 1440px;
    margin-inline: auto;
    padding-top: 56px;
  }
}
.top__scene-heading{
  align-items: center;
  flex-direction: row-reverse;
  position: absolute;
  top: 0;
  right: 12px;
  @media(min-width:960px){
    flex-direction: column;
    align-items: flex-start;
    right: 41%;
  }
  @media(min-width:1200px){
    right: 45%;
  }
}
.top__scene-ttl-ja{
  font-size: 14px;
  @media(min-width:960px){
    font-size: 16px;
  }
}
.top__scene-container{
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media(min-width:960px){
    flex-direction: row-reverse;
    align-items: flex-end;
    gap:  calc(100%* 40 / 1440);
    margin-left: auto;
  }
}
.top__scene-image{
  width: 90%;
  aspect-ratio: 1;
  max-height: 462px;
  @media(min-width:960px){
    width:  calc(100%* 720 / 1440);
  }
}
.top__scene-image img{
  max-height: 462px;
}
.top__scene-text-container{
  padding-inline: var(--pi);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  @media(min-width:960px){
    padding-inline: 24px 0;
    max-width: 598px;
    flex: 1;
    gap: 28px;
  }
  @media(min-width:1440px){
    padding-inline: 0;
  }
}
.top__scene-message{
  font-family: var(--heading-font);
  line-height: 1.2;
  font-size: 20px;
  color: var(--acc);
  @media(min-width:768px){
    font-size: 24px;
  }
  @media(min-width:1440px){
    font-size: 28px;
  }
}
.top__scene-text{
  line-height: 1.5;
}
.top__scene-btn{
 margin-left: auto;
}
.top__scene-decole{
  font-family: var(--decole-font);
  font-size: 64px;
  color: rgba(51, 37, 12, 0.40);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  opacity: 0.25;
  position: absolute;
  top: -56px;
  left: 0;
  z-index: -1;
  @media(min-width:960px){
    font-size: 90px;
    rotate: -90deg;
    left: unset;
    top: 350%;
    left: 0;
    translate: -40%;
  }
  @media(min-width:1440px){
    font-size: 160px;
  }
}