@layer base, components, utilities;

@layer base {
  html {
    scroll-behavior: smooth;
    @media (768px <= width) {
      font-size: min(calc(100vw / 118), 10px);
    }
    @media (width < 768px) {
      font-size: calc(100vw / 37.5);
    }
  }

  body {
    background: #35B7FF;
    font-family: var(--font-main);
    font-size: 1.6rem;
    color: #2d2d2d;
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: 
    antialiased;
    line-height: 1.6;
    letter-spacing: 0.08em;
    @media (width < 768px) {
      font-size: 1.4rem;
    }
  }
}

@layer utilities {
  @media (768px <= width) {
    .sp { display: none !important; }
  }
  @media (width < 768px) {
    .pc { display: none !important; }
  }
}

main{
  overflow-x: clip;
}

/* =================================
          header & footer
================================= */
@media (width > 768px) {
  body[data-nav-theme="blue-bg"] .global-nav ul a {
    color: #fff;
  }

  body[data-nav-theme="white-bg"] .global-nav ul a {
    color: #35B7FF;
  }
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  @media (width < 768px) {
    top: 8px;
    right: 8px;
  }
  @media (width > 768px) {
    width: 100%;
    padding: 4rem 3rem 0;
  }
}

.global-nav{
  width: 128rem;
  margin-inline: auto;
  @media (width < 768px) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #35B7FF;
    z-index: 90;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  }
  ul{
    display: flex;
    gap: 20px;
    margin-inline: auto;
    @media (width < 768px) {
      flex-direction: column;
      gap: 0;
    }
    a{
      font-family: "Poppins", sans-serif;
      font-size: 2rem;
      font-weight: bold;
      color: #fff;
      line-height: 1;
      transition: 0.3s;
      span{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 1.2rem;
      }
      &:hover{
        opacity: 0.7;
      }
    }
  }
}

.menu-toggle-container {
  position: relative;
  z-index: 101; 
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: #35B7FF;
  display: flex;
  align-items: center;
  justify-content: center;
  .menu-toggle {
    width: 24px;
    height: 16px;
    position: relative;
    span{
      position: absolute;
      width: 100%;
      height: 2px;
      background: #fff;
      left: 0;
      transition: all 0.3s ease;
      &:nth-child(1) { 
        top: 0; 
      }
      &:nth-child(2) { 
        top: 7px; 
      }
      &:nth-child(3) { 
        top: 14px; 
      }
    }
  }
}


.nav-open{
  .menu-toggle{
    span{
      &:nth-child(1){
        transform: translateY(7px) rotate(45deg);
      }
      &:nth-child(2){
        opacity: 0;
      }
      &:nth-child(3){
        transform: translateY(-7px) rotate(-45deg);
      }
    }
  }
  .global-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    ul{
      text-align: center;
      li{
        margin: 30px 0;
        a{
          font-family: Poppins, sans-serif;
          font-size: 2rem;
          font-weight: bold;
          color: rgb(255, 255, 255);
          line-height: 1;
          transition: 0.5s;
        }
      }
    }
  }
}

footer{
  background: #35B7FF;
  overflow: hidden;
  .footer-inner{
    width: 128rem;
    max-width: 95%;
    margin-inline: auto;
    padding: 8rem 0 9rem;
    font-size: 1.4rem;
    color: #35B7FF;
    position: relative;
    z-index: 2;
    @media (width < 768px) {
      width: 90%;
      padding: 4rem 0 3rem;
    }
    .page-top{
      position: absolute;
      right: 0;
      @media (width < 768px) {
        top: 8%;
        img{
          width: 5rem;
          height: auto;
        }
      }
    }
    .footer-logo{
      @media (width < 768px) {
        width: 7rem;
      }
    }
    dl{
      display: grid;
      grid-template-columns: 100px 1fr;
      margin-top: 3rem;
      dt,dd{
        margin-top: 8px;
      }
      dt{
        font-family: "Poppins", sans-serif;
        font-weight: 700;
      }
    }
    .footer-info{
      display: flex;
      justify-content: space-between;
      margin-top: 4.8rem;
      padding-top: 2.4rem;
      border-top: 1px solid #35B7FF;
      @media (width < 768px) {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 3.4rem;
        padding-top: 2rem;
      }
      ul{
        display: flex;
        gap: 4.8rem;
        @media (width < 768px) {
          flex-direction: column;
          gap: 1rem;
          margin-bottom: 4rem;
          font-size: 1.2rem;
        }
        a{
          transition: .3s;
          &:hover{
            opacity: 0.7;
          }
        }
      }
      .copyright{
        @media (width < 768px) {
          font-size: 1.2rem;
        }
      }
    }
  }
}

/* =================================
          commpon style
================================= */
.corner-flame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid #fff;
  pointer-events: none;
  z-index: 999;
}

.btn-order{
  display: flex;
  gap: 6px;
  padding: 1.2rem 3rem;
  border: 1px solid #fff;
  border-radius: 100vmax;
  background: #35B7FF;
  color: #fff;
  position: fixed;
  top: 4rem;
  right: 5%;
  z-index: 999;
  transition: .3s;
  @media (width < 768px) {
    padding: 1rem 2rem;
    top: auto;
    bottom: 2rem;
    right: 2rem;
    z-index: 5;
  }
  p{
    font-size: 1.3rem;
    line-height: 1.2;
    @media (width < 768px) {
      font-size: 1.2rem;
    }
    span{
      font-size: 2rem;
      font-family: "Poppins", sans-serif;
      font-weight: bold;
      @media (width < 768px) {
        font-size: 1.8rem;
      }
    }
  }
  img{
    @media (width < 768px) {
      width: 3rem;
      height: auto;
    }
  }
  &:hover{
    opacity: 0.7;
  }
}

.btn{
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.2rem 2.4rem;
  background: #35B7FF;
  font-family: "Poppins", sans-serif;
  color: #fff;
  border-radius: 100vmax;
  font-size: 1.6rem;
  font-weight: bold;
  transition: .3s;
  &:hover{
    opacity: 0.7;
  }

  @media (width < 768px) {
    margin-inline: auto;
    font-size: 1.4rem;
  }
}

.disabled{
  opacity: 0.2;
  pointer-events: none;
}

.section-title{
  font-family: "Poppins", sans-serif;
  font-size: 9rem;
  font-weight: 700;
  color: #35B7FF;
  text-align: center;
  line-height: 0.6;
  @media (width < 768px) {
    font-size: 4rem;
    line-height: 0.7;
  }
  span{
    font-size: 2rem;
    @media (width < 768px) {
      font-size: 1.4rem;
    }
  }
}

/*------ order now -----*/
.card-container{
  padding: 8rem 9rem 12rem;
  background: #fff;
  color: #2d2d2d;
  border-radius: 90px;
  line-height: 1.8;
  position: relative;
  z-index: 2;
  @media (width < 768px) {
    border-radius: 40px;
    padding: 2rem 2rem 3rem;
  }
  .border{
    width: 100%;
    height: 12px; 
    margin: 6.4rem 0;
    background-image: radial-gradient(circle, #3498db 40%, transparent 45%);
    background-size: 24px 12px; 
    background-repeat: repeat-x;
      @media (width < 768px) {
        margin: 4rem 0;
        background-size: 20px 12px; 
      }
  }
  .card-title{
      margin-bottom: 6rem;
      color: #35B7FF;
      @media (width < 768px) {
        margin-bottom: 2rem;
      }
      h3{
        font-family: "Poppins", sans-serif;
        font-size: 8rem;
        font-weight: bold;
        @media (width < 768px) {
          font-size: 4rem;
        }
      }
      p{
        font-size: 2rem;
        @media (width < 768px) {
          font-size: 1.6rem;
        }
      }
  }
  .card-content{
    + .card-content{
      margin-top: 15rem;
      @media (width < 768px) {
        margin-top: 8rem;
      }
    }
  }
  .card-flex{
    display: grid;
    grid-template-columns: 2fr minmax(0, 1fr);
    place-content: space-between;
    place-items: flex-start;
    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .card-detail{
      p + p{
        margin-top: 2rem;
        @media (width < 768px) {
          margin-top: 1.4rem;
        }
      }
    }
      h4{
        margin-bottom: 3rem;
        font-size: 2.6rem;
        font-weight: bold;
        @media (width < 768px) {
          font-size: 2rem;
        }

    }
    .reserve-date{
      display: grid;
      grid-template-columns: 120px 1fr;
      place-content: center;
      align-items: center;
      gap: 8px;
      margin: 2rem 0;
      font-size: 1.4rem;
      font-weight: bold;
      color: #35B7FF;
      @media (width < 768px) {
        grid-template-columns: 100px 1fr;
        font-size: 1.2rem;
      }
      dt{
        width: 100%;
        padding-top: 1px;
        border: 1px solid #35B7FF;
        border-radius: 3px;
        text-align: center;
      }

    }
  }
}

.section-curve, .section-curve02, .section-curve03, .section-curve04, .section-curve05{
  padding-top: 18%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  @media (width < 768px) {
    padding-top: 24%;
  }
  .curve{
    width: calc(100vw * 2);
    max-width: none;
    animation: curveAnim 330s linear infinite;
    z-index: 1;
    position: absolute;
    top: 0;
    left: -50%;
    @media (width < 768px) {
      width: calc(100vw * 3);
      left: -100%;
    }
  }
}

.section-curve{
  margin-top: 90vh;
}

.section-curve02{
  background: #fff;
}

.section-curve03{
  background: #35B7FF;
}

.section-curve04{
  background: #fFF;
}

@keyframes curveAnim {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

  .attention-list{
    margin-top: 1.8rem;
    li{
      font-size: 1.4rem;
      font-weight: bold;
      color: #ff4d00;
      @media (width < 768px) {
        font-size: 1.2rem;
      }
    }
  }




/* =================================
             contents
================================= */

.mv{
  display:grid;
  place-items: center;
  place-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  &::after{
    content:"";
    width: 100%;
    height: 100%;
    background:url('../img/bg-main-pc.jpg') no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    @media (width < 768px) {
      background:url('../img/bg-main-sp.jpg') no-repeat center center/cover;
    }
  }
  img{
    width: 80%;
    position:relative;
    z-index: 1;
    @media (width < 768px) {
      width: 90%;
    }
  }
}

.special-cake{
  position: relative;
  overflow: visible;
  .content-inner{
    width: 120rem;
    margin-inline: auto;
    padding-bottom: 20rem;
    position: relative;
    z-index: 1;
    @media (width < 768px) {
      width: 100%;
      padding: 3rem 0 8rem;
      background: #fff;
    }
  }
  .content-flex{
    display: grid;
    grid-template-columns: 60rem auto;
    place-content: center;
    place-items: center;
    gap: 10rem;
    margin-top: 6.4rem;
    @media (width < 768px) {
      grid-template-columns: 1fr;
      place-items: center;
      gap: 3rem;
      margin-top: 4rem;
      text-align: center;
    }
    + .content-flex{
      margin-top: 15rem;
      @media (width < 768px) {
        margin-top: 8rem;
      }
    }
    .content-image{
      position: relative;
      .image{
        border: 6px solid #35B7FF;
        border-radius: 90px;
        overflow: hidden;
        @media (width < 768px) {
          width: 80%;
          margin-inline: auto;
        }
        .special-cake-img{
          width: 100%;
          height: auto;
          object-fit: cover;
          @media (width < 768px) {
            border-radius: 40px;
          }
        }
        &.coming-soon{
          display: grid;
          place-content: center;
          place-items: center;
          width: 60rem;
          height: 50rem;
          background: #f0faff;
          font-family: "Poppins", sans-serif;
          font-size: 3.6rem;
          font-weight: bold;
          color: #35B7FF;
          @media (width < 768px) {
            width: 30rem;
            height: 257px;
            padding: 4rem 0;
            font-size: 2.4rem;
          }
        }
      }
      .logo-hb{
        position: absolute;
        bottom: -60px;
        left: -65px;
        animation: curveAnim 45s linear infinite;
        @media (width < 768px) {
          width: 8rem;
          bottom: -20px;
          left: 20px;
        }
        &.coming-soon{
          bottom: -60px;
          left: -65px;
          @media (width < 768px) {
            left: -2rem;
            bottom: -20px;
          }
        }
      }
    }
    .content-text{
      .player{
        width: max-content;
        margin-bottom: 1rem;
        padding: 0 2rem;
        font-size: 3.2rem;
        font-weight: bold;
        color: #35B7FF;
        position: relative;
        @media (width < 768px) {
          font-size: 2.4rem;
          margin: 0 auto 0.5rem;
        }
        &:after, &:before{
          content: "";
          width: 3px;
          height: 70%;
          background: #35B7FF;
          position: absolute;
          bottom: 7px;
        }
        &::before{
          transform: rotate(-20deg);
          left: 0;
        }
        &:after{
          transform: rotate(20deg);
          right: 0;
        }
      }
      .cake{
        margin-bottom: 1rem;
        font-size: 4rem;
        font-weight: bold;
        @media (width < 768px) {
          font-size: 2.4rem;
          line-height: 1.6;
        }
      }
      .price{
        font-family: "Poppins", sans-serif;
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1.4;
        @media (width < 768px) {
          font-size: 2rem;
        }
        span{
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
      .btn{
        width: max-content;
        margin-top: 3.2rem;
        @media (width < 768px) {
          margin-top: 2rem;
        }
      }
    }
  }
}

.our-feature{
  position: relative;
  isolation: isolate;
  z-index: 2;
  &::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #35B7FF;
    clip-path: inset(50% 0 0 0);
    pointer-events: none;
    @media (width < 768px) {
      clip-path: inset(30% 0 0 0);
    }
  }
  .content-inner{
    width: 136rem;
    max-width: 95%;
    margin-inline: auto;
    padding: 0 0 20rem;
    position: relative;
    z-index: 3;
    @media (width < 768px) {
      width: 90%;
      padding: 3rem 0 8rem;
    }
  }
  .section-title{
    margin-bottom: 8rem;
    color: #fff;
    position: relative;
    z-index: 2;
    @media (width < 768px) {
      margin-bottom: 0;
    }
  }
  .point-container{
    max-width: 120rem;
    margin: 13rem auto;
    padding: 6rem;
    border: 8px solid #fff;
    border-radius: 60px;
    background: url('../img/bg-confetti.png') no-repeat center center/cover;
    position: relative;
    @media (width < 768px) {
      width: 100%;
      margin: 8rem 0 5rem;
      padding: 5rem 2rem 2rem;
      border: 6px solid #fff;
      border-radius: 40px;
    }
    .point-title{
      width: max-content;
      padding: 1.8rem 4rem;
      background: #fff;
      border-radius: 8px;
      text-align: center;
      position: absolute;
      top: -12%;
      left: 50%;
      transform: translateX(-50%);
        @media (width < 768px) {
          padding: 1rem 2rem;
        }
      h3{
        font-size: 3rem;
        font-weight: bold;
        color: #35B7FF;
        @media (width < 768px) {
          font-size: 1.4rem;
        }
      }
    }
    ul{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4.8rem;
      padding: 6rem;
      @media (width < 768px) {
        gap: 1rem;
        padding: 0;
      }
    }
    p{
      font-size: 2rem;
      text-align: center;
      color: #fff;
      line-height: 1.8;
      @media (width < 768px) {
        margin-top: 2rem;
        font-size: 1.4rem;
        text-align: left;
      }
    }
  }
}

.calendar{
  text-align: center;
  position: relative;
  z-index: 2;
  &::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    clip-path: inset(50% 0 0 0);
    pointer-events: none;
    @media (width < 768px) {
      clip-path: inset(30% 0 0 0);
    }
  }
  .content-inner{
    width: 127rem;
    max-width: 95%;
    margin-inline: auto;
    padding: 0 0 20rem;
    position: relative;
    z-index: 3;
    @media (width < 768px) {
      width: 90%;
      padding: 3rem 0 8rem;
    }
  }
  .section-title{
    margin-bottom: 6.4rem;
    @media (width < 768px) {
      margin-bottom: 4rem;
    }
  }
  .text-calender{
    font-size: 1.6rem;
    line-height: 2.4;
    @media (width < 768px) {
      font-size: 1.4rem;
      line-height: 2;
    }
  }
  .calender-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    margin-top: 6.4rem;
      @media (width < 768px) {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        margin-top: 4rem;
      }
    li{
      display: flex;
      flex-direction: column;
      padding: 2rem 2rem 3rem;
      background: #fff;
      border: 1px solid #2d2d2d;
      border-radius: 40px;
      @media (width < 768px) {
        padding: 0.5rem 2rem 2rem;
      }
      &.shadow-red{
        box-shadow: 6px 6px 0 0 #F00;
      }
      &.shadow-dark-red{
        box-shadow: 6px 6px 0 0 #C00000;
      }
      &.shadow-orange{
        box-shadow: 6px 6px 0 0 #FE7F21;
      }
      &.shadow-yellow{
        box-shadow: 6px 6px 0 0 #FFc600;
      }
      &.shadow-yellow-green{
        box-shadow: 6px 6px 0 0 #65DF30;
      }
      &.shadow-green{
        box-shadow: 6px 6px 0 0 #008955;
      }
      &.shadow-light-blue{
        box-shadow: 6px 6px 0 0 #00cbff;
      }
      &.shadow-blue{
        box-shadow: 6px 6px 0 0 #0064db;
      }
      &.shadow-navy{
        box-shadow: 6px 6px 0 0 #003867;
      }
      &.shadow-purple{
        box-shadow: 6px 6px 0 0 #60c;
      }
      &.shadow-pink{
        box-shadow: 6px 6px 0 0 #f83a9a;
      }
      &.shadow-black{
        box-shadow: 6px 6px 0 0 #171615;
      }
      &.shadow-white{
        box-shadow: 6px 6px 0 0 #e5e4e2;
      }
      .calender-row01{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .month{
          font-size: 1.8rem;
          font-weight: bold;
          @media (width < 768px) {
            font-size: 1.4rem;
          }
          span{
            font-family: "Poppins", sans-serif;
            font-size: 4.8rem;
            @media (width < 768px) {
              font-size: 3.4rem;
            }
          }
        }
        .status{
          padding: 3px 10px 4px;
          border-radius: 100vmax;
          font-size: 1.4rem;
          text-align: center;
          @media (width < 768px) {
            font-size: 1.2rem;
          }
          &.status-reservation{
            background: #ff6422;
            color: #fff;
          }
          &.status-pre{
            background: #35B7FF;
            color: #fff;
          }
          &.status-end{
            background: #e9e9e9;
            color: #2d2d2d;
          }
        }
      }
      .calender-row02{
        text-align: left;
        @media (width < 768px) {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .name{
          font-size: 2.4rem;
          font-weight: bold;
          @media (width < 768px) {
            font-size: 2rem;
          }
        }
        .birthday{
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 5px;
          p{
            padding-top: 3px;
            font-size: 1.2rem;
          }
        }
      }
      .detail{
        margin-top: 2rem;
        display: grid;
        grid-template-columns: 10rem 1fr;
        align-items: center;
        gap: 6px;
        font-size: 1.2rem;
        @media (width < 768px) {
          grid-template-columns: 11rem 1fr;
          gap: 5px 10px;
          margin-top: 0;
        }
        dt{
          border: 1px solid #2d2d2d;
          border-radius: 3px;
          text-align: center;
        }
        dd{
          text-align: left;
        }
      }
    }
  }
}

.access{
  position: relative;
  z-index: 2;
  .content-inner{
    width: 136rem;
    max-width: 95%;
    margin-inline: auto;
    padding-bottom: 20rem;
    color: #fff;
    position: relative;
    z-index: 3;
    @media (width < 768px) {
      width: 90%;
      padding: 3rem 0 8rem;
    }
    .section-title{
      color: #fff;
    }
    .content-flex{
      display: flex;
      justify-content: center;
      gap: 10rem;
      margin-top: 6.4rem;
      @media (width < 768px) {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-top: 4rem;
      }
        .content-img{
          width: 60rem;
          border: 6px solid #fff;
          border-radius: 90px;
          overflow: hidden;
          @media (width < 768px) {
            width: 95%;
            border-radius: 40px;
          }
          img{
            width: 100%;
            height: auto;
          }
        }
      .content-text{
        width: 37rem;
        @media (width < 768px) {
          width: 95%;
        }
        .logo{
          width: 10rem;
          height: auto;
          @media (width < 768px) {
            width: 7rem;
          }
        }
        .name{
          margin-top: 2.4rem;
          @media (width < 768px) {
            margin-top: 1rem;
          }
          span{
            margin-right: 1rem;
            font-family: "Poppins", sans-serif;
            font-weight: bold;
          }
        }
        dl{
          display: grid;
          grid-template-columns: 100px 1fr;
          margin-top: 4.8rem;
          @media (width < 768px) {
            margin-top: 2.4rem;
          }
          dt,dd{
            margin-top: 1rem;
            line-height: 1.8;

            a{
              text-decoration: underline;
            }
          }
          dt{
            font-family: "Poppins", sans-serif;
            font-weight: 700;
          }
          dd{
            span{
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}

.chocolate-list{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 4rem; 
  @media (width < 768px) {
    margin: 0 0 3rem; 
  }
  li{
    border: 1px solid #35B7FF;
    padding: 4px;
    border-radius: 8px;
    p{
      margin-top: 6px;
      font-weight: bold;
      color: #35B7FF;
      text-align: center;
    }
  }
}