@charset "UTF-8";

:root {
  --slope-height: 140px; /* 斜めの高さ */
  --anim-image: url('../img/anime_tamago_01.png'); /* 転がる画像（仮） */
}

/* ========================================
   common
   ======================================== */

body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

#main p {
  font-size: 16px;
  text-align: center;
}

/* ========================================
   mainVisual
   ======================================== */

.mainVisual {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

.mainVisual h1 {
  margin: 0;
}

.mainVisual h1 img {
  display: block;
  width: 100%;
}


/* ========================================
   menuArea
   ======================================== */

.menuArea {
  position: relative;
  background: url(../img/bg_pattern_01.png) no-repeat top center;
  padding-top: 160px;
  padding-bottom: 130px;
  background-size: contain;
}

.menuArea h2 {
  text-align: center;
  padding-bottom: 40px;
}

.menuInner {
  background: url(../img/bg_pattern_04.png) no-repeat bottom center;
  padding-bottom: 110px;
  background-size: contain;
}
.menuInner ul {
  overflow: hidden;
}
.menuInner ul img {
  max-width: 64%;
  margin: 0 auto;
  display: block;
}

.menuInner ul li {
  padding: 40px 0;
  position: relative;
  width: 100%;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--slope-height) * -1);
}

.menuInner ul li#dukesalmon {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope-height)), 0 100%);
  z-index: 4;
}

.menuInner ul li#onionsalmon {
  background: url(../img/bg_pattern_02.png);
  clip-path: polygon(0 var(--slope-height), 100% 0, 100% 100%, 0 calc(100% - var(--slope-height)));
  z-index: 3;
  padding: 100px 0;
}

.menuInner ul li#yukkesalmon {
  background: url(../img/bg_pattern_03.png);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slope-height)), 0 100%);
  z-index: 2;
  padding: 100px 0;
  background-size: cover;
}

.menuInner ul li#takeout {
  background: url(../img/bg_pattern_04.png);
  clip-path: polygon(0 var(--slope-height), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
  padding: 200px 0 80px;
}
.menuInner ul li#takeout .takeout_txt {
  content: "";
  position: absolute;
  top: 160px;
  left: 65%;
  transform: translateX(-50%);
  width: 480px;
  height: 174px;
}

.menuInner ul li#dukesalmon::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--anim-image) no-repeat center/contain;
  pointer-events: none;
  bottom: var(--slope-height);
  animation: roll-down-left 5s infinite linear;
}
.menuInner ul li#onionsalmon::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--anim-image) no-repeat center/contain;
  pointer-events: none;
  bottom: 0;
  animation: roll-down-right 5s infinite linear;
}

@keyframes roll-down-left {
  0% {
    right: -10%;
    bottom: calc(var(--slope-height) + 20px);
    transform: rotate(0deg);
  }
  25% { transform: translateY(-15px) rotate(-90deg); }
  50% { transform: translateY(0px) rotate(-180deg); }
  75% { transform: translateY(-15px) rotate(-270deg); }
  100% {
    right: 110%;
    bottom: -20px;
    transform: rotate(-360deg);
  }
}

@keyframes roll-down-right {
  0% {
    left: -10%;
    bottom: calc(var(--slope-height) + 20px);
    transform: rotate(0deg);
  }
  25% { transform: translateY(-15px) rotate(90deg); }
  50% { transform: translateY(0px) rotate(180deg); }
  75% { transform: translateY(-15px) rotate(270deg); }
  100% {
    left: 110%;
    bottom: -20px;
    transform: rotate(360deg);
  }
}

.linkBtn {
  display: block;
  width: 318px;
  margin: 20px auto 0;
  padding: 16px 0;
  border-radius: 60px;
  background-image: url(../img/bg_btn.png);
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.menuArea .linkBtn {
  margin-top: 0;
}


/* ========================================
   linksArea
   ======================================== */

.linksArea h2 {
  margin: 0 0 16px;
  font-size: 24px;
  text-align: center;
}

.linksArea .online {
  margin: 32px auto;
  max-width: 980px;
}

.linksArea .online ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.linksArea .online li {
  width: 24.5%;
}

.linksArea .online li img {
  border-radius: 5px;
}

.linksArea .variousLinks {
  margin-bottom: 40px;
}

.linksArea .mobileOrder {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.linksArea .shop {
  padding: 50px 0;
  background-color: #fff;
  text-align: center;
}

.linksArea .shop img {
  margin-top: 16px;
}


/* ========================================
   footer
   ======================================== */

#footer {
  padding-top: 40px;
}

/* ========================================
   p-gotop（ページトップへ）
   ======================================== */

.p-gotop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

.p-gotop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.p-gotop.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ========================================
   レスポンシブ
   ======================================== */

@media screen and (max-width: 700px) {
  :root {
    --slope-height: 90px;
  }

  .pc_view {
    display: none !important;
  }

  .menuArea {
    background: url(../img/bg_pattern_01_sp.png) no-repeat top;
    padding-top: 60px;
    padding-bottom: 100px;
  }

  .menuArea h2 {
    padding-bottom: 20px;
  }

  .menuInner {
    padding-bottom: 100px;
  }
  .menuInner ul img {
    max-width: 266px;
  }
  .menuInner ul li {
    min-height: 690px;
  }

  .menuInner ul li#dukesalmon {
    padding: 0 0 60px;
    min-height: 600px;
  }
  .menuInner ul li#onionsalmon {
    padding: 30px 0 70px;
  }
  .menuInner ul li#yukkesalmon {
    background: url(../img/bg_pattern_03_sp.png);
    background-size: cover;
    padding: 0 0 20px;
    min-height: 600px;
  }
  .menuInner ul li#takeout {
    padding: 80px 0 0;
    min-height: 400px;
  }
  .menuInner ul li#takeout .takeout_txt {
    top: 90px;
    left: 70%;
    width: 153px;
    height: 56px;
  }

  .menuInner ul li#dukesalmon::after {
    width: 40px;
    height: 40px;
    background: var(--anim-image) no-repeat center/contain;
  }
  .menuInner ul li#onionsalmon::after {
    width: 40px;
    height: 40px;
    background: var(--anim-image) no-repeat center/contain;
  }

  .linksArea .online ul {
    margin: 32px 6px;
  }

  .linksArea .online li.w100 {
    margin: 0 6px 6px;
    width: 100%;
    text-align: center;
  }

  .linksArea .online li.w100 img {
    width: 100%;
  }

  .linksArea .online li.w50 {
    width: 49%;
  }

  .linksArea .shop {
    padding: 50px 20px;
  }
}

@media screen and (min-width: 701px) {
  .sp_view {
    display: none !important;
  }
}