*{
  margin:0;
  padding:0;
  border:none;
  list-style:none;
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  padding:5em 5em 2em;
  font-family:Arial, sans-serif;
  color:#363636;
  @media (max-width:600px){
    padding:0 0 2rem;
  }
}

.intro{
  display:grid;
  column-gap:2em;
  row-gap:0;
  grid-template-columns:40% auto;
  margin-bottom:5em;
  &>img{
    width:100%;
    height:100%;
    object-fit:cover;
    grid-row:1/3;
  }
  h1{
    img{
      height:100px;
      @media (max-width:600px){
        height:auto;
        width:90%;
      }
    }
  }
  p{
    color:#666;
    border-top-style:dotted;
    border-top-width:1px;
    border-top-color:#1e432699;
    /* border-top-color:#ffde00; */
    padding-top:1em;
    margin-top:1em;
    text-align:justify;
  }
  @media (max-width:600px){
    display:block;
    margin-bottom:3em;
    h1{
      text-align:center;
      margin:0.5rem;
    }
    p{
      margin:0 2rem;
    }
  }
}

.nav{
  display:flex;
  overflow-x:scroll;
  gap:1em;
  position:fixed;
  top:1em;
  right:1em;
  z-index:9999;
  a img{height:1.5em}
  a span{
    display: inline;
    transition: font-size 0.3s ease;
  }
  &.scrolling a{
    padding:0.5em 0.5em 0.5em 0.5em;
    gap:0;
  }
  &.scrolling a span{
    pointer-events: none;
    font-size:0;
  }
  &.scrolling a img{height:2em}
  li{
    a{
      color:white;
      display:flex;
      gap:0.25em;
      align-items:center;
      text-wrap:nowrap;
      padding:0.5em 1.25em 0.5em 0.8em;
      background:#1e4326;
      border-radius:2em;
      text-decoration:none;
      &:visited{
        color:white;
      }
    }
  }
  @media (max-width:600px){
    position:sticky;
    padding:0 1rem;
  }
}
.price{
  &::after{
    content:"円";
    font-size:0.8em;
    margin-left:0.25em;
  }
}
.time{
  display:flex;
  align-items:center;
  &::before{
    content:"期間限定";
    margin-right:0.5em;
    font-size:0.7em;
    letter-spacing:0.15em;
    background-color:gold;
    padding:0.2em 0.5em;
  }
}
.noprice{
  font-size:.8em}
span.price{
  &::before{
    content:"ー";
    margin:0 0.5em 0 2em;
  }
}
small{
  font-size:0.8em;
  text-wrap:nowrap;
  &::before{
    content:"（";
  }
  &::after{
    content:"）";
  }
}


section{
  &:not(:first-of-type){
    margin-top:5em;
  }
  h2{
    color:#1e4326;
    display:flex;
    align-items:center;
    gap:0.2em;
    margin-bottom:0.5em;
    img{
      height:1.75em;
    }
  }
  &>div{
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:1.5em;
  }
  section>div{
    flex-wrap:nowrap;
    ul{
      li{
        text-wrap:nowrap;
      }
    }
  }
  ul{
    width:fit-content;
    li{
      display:flex;
      span{
        margin-left:auto;
      }
    }
  }
  @media (max-width:600px){
    padding:0 2rem;
    &:not(:first-child){
      margin-top:3em;
    }
    &>div{
      display:block;
    }
    ul{
      margin-bottom:3rem;
      li{
        display:block;
        clear:right;
        span{
          display:block;
          float:right;
        }
      }
    }
  }
}

article{
  width:calc((100% - 3em)/3);
  background:#efefef;
  padding:1em;
  display:grid;
  column-gap:1em;
  grid-template-columns:1fr;
  grid-template-rows:auto auto 1fr;
  &.hasList{
    margin-bottom:1.5em;
  }
  h3{
    grid-row-start:2;
    font-size:inherit;
    font-weight:normal;
    line-height:1.2;
  }
  .images{
    grid-row-start:1;
    height:17vw;
    margin-bottom:1em;
    position:relative;
    z-index:0;
    img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    &:not(.dummy)::after{
      content:"";
      display:block;
      --size:35px;
      width:var(--size);
      height:var(--size);
      background-image:url(../img/icon_zoom.svg);
      background-size:contain;
      background-repeat:no-repeat;
      position:absolute;
      --offset:3px;
      left:var(--offset);
      top:var(--offset);
    }
    &:hover:not(.dummy)::after{
      background-image:url(../img/icon_zoom_on.svg);
      opacity:0.8;
    }
    &:hover:not(.dummy) img{
      translate:0 -1px;
      box-shadow:0 0 10px rgba(0,0,0,0.2);
      transition:all 0.25s ease;
    }
  }
  p{
    border-top:1px dotted #ccc;
    --pad:0.25em;
    padding-top:var(--pad);
    margin-top:var(--pad);
  }
  @media (max-width:600px){
    width:100%;
    &+article{
      margin-top:1.5em;
    }
    .images{
      height:50vw;
    }
  }
}
.note{
  margin-top:1em;
  li{
    display:flex;
    &::before{
      content:"＊";
    }
  }
  @media (max-width:600px){
    li{
      display:block;
    }
  }
}

.no1,
.honten,
.pickup,
.volume{
  .images{
    position:relative;
    &::before{
      position:absolute;
      z-index:1;
      top:0;
      right:0;
      rotate:12deg;
      translate:25% -25%;
      content:"";
      display:block;
      padding:0.15em 0.75em;
      color:#fff;
      font-size:0.75em;
    }
  }
}
.no1{
  .images::before{
    content:"１番人気";
    background-color:crimson;
  }
}
.honten{
  .images::before{
    content:"本店名物";
    background-color:#1e4326;
  }
}
.pickup{
  .images::before{
    content:"オススメ";
    background-color:deeppink;
  }
}
.volume{
  .images::before{
    content:"ボリューム";
    background-color:darkorange;
  }
}

/* アニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* モーダル全体 */
.modal-fade {
  animation: fadeIn 0.75s ease-out forwards;
}