/* ============================
   Colorful town -- LP Style
   ============================ */
:root {
   --bg: #ffffff;
   /* page background */
   --text: #222222;
   /* main text (not heavy black) */
}

/* Reset-ish */
*,
*::before,
*::after {
   box-sizing: border-box
}

html,
body {
   height: 100%
}

body {
   margin: 0;
   font-family: Noto Sans JP, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   background: var(--bg);
   color: var(--text);
   line-height: 1.65;
   background: url("../img/bg.webp") repeat;
   background-size: cover;
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   color: inherit;
   text-decoration: none
}

.container {
   max-width: 100%;
   margin: 0 auto;
   position: relative;
}


/* =====================
   section
   ===================== */
.newyearssale-section {
   max-width: 1000px;
   margin: 0 auto;
}

.present_ttl {
   margin: 5vw 2vw 2vw;
}

.present_tables {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 0 4%;
}

.present_tables .note {
   font-size: clamp(8px, calc(10 / 1280 * 100vw), 10px);
   line-height: 1.3;
   margin: 5px auto;
}

.present_tables .present_box:last-child {
   padding-top: 0.7vw;
}

.present_tables .present_box:last-child .note {
   margin: 14px auto;
}

/* =====================
   btn
   ===================== */
.reservation_button {
   text-align: center;
   margin: 9vw auto;
}

.reservation_btn img {
   max-width: 500px;
   margin: 0 auto;
   box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.5);
   transition: ease all 0.3s;
   transform: scale(0.98);
}

.reservation_btn img:hover {
   box-shadow: 15px 15px 30px 0 rgba(0, 0, 0, 0.5);
   transition: ease all 0.3s;
   transform: scale(1);
}

/* =====================
   footer
   ===================== */
.credittxt {
   margin: 4vw auto;
   text-align: center;
   font-size: clamp(12px, calc(15 / 1280 * 100vw), 15px);
}

/* =====================
   fade
   ===================== */
.fade-target {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 0.9s ease, transform 0.9s ease;
   will-change: opacity, transform;
}

.fade-target.fademake {
   opacity: 1;
   transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
   .fade-target {
      transition: none;
      transform: none;
   }
}

/* =====================
   Window size 1200
   ===================== */
@media (max-width: 1200px) {
   .newyearssale-section {
      max-width: 700px;
   }

}

/* =====================
   Window size 767
   ===================== */
@media (max-width: 767px) {

   /* sp > body */
   body {
      background: url("../img/bg_sp.webp") repeat;
      background-position: top center;
      background-size: cover;
   }

   /* sp > section */
   .newyearssale-section {
      max-width: 100%;
      padding: 10vw 0 0;
   }

   .present_ttl {
      max-width: 88%;
      margin: 2vw auto;
   }

   .present_tables {
      grid-template-columns: 1fr;
      grid-gap: 0;
      max-width: 77%;
      margin: 0 auto;
   }

   .present_box {
      margin: 0 auto 3vw;
   }

   .present_tables .note {
      font-size: clamp(7px, calc(10 / 768 * 100vw), 10px);
      line-height: 1.2;
   }

   .present_tables .present_box:first-child .note {
      margin: 0 auto;
   }

   .present_tables .present_box:last-child {
      padding: 0;
   }

   .present_tables .present_box:last-child .note {
      margin: 5px auto;
   }

   .reservation_button {
      margin: 3vw auto;
   }

   .reservation_btn img {
      box-shadow: 5px 5px 6px 0 rgba(0, 0, 0, 0.5);
      max-width: 300px;
   }

   .reservation_btn img:hover {
      box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
   }

   /* sp > footer */
   .credittxt {
      margin: 10vw auto;
      font-size: clamp(12px, calc(15 / 768 * 100vw), 15px);
   }




}