/*
Theme Name: DailyChild
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* home */

.home {
  .top-menu {
    .section-bg {
      top: 12%;
      @media (width >= 850px) {
        top: 0%;
      }
    }
  }
  /* menu1,2 menucard */
  .tdmenu1,
  .tdmenu2 {
    .signaturelabelbox {
      top: 50px;
    }
    @media (width >= 850px) {
      .banner-layers {
        display: flex;
        max-width: 1200px;
        flex-direction: row-reverse;
        aspect-ratio: 100 / 33;
        height: auto;
        overflow: hidden;
        .banner-link {
          display: contents;
        }
        .m-textbox {
          left: unset !important;
          transform: unset !important;
          width: 50% !important;
          position: unset !important;
          .text-box-content {
            height: 100%;
          }
          .texlabelwhitebox {
            flex-direction: column;
            p,
            h4 {
              margin-bottom: 15%;
            }
            h5 {
              margin-left: 0px;
            }
          }
        }
        .signatureimagebox1 {
          left: unset !important;
          transform: unset !important;
          position: unset !important;
          width: 50% !important;
        }
        .signaturelabelbox {
          position: absolute !important;
          top: 30px;
          left: 25px;
        }
      }
    }
  }
  .menu3 {
    justify-content: space-between;
    max-width: 1200px !important;
    @media (max-width: 340px;) .small-6 {
      padding: 0px;
      max-width: 30%;
      @media (width <= 850px) {
        max-width: 43%;
      }
    }
    .box-text-bottom {
      background-color: white;
      .box-text {
        @media (width >= 850px) {
          height: 105px;
        }
        .box-text-inner {
          padding-right: 0px;
          .m-2-textbox {
            @media (width >= 850px) {
              display: grid;
              grid-template-columns: auto 1fr;
              column-gap: 18px;
              align-items: start;

              h4 {
                grid-column: 1;
                margin: 0;
                font-size: 20px;
                line-height: 1.2;
                white-space: nowrap;
                margin-bottom: 15%;
              }

              .jm {
                grid-column: 1;
                margin: 4px 0 0;
                font-size: 11px;
                line-height: 1.4;
                white-space: nowrap;
              }

              p:not(.jm) {
                grid-column: 2;
                grid-row: 1 / span 2;
                margin: 0;
                font-size: 12px;
                line-height: 1.7;
              }
            }
            h4 {
              text-align: left;
              margin-top: 0px !important;
              color: #382b20;
              padding-top: 0px !important;
              font-size: 18px;
            }
            .jm {
              color: #382b20;
            }
            p {
              text-align: left;
              color: #9e958a;
            }
          }
        }
      }
    }
  }
  .ourbrand {
    .container {
      max-width: 1100px !important;
      .ob-text1 {
        font-size: clamp(15px, 2.222vw, 32px) !important;
      }
    }
    .banner-bg {
      img {
        height: 110%;
      }
      @media (width >= 850px) {
        img {
          height: 100%;
          object-position: 45% 83% !important;
        }
      }
    }
  }
  .shopcontainer {
    .banner-inner {
      .banner-bg {
        background-color: #ebd7c2 !important;
        @media (width >= 850px) {
          img {
            padding: 10%;
            height: auto;
            aspect-ratio: 577/400;
          }
        }
      }
    }
  }
}

.footer {
  @media (width >= 850px) {
    padding: 32px;
    .row {
      max-width: 100%;
      .social-icons {
        width: 100%;
        text-align: left;
      }
    }
  }
}
header {
  .header-wrapper {
    .header-inner {
      .header-nav {
        @media (width >= 850px) {
          li {
            margin-right: 100px;
            &.nav-icon {
              margin-right: 0;
            }
            a {
              color: white;
              font-family: "Noto Serif JP", serif !important;
            }
          }
        }
      }
    }
  }
}

.menu {
  section {
    padding: 0 24px;
    &.signature {
      padding-top: 0px !important;
    }
  }
  .is-divider.divider.clearfix {
    margin-bottom: 40px !important;
  }
  .menu-cards {
    max-width: 900px !important;
  }
  .drinkmenu {
    height: auto;
    .col-inner {
      position: relative;
      .box {
        @media (width >= 850px) {
          display: flex;
          max-width: 900px;
        }
        background-color: white;
        .box-text {
          position: unset !important;
          .m-cat {
            position: absolute;
            top: 25px;
            left: 25px;
            background-color: #c8a345;
            color: white;
            padding: 4px 12px;
          }
          .m-p-textbox {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 18px;
            align-items: start;
            h4 {
              grid-column: 1;
              margin: 0;
              font-size: 20px;
              line-height: 1.2;
              white-space: nowrap;
              margin-bottom: 15%;
              br {
                display: block;
              }
            }
            .jm {
              grid-column: 1;
              margin: 4px 0 0;
              font-size: 11px;
              line-height: 1.4;
              white-space: nowrap;
            }
            p:not(.jm) {
              grid-column: 2;
              grid-row: 1 / span 2;
              margin: 0;
              font-size: 12px;
              line-height: 1.7;
            }
            br {
              display: none;
            }
            @media (width >= 850px) {
              h4 {
                br {
                  display: block;
                }
              }
            }
            h4 {
              text-align: left;
              margin-top: 0px !important;
              color: #382b20;
              padding-top: 0px !important;
              font-size: 18px;
            }
            .jm {
              color: #382b20;
            }
            p {
              text-align: left;
              color: #9e958a;
            }
          }
        }
      }
    }
  }
}