@charset "UTF-8";

html {
  font-size: 62.5%;
}

@media (min-width:767px) and (max-width:1440px) {
  html {
    font-size: calc(10 * (100vw / 1440));
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(10 * (100vw / 375));
  }
}


/* break-point */
/* lg:1400px? */
/* md:768px?1440px */
/* sm:?768px */

/* base style */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after{
  box-sizing: border-box;
}

:root {
  --main-color: #8e4b00;
  --sub-color: #738994;
  --sub2-color: #beb1a1;
  --mainBg-color: #f8f6ec;
  --exBg-color: #eae7d9;
  --nutritionistBg-color: #f3efcc;
  --substitutionBg-color: #fffef3;
  --necessary-Color: #e89338;
  --tableTh-color: #e7e3cf;
  --footerBg-color: #e7e3cf;
  --text-color: #4c443b;
  --button-color: #e89338;
  --subTitle-color: #2e576c;
  --border-color: #d4cfb5;
}



/* font size */
/* font-size: 1.2rem; = 12px */
/* font-size:0.9286rem; = 13px */
/* font-size: 1rem; = 14px*/
/* font-size: 1.5rem; = 15px*/
/* font-size: 1.6rem; = 16px*/
/* font-size: 1.8rem; = 18px */
/* font-size: 2rem; = 20px */
/* font-size: 2.4rem; = 24px */
/* font-size: 3.2rem; = 32px */


body {
  background-color: var(--exBg-color);
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: normal;
  font-weight: 500;
  font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}

#Contents {
  width: 100%;
  overflow-x: hidden;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--mainBg-color);
}

section {
  text-align: center;
}

p,
span {
  letter-spacing: 0.03em;
  color: var(--text-color);
}

h2 {
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.07em;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

h2::before,
h2::after {
  display: block;
  content: "";
  width: 80px;
  height: 3px;
  background: var(--main-color);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

h2::before {
  left: -112px;
}

h2::after {
  right: -112px;
}

@media screen and (max-width: 1280px) {
  h2::before {
    left: clamp(-112px, calc(-112px + 10.9375vw), -90px);
  }

  h2::after {
    right: clamp(-112px, calc(-112px + 10.9375vw), -90px);
  }
}

h3 {
  color: var(--main-color);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
}

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
  line-height: 1;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* class style */
.subColor {
  color: var(--sub-color);
}

.bold {
  font-weight: 700;
}

.wrapper {
  max-width: 1280px;
  padding: 6.667% 5.556%;
}

.contents {
  max-width: 800px;
}

.center {
  margin: 0 auto;
}

.flex {
  display: flex;
  align-items: center;
}

.grid {
  display: grid;
}

.spdb{
  display: none;
}

.spdn {}

.dn {
  display: none !important;
}

.navList li a {
  color: var(--main-color);
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}

a.toDetail{
  position: relative;
}

#header .navList li a::before,
#footer .navList li a::before,
a.toDetail::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--main-color);
  opacity: 0;
  position: absolute;
  bottom: -2px;
  left: 0;
  transition: all 0.2s ease-in-out;
}

#header .navList li a:hover::before,
a.toDetail:hover::after,
#footer .navList li a:hover::before {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  #Contents {
    max-width: 100%;
    margin: 0 auto;
    background-color: var(--mainBg-color);
  }

  .wrapper {
    padding: 64px 20px;
  }

  a::before {
    background-color: var(--sub-color);
  }

  h2 {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  h2::before,
  h2::after {
    width: 40px;
  }

  h2::before {
    left: -48px;
  }

  h2::after {
    left: calc(100% + 8px);
  }

  h3 {
    font-size: 2rem;
    margin-bottom: 16px;
  }
  
  #header .navList li a::before,
  #footer .navList li a::before,
  a.toDetail::after{
    display: none;
  }

  .spdb {display: block;}

  .spdn {
    display: none;
  }
}

/* header */

#header {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background-color: var(--mainBg-color);

  .headerInner {
    justify-content: space-between;
    align-items: normal;
    height: 100%;
    width: 100%;
    position: relative;

    a {
      overflow: inherit;
    }

    span#logo {
      display: inline-block;
      height: auto;
      width: clamp(128px, 17vw, 240px);
      /*position: absolute;*/
      /*top: 0;*/
      /*left: 0;*/
      /*z-index: 10;*/

      .logoImg {
        display: inline-block;
        width: 100%;
        max-height: 178.76px;
        max-width: 120px;
      }
    }
  }

  /* nav */

  nav.globalMenuPc {
    justify-content: end;
    height: clamp(40px, 6vw, 71px);
    gap: clamp(16px, 3vw, 30px);
    margin-top: 40px;
    margin-left: auto;

    .pageLink {
      height: 100%;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: clamp(22px, 3vw, 40px);
      background: #fff;
      padding: clamp(10.26px, 1.5117vw, 18px) clamp(22.79px, 3.3613vw, 40px);
      border-radius: 5px;

      a {
        white-space: nowrap;
      }
    }

    .pageLink2 {
      height: 100%;
      background: var(--sub-color);
      padding: 10px 80px 10px 40px;
      gap: clamp(22px, 3vw, 40px);
      border-radius: 5px 0 0 5px;

      li.myPage {
        max-width: 80px;
        height: 100%;

        a {
          img {
            max-height: 51px;
            height: 100%;
          }
        }
      }

      li.cart {
        max-width: 67px;
        height: 100%;

        img {
          max-height: 51px;
          height: 100%;
        }
      }

      li a {
        height: 100%;
        position: relative;
      }

      a::before {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        background: #fff;
        opacity: 0;
        position: absolute;
        bottom: -2px;
        transition: all 0.2s ease-in-out;
      }
    }
    li:hover a::before {
      opacity: 1;
    }
  }
}

#mask {
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transition: opacity 0.3s ease-out;
}

#header nav a {
  /*font-size: clamp(1.4rem, calc(0.2rem + 1.0714vw), 1.4rem);*/
  font-size: 1.4rem;
}


@media screen and (max-width: 1280px) {
  #header nav.globalMenuPc {
    width: 65%;
  }

  #header nav.globalMenuPc .navList.pageLink2 {
    padding: clamp(5.7px, 0.75vw, 10px)
      clamp(45.58px, calc(45.58px + 2.1875vw), 80px) clamp(5.7px, 0.75vw, 10px)
      clamp(22.79px, calc(22.79px + 0.546875vw), 40px);
  }
}

@media screen and (max-width: 767px) {
  #header {
    max-width: 100%;

    .headerInner {
      padding: 20px 0;
      span#logo {
        width: 151px;
      }
    }
    nav.globalMenuPc {
      height: 60px;
      margin-top: 0;

      .navList.pageLink2 {
        padding: 10px 24px;
        gap: 16px;

        .myPage a span {
          font-size: 2.36vw;
        }

        .hamButtonToggle {
          all: unset;
          display: inline-block;
          vertical-align: middle;
          width: 40px;
          height: 40px;
          cursor: pointer;
          position: relative;
          z-index: 20;

          .bars {
            display: block;
            width: 30px;
            height: 3.33px;
            background-color: #fff;
            border-radius: 3px;
            position: relative;
            left: 5px;
            transition: all 0.3s ease-out;
          }

          .bars::before,
          .bars::after {
            content: "";
            background-color: #fff;
            border-radius: 3px;
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 3.33px;
            transition: all 0.3s ease-out;
          }

          .bars::after {
            top: 10px;
          }
        }
      }
    }

    .globalMenuSp {
      width: 200px;
      padding: 96px 24px 40px;
      background: #fff;
      border-radius: 0 0 26.67px 0;
      position: fixed;
      top: 0;
      left: -300px;
      transition: all 0.3s ease-out;
      z-index: 100;
      opacity: 0;
      pointer-events: none;

      li {
        margin-bottom: 24px;

        a {
          font-weight: 500;
          line-height: 1;
          color: var(--sub-color);
        }
      }

      li:last-child {
        margin-bottom: 0;
      }
    }

    .headerInner.active {
      .bars {
        background-color: transparent !important;
        transition: all 0.3s ease-out;
      }

      .bars::before,
      .bars:after {
        background-color: #fff !important;
        top: 50% !important;
        transform: rotate(45deg);
        transition: 0.3s;
        opacity: 1;
      }

      .bars:after {
        transform: rotate(-45deg);
      }

      .globalMenuSp {
        left: 0;
        opacity: 1;
        pointer-events: auto;
      }

      #mask {
        display: block;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}

/* FV */
#fv {
  margin-top: 4.445%;
}

.topMessage {
  justify-content: space-between;
  max-width: 1200px;
  width: clamp(640px, 83.333vw, 1200px);
  margin-left: auto;
  padding-left: 2.778%;

  .messageBox {
    max-width: 448px;
    max-height: 410px;
    width: 37.4%;

    img:first-child {
      margin-bottom: 48px;
    }

    h1.mainTitle {
      padding-right: 8px;

      img.title {
        margin-bottom: 32px;
        padding-right: 80px;
      }

      .note {
        width: 100%;
        justify-content: space-between;
        max-width: 440px;
        gap: 22px;
        margin: 0 auto;

        img {
          max-width: calc(50% - 11px);
          object-fit: cover;
          margin: 0;
        }
      }
    }
  }

  .topImg {
    max-height: 380px;
    max-width: 640px;
    width: 54%;
    /* margin-bottom: 15px; */

    picture{
      display: block;
      width: 100%;
      height: 100%;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

@media screen and (max-width: 767px) {
  .topMessage {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 24px;

    .messageBox {
      max-width: 100%;
      width: 100%;
      max-height: none;
      padding: 32px 24px 0;

      & > img {
        margin-bottom: 10.55%;
        padding: 0 16px;
      }

      .mainTitle {
        padding: 0;

        picture img {
          margin-bottom: 7.31%;
          padding: 0 16px;
        }

        .note {
          max-width: none;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 0;

          img {
            max-width: calc(50% - 8px);
            margin-bottom: 16px;
          }
        }
      }
    }

    .topImg {
      height: 300px;
      max-width: 100%;
      width: 100%;
    }
  }
}

/* end FV */

/* #photographer */

#photographer {
  .card {
    height: 420px;
    justify-content: center;
    gap: clamp(40px, 5.8vw, 80px);
    margin-bottom: 96px;

    .imgBox {
      max-width: 360px;
      height: 100%;
      max-height: 420px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .profText {
      span {
        display: inline-block;
        margin-bottom: 26px;
        font-size: 2.4rem;
        line-height: 1.2;
      }

      .card .pgsns {
        font-size: 1.8rem;
      }
    }
  }

  .textBox {
    text-align: center;

    p {
      line-height: 2;
      margin-bottom: 2em;
      font-size: 2rem;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

@media screen and (max-width: 767px) {
  #photographer {
    .pgInner.wrapper {
      padding-bottom: 40px;
    }

    .card {
      flex-direction: column-reverse;
      height: auto;
      gap: 16px;
      margin-bottom: 64px;

      .imgBox {
        max-width: 100%;
        height: 420px;

        /*
        img {
          height: auto;
        }
        */
      }

      .profText {
        span {
          font-size: 1.6rem;
          margin-bottom: 16px;
        }
      }
    }

    .textBox p {
      font-size: 1.4rem;
    }
  }
}

/* end #photographer */

/* .sectionImg */

.sectionImg {
  height: clamp(240px, 46.875vw, 480px);
  width: 100%;
  background: url(../Contents/Feature/photographer2.png)
    no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .sectionImg {
    height: 240px;
  }
}

/* end sectionImg */

/* #commitment */

#commitment {
  .commitmentInner {
    text-align: center;

    .container {
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
      align-items: start;

      .card {
        max-width: 320px;
        padding-top: 12px;
        position: relative;

        .imgBox {
          height: 240px;
          margin-bottom: 16px;
          border-radius: 5px;
          overflow: hidden;
        }

        .textBox {
          text-align: left;

          h3 {
            font-size: 2rem;
            line-height: 1.4;
            color: var(--main-color);
            margin-bottom: 17px;
          }

          p {
            font-size: 1.5rem;
            line-height: 1.8;
            letter-spacing: 0.03em;
          }
        }
      }
      .card::before {
        display: block;
        content: "";
        width: 150px;
        height: 24px;
        background: no-repeat center / cover;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      .card:first-child::before {
        background-image: url(../Contents/Feature/label1.png);
      }
      .card:nth-child(2)::before {
        background-image: url(../Contents/Feature/label2.png);
      }
      .card:nth-child(3)::before {
        background-image: url(../Contents/Feature/label3.png);
      }
      .card:nth-child(4)::before {
        background-image: url(../Contents/Feature/label4.png);
      }
      .card:last-child::before {
        background-image: url(../Contents/Feature/label5.png);
      }

      .card:nth-child(4) p .supplement {
        display: block;
        font-size: 1.2rem;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #commitment {
    .commitmentInner .container {
      flex-direction: column;
      align-items: center;
      gap: 56px;

      .card {
        .imgBox {
          margin-bottom: 8px;
        }
        .textBox {
          h3 {
            margin-bottom: 8px;
          }

          p {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}

/* end  #commitment */

/* #menu */

#menu {
  background-color: #fff;

  .menuInner {
    text-align: center;

    .menuList {
      max-width: calc(320px * 3 + 40px * 2);
      /* grid-template-columns: repeat(3, 1fr); */
      flex-wrap: wrap;
      justify-content: center;
      align-items: start;
      gap: 40px;

      .card {
        width: 320px;
        padding: 24px 16px;
        transition: all 0.3s ease-out;

        img {
          width: 240px;
          height: auto;
          margin-bottom: 24px;
        }

        .textBox {
          text-align: left;
          margin-bottom: 32px;

          .cardTitle {
            margin-bottom: 20px;

            h3 {
              font-size: 3.2rem;
              margin-bottom: 20px;
              transition: color 0.3s ease-out;
            }

            p {
              font-size: 1.8rem;
              font-weight: 700;
              line-height: 1.8;
              letter-spacing: 0.03em;
              color: var(--main-color);
              transition: color 0.3s ease-out;
            }
          }
        }

        .textBox > p {
          padding: 20px 0;
          border-top: 1px solid var(--text-color);
          border-bottom: 1px solid var(--text-color);
        }

        .buttonArea {
          button {
            all: unset;
            display: block;
            background: var(--button-color);
            color: #fff;
            border-radius: 30px;
            border: 1px solid #fff;
            margin-bottom: 16px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            transition: background 0.3s ease-out;

            a {
              font-size: 1.5rem;
              padding: 10px 60px 10px 40px;
              color: inherit;
            }
          }

          button::before {
            display: block;
            content: "";
            width: 10px;
            height: 20px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: calc(60px - 15px);
            background: url(../Contents/Feature/weui_arrow-filled.svg)
              no-repeat center / cover;
          }

          button:hover {
            background: var(--main-color);
          }

          span {
            color: var(--main-color);
            text-decoration: underline;
            position: relative;
          }

          span::before {
            display: block;
            content: "";
            width: 10px;
            height: 20px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(100% + 5px);
            background: url(../Contents/Feature/weui_arrow-filled2.svg)
              no-repeat center / cover;
            opacity: 1;
          }

          span::after {
            bottom: 0;
          }
        }
      }

      .card:first-child {
        background: #faf4ed;
      }

      .card:nth-child(2) {
        background: #e5f2f5;
      }

      .card:last-child {
        background: #e5f0de;
      }

      /* hover */

      .card:hover {
        box-shadow: 0 0 10px #0000001a;
        cursor: pointer;
      }

      .card:hover .cardTitle.card1 h3,
      .card:hover .cardTitle.card1 p {
        color: #df9342;
      }

      .card:hover .cardTitle.card2 h3,
      .card:hover .cardTitle.card2 p {
        color: #479fb2;
      }

      .card:hover .cardTitle.card3 h3,
      .card:hover .cardTitle.card3 p {
        color: #568537;
      }
    }

    /* modal */

    .modal {
      visibility: hidden;
      pointer-events: none;
      max-width: 800px;
      width: 80%;
      max-height: 1000px;
      height: 90%;
      padding: 40px;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 0 10px #0000001a;
      overflow-y: scroll;
      scrollbar-width: none; /* Firefox用 */
      -ms-overflow-style: none; /* IE, Edge用 */
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 300%);
      z-index: 100;
      opacity: 0;
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;

      button.closeBtn {
        all: unset;
        display: block;
        width: 39px;
        height: 39px;
        background-image: url(../Contents/Feature/close.svg);
        cursor: pointer;
        margin-left: auto;
        position: sticky;
        top: 20px;
        right: 20px;
      }

      .modalInner {
        padding: 0 50px;

        div {
          margin-bottom: 40px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .modalHeader {
          text-align: center;

          h2 {
            font-size: 3.2rem;
            line-height: 1;
            margin-bottom: 16px;
          }

          span {
            display: block;
            font-size: 1.6rem;
            line-height: 1;
          }

          h2::before,
          h2::after {
            display: none;
          }
        }

        .ingredientsList {
          h3 {
            font-size: 2.4rem;
            margin-bottom: 16px;
          }

          p {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 1.8;
            letter-spacing: 0.02em;
            text-align: left;
            padding: 16px 0;
            border-top: 2px solid #a69683;
            border-bottom: 2px solid #a69683;
          }
        }

        .NutritionFacts {
          h3 {
            font-size: 2.4rem;
            margin-bottom: 16px;
          }

          table {
            width: 100%;
            border-collapse: collapse;

            tr:first-child th:first-child {
              background: #fff;
            }

            th,
            td {
              font-size: 1.6rem;
              /* line-height: 1.8; */
              padding: 12px 24px;
              text-align: center;
              border: 3px solid #fff;
            }

            th {
              background-color: #edebe2;
              font-weight: bold;
            }

            td {
              background-color: #f8f6ec;
              font-weight: bold;
            }
          }
        }

        .productCard {
          justify-content: space-between;
          align-items: center;
          gap: 40px;
          padding: 0 20.5px;

          .toCart {
            width: 339px;
            margin-bottom: 0;

            p {
              font-size: 1.8rem;
              font-weight: 700;
              line-height: 1;
              margin-bottom: 16px;

              span {
                font-size: 1.5rem;
                font-weight: 700;
              }
            }

            .color {
              color: var(--button-color);
            }

            .line {
              text-decoration: line-through;
            }

            .buttonArea {
              width: 100%;
              text-align: right;

              img {
                display: inline-block;
                width: auto;
                height: 52.11px;
              }

              a.btn {
                /* all: unset; */
                display: block;
                width: 100%;
                background: var(--button-color);
                color: #fff;
                font-size: 2rem;
                text-align: center;
                line-height: 1;
                padding: 10px 40px;
                border-radius: 30px;
                border: 1px solid #fff;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                transition: background 0.1s ease-out;

                /* a {
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  line-height: 1;
                  vertical-align: middle;

                } */

                /* a:visited {
                  color: #fff;
                } */
              }

              a.btn::before {
                display: block;
                content: "";
                width: 10px;
                height: 20px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 5%;
                background: url(../Contents/Feature/weui_arrow-filled.svg)
                  no-repeat center / cover;
                z-index: 2;
              }
            }

            .buttonArea:hover a.btn {
              background: var(--main-color);
            }

            .buttonArea:hover img {
              transform-origin: left bottom;
              transform: rotate(5.9deg);
              /* transition: transform 0.3s; */
            }
          }

          img.productPic {
            max-width: 200px;
            /* margin-right: 23.18px; */
          }
        }
      }
    }

    .modal::-webkit-scrollbar {
      display: none; /* Chrome, Safari? */
    }

    .modal.open {
      visibility: visible;
      pointer-events: auto;
      opacity: 1;
      background: #fff;
      transform: translate(-50%, -50%);
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }
    #modalMask {
      display: none;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.1);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: pointer;
      pointer-events: none;
    }
    #modalMask.open {
      display: block;
      pointer-events: auto;
    }
    
    .menuSelectContainer {
      max-width: 740px;
      margin: 40px auto;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 40px;

      .select-row {
        display: flex;
        justify-content: space-between;
        gap: 40px;
      }
      .select-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      label {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 4px;
        color: var(--subTitle-color);
        text-align: left;
      }
      select {
        height: 4rem;
        padding: var(--selectPadding);
        background: var(--selectBg);
        font-size: 1.6rem;
        line-height: 1.2;
        letter-spacing: 0.07em;
        border-radius: 4px;
        border: 1px solid #ccc;
      }
      .btnBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        .saleInfo {
          font-size: 2rem;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: 0.07em;
          position: relative;
          &::before {
            display: block;
            content: "\\";
            font-family: "Arial", "Helvetica", sans-serif;
            width: 24px;
            height: 24px;
            /* background: #333; */
            position: absolute;
            top: 0px;
            left: -1.5rem;
          }
          &::after {
            display: block;
            content: "/";
            font-family: "Arial", "Helvetica", sans-serif;
            width: 24px;
            height: 24px;
            /* background: #333; */
            position: absolute;
            top: 0px;
            right: -1.5rem;
          }
        }

        #subscribeBtn {
          max-width: 460px;
          padding: 27.5px 20% 27.5px 15%;
          margin: 0 auto;
          font-size: 3.2rem;
          line-height: 1;
          letter-spacing: 0.03em;
          background: var(--button-color);
          border: none;
          color: rgb(255, 255, 255);
          border-radius: 102px;
          cursor: pointer;
          position: relative;
          &:hover {
            opacity: 0.8;
          }
          &::before {
            display: block;
            content: "";
            width: 14px;
            height: 46px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 26%;
            background: url(../Contents/Feature/weui_arrow-filled.svg)
              no-repeat center / cover;
          }
        }
        .postageInfo {
          font-size: 1.6rem;
          line-height: 1.2;
          letter-spacing: 0.07em;
          margin-bottom: 40px;
        }
        #normalBtn {
          font-size: 1.8rem;
          font-weight: 700;
          background: none;
          border: none;
          text-decoration: underline;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

/*SPMENU*/
@media screen and (max-width: 767px) {
  #menu {
    .wrapper {
      padding: 64px 40px;

      .menuList {
        width: 100%;
        align-items: center;
        flex-direction: column;

        .card {
          padding-bottom: 40px;
          width: 100%;

          img {
            width: 100%;
            margin-bottom: 8px;
          }

          .textBox .cardTitle h3 {
            margin-bottom: 8px;
          }
        }
      }
      .menuSelectContainer {
        .select-row {
          flex-direction: column;
        }
        #subscribeBtn {
          font-size: 2.4rem !important;
          padding: 20px 20% 20px 15% !important;
          &::before {
            right: 12% !important;
          }
        }
      }
      /* modal */
      .modal {
        width: calc(100vw - 40px);
        max-width: 100%;
        padding: 24px 3.13vw;
        left: 0;

        .modalInner {
          padding: 24px 0;

          .modalHeader {
            h2 {
              font-size: 2.4rem !important;
            }
          }

          .ingredientsList p {
            font-size: 1.4rem;
            text-align: left;
          }

          .NutritionFacts {
            table {
              margin-bottom: 16px;

              th {
                width: 12.8%;
                padding: 12px 5.81%;
              }
            }
          }

          .productCard {
            flex-direction: column-reverse;
            align-items: center;
            padding: 0 5.59%;
            gap: 40px;

            .toCart {
              width: 100%;
              text-align: center;

              p {
                font-size: 1.6rem;
                margin-bottom: 16px;
              }

              img {
                width: 100%;
                height: auto;
                margin-left: 0;
              }

              .buttonArea {
                width: 100%;

                button a {
                  padding: 10px 40px;
                  font-size: 1.6rem;
                  color: inherit;
                }
              }
            }

            img.productPic {
              max-width: 100%;
            }
          }
        }
        button.closeBtn {
          top: 24px;
          right: 24px;
        }
      }
      .modal.open {
        transform: translate(20px, -50%);
      }
      #modalMask {
        width: 100vw;
      }
    }
    .menuSelectContainer {
      max-width: 740px;
      margin: 40px auto;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 40px;

      .select-row {
        display: flex;
        justify-content: space-between;
        gap: 40px;
      }
      .select-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      label {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 4px;
        color: var(--subTitle-color);
        text-align: left;
      }
      select {
        height: 4rem;
        padding: var(--selectPadding);
        background: var(--selectBg);
        font-size: 1.6rem;
        line-height: 1.2;
        letter-spacing: 0.07em;
        border-radius: 4px;
        border: 1px solid #ccc;
      }
      .btnBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        .saleInfo {
          font-size: 2rem;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: 0.07em;
          position: relative;
          &::before {
            display: block;
            content: "\\";
            font-family: "Arial", "Helvetica", sans-serif;
            width: 24px;
            height: 24px;
            /* background: #333; */
            position: absolute;
            top: 0px;
            left: -2.1rem;
          }
          &::after {
            display: block;
            content: "/";
            font-family: "Arial", "Helvetica", sans-serif;
            width: 24px;
            height: 24px;
            /* background: #333; */
            position: absolute;
            top: 0px;
            right: -2.1rem;
          }
        }

        #subscribeBtn {
          max-width: 460px;
          padding: 27.5px 20% 27.5px 15%;
          margin: 0 auto;
          font-size: 3.2rem;
          line-height: 1;
          letter-spacing: 0.03em;
          background: var(--button-color);
          border: none;
          color: rgb(255, 255, 255);
          border-radius: 102px;
          cursor: pointer;
          position: relative;
          &:hover {
            opacity: 0.8;
          }
          &::before {
            display: block;
            content: "";
            width: 14px;
            height: 46px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 26%;
            background: url(../Contents/Feature/weui_arrow-filled.svg)
              no-repeat center / cover;
          }
        }
        .postageInfo {
          font-size: 1.6rem;
          line-height: 1.2;
          letter-spacing: 0.07em;
          margin-bottom: 40px;
        }
        #normalBtn {
          font-size: 1.8rem;
          font-weight: 700;
          background: none;
          border: none;
          text-decoration: underline;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
/* end #menu */

/* #nutritionist */

#nutritionist {
  background-color: var(--nutritionistBg-color);

  .nutritionistInner {
    .profBox {
      gap: 40px;
      margin-bottom: 40px;

      .profText {
        gap: 21px;

        .nameBox {
          gap: 16px;
          margin-bottom: 21px;

          img {
            max-width: 114px;
            height: auto;
          }

          p.name {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            color: var(--main-color);
          }
        }

        .textBox {
          text-align: left;

          h3 {
            font-size: 1.8rem;
            line-height: 1;
            margin-bottom: 5px;
          }

          p {
            line-height: 1.8;
            letter-spacing: 0.03em;
          }
        }
      }

      .imgBox {
        max-width: 298px;
      }
    }

    .message {
      padding: 10px;
      border: 1px solid #e0ce88;
      border-radius: 10px;

      .messageText {
        padding: 40px 152px;
        border-radius: 5px;
        background: #fff;

        p {
          max-width: 476px;
          margin: 0 auto 2em;
          font-size: 1.5rem;
          font-weight: bold;
          line-height: 1.8;
          letter-spacing: 0.03em;
          color: var(--main-color);
        }

        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #nutritionist {
    .nutritionistInner {
      h2 {
        margin-bottom: 40px;
      }

      h2::before {
        left: -56px;
      }

      h2::after {
        left: calc(100% + 16px);
      }

      .profBox {
        flex-direction: column-reverse;
        align-items: center;
        gap: 24px;
        padding: 0 3.85%;
        margin-bottom: 40px;

        .imgBox {
          padding: 0 15.083%;
        }

        .profText {
          text-align: center;

          .nameBox {
            flex-direction: column;
            align-items: center;
            gap: 16px;

            img {
              min-width: 114px;
              height: auto;
            }

            p.name {
              font-size: 2rem;
              text-align: center;
            }
          }
        }
      }

      .message {
        .messageText {
          padding: 24px;
          max-width: 100%;

          p {
            font-size: 1.6rem;
            text-align: left;
          }
        }
      }
    }
  }
}

/* end #nutritionist */

.sectionImg2 {
  height: clamp(240px, 46.875vw, 640px);
  width: 100%;
  background: url(../Contents/Feature/photographer3.png)
    no-repeat center / cover;
}

@media screen and (max-width: 767px) {
  .sectionImg {
    height: 240px;
  }
}

/* end .sectionImg2 */

#news {
  background: #fff;

  .newsInner {
    text-align: center;

    .contents {
      margin-bottom: 40px;

      .section_information {
        height: auto;
      }

      .newsItem {
        align-items: start;
        gap: 51px;
        padding: 0 40px;
        margin-bottom: 32px;

        .date,
        .text {
          display: block;
          line-height: 1.4;
          letter-spacing: 0.03em;
          color: var(--text-color);
        }

        .date {
          font-weight: 700;
          font-size: 1.4rem;
          width: auto;
        }

        .text {
          width: 55ch; /* 30?????????? */
          text-align: left;
        }
      }

      .newsItem:last-child {
        margin-bottom: 0;
      }
    }

    /* ???????? hiddenBox ????????????? */
    .hiddenBox {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s;
      opacity: 0;
      margin: 0;
      padding: 0;
    }

    .hiddenBox.is-open {
      max-height: 1000px; /* ????????????? */
      opacity: 1;
      margin-top: 24px;
      padding: initial;
    }

    button.showMoreBtn {
      all: unset;
      display: block;
      border-radius: 30px;
      border: 1px solid var(--main-color);
      box-shadow: none;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      transition: box-shadow 0.3s ease-out;

      span {
        display: inline-block;
        font-size: 2rem;
        color: var(--main-color);
        padding: 10px 60px 10px 40px;
      }
    }

    button::before {
      display: block;
      content: "";
      width: 10px;
      height: 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: calc(60px - 15px);
      background: url(../Contents/Feature/weui_arrow-filled2.svg)
        no-repeat center / cover;
    }

    button:hover {
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
  }
}

@media screen and (max-width: 767px) {
  #news {
    .newsList {
      .newsItem.flex {
        justify-content: center;
        align-items: start;
        padding: 0;
        gap: 16px;

        .text {
          width: 100%;
        }
      }
    }

    button.showMoreBtn {
      span {
        font-size: 1.6rem !important;
        line-height: 1;
      }
    }
  }
}

/* end #news */

/* footer */
#Foot {
  padding-bottom: 0 !important;
}

#footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background-color: var(--footerBg-color);

  .footerInner {
    padding-bottom: 32px;

    .container {
      max-width: 400px;
      gap: 40px;
      margin-bottom: 40px;

      .logoImg {
        display: inline-block;
        width: 100%;
        /* max-height: 178.76px; */
        max-width: 120px;
      }

      ul li {
        padding: 0 40px;
        margin-bottom: 10px;

        a {
          color: var(--text-color);
          font-weight: 500;
          line-height: 1.4;
          letter-spacing: 0.03em;
        }

        a::before {
          background: var(--sub-color);
        }
      }

      li:last-child {
        margin-bottom: 0;
      }
    }
  }
  .copy {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }
}

@media screen and (max-width: 767px) {
  #footer {
    max-width: 100%;

    .footerInner {
      padding: 40px 24px;

      .container {
        flex-direction: column;
        max-width: 100%;
        padding: 0;
        margin-bottom: 24px;

        .navList {
          li {
            text-align: center;
            padding: 0;
          }
        }
      }
      .copy {
        padding: 0;
      }
    }
  }
}

#previewFooterPC {
  display: none;
}

#previewFooterSP {
  display: none;
}



/**************************************
.error
**************************************/
#errInfoSection{
  display: block;
  width: 100%;
  max-width: var(--contentsOuterWidth);
  background-color: var(--mainBg-color);
  margin: 0 auto;
  padding: 6rem 2rem 12rem;
  position: relative;
}

@media screen and (max-width: 767px) {
  #errInfoSection{
    padding: 3rem 1.5rem 6rem;
  }
}

#errInfoSection .mainTTL{
  display: block;
  margin-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--sub-color);
}

#errInfoSection .mainTTL::before,
#errInfoSection .mainTTL::after{
  display: none;
}

#errInfoSection .errInfo{
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 2rem;
  padding: 3rem 2rem;
  border: 2px solid #D6CFD3;
  border-radius: 8px;
  text-align: center;
  background: #fdfaf5;
}

#errInfoSection .errInfo > .hErrorContent{
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 3rem;
}

#errInfoSection .errInfo > .errDetail{
  display: block;
  color: #C41933;
  font-size: 1.4rem;
  font-weight: 700;
	text-align: center;
	line-height: 1.6;
}


#errInfoSection .bottomBtnArea{
    display: block;
    width: 100%;
    margin: 4rem auto 0;
}

#errInfoSection .bottomBtnArea > ul{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  gap: 0 2rem;
}

#errInfoSection .bottomBtnArea > ul > li:nth-of-type(1){
	order: 2;
	width: 24rem;
}
#errInfoSection .bottomBtnArea > ul > li:nth-of-type(2){
	order: 1;
	width: 24rem;
}



/**************************************
button
**************************************/

@media screen and (min-width: 768px) {
  
/*btnNext*****/
.btnNext > a,
.btnNext > button,
.btnNext > span,
.btnNext > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: var(--btnColor);
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 600;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnNext > a:hover,
  .btnNext > button:hover,
  .btnNext > span:hover,
  .btnNext > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnNext.disabled > a,
.btnNext.disabled > button,
.btnNext.disabled > span,
.btnNext.disabled > input[type="submit"],
.btnNext > a[disabled],
.btnNext > button[disabled],
.btnNext > span[disabled],
.btnNext > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnNext.small > a,
.btnNext.small > button,
.btnNext.small > span,
.btnNext.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}

/*btnBorder*****/
.btnBorder > a,
.btnBorder > button,
.btnBorder > span,
.btnBorder > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #738994;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnBorder > a:hover,
  .btnBorder > button:hover,
  .btnBorder > span:hover,
  .btnBorder > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnBorder.disabled > a,
.btnBorder.disabled > button,
.btnBorder.disabled > span,
.btnBorder.disabled > input[type="submit"],
.btnBorder > a[disabled],
.btnBorder > button[disabled],
.btnBorder > span[disabled],
.btnBorder > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnBorder.small > a,
.btnBorder.small > button,
.btnBorder.small > span,
.btnBorder.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}



/*btnBlack*****/
.btnBlack > a,
.btnBlack > button,
.btnBlack > span,
.btnBlack > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4rem;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #738994;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnBlack > a:hover,
  .btnBlack > button:hover,
  .btnBlack > span:hover,
  .btnBlack > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnBlack.disabled > a,
.btnBlack.disabled > button,
.btnBlack.disabled > span,
.btnBlack.disabled > input[type="submit"],
.btnBlack > a[disabled],
.btnBlack > button[disabled],
.btnBlack > span[disabled],
.btnBlack > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}



/*btnBack*****/
.btnBack > a,
.btnBack > button,
.btnBack > span,
.btnBack > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #738994;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnBack > a:hover,
  .btnBack > button:hover,
  .btnBack > span:hover,
  .btnBack > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnBack.disabled > a,
.btnBack.disabled > button,
.btnBack.disabled > span,
.btnBack.disabled > input[type="submit"],
.btnBack > a[disabled],
.btnBack > button[disabled],
.btnBack > span[disabled],
.btnBack > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnBack.small > a,
.btnBack.small > button,
.btnBack.small > span,
.btnBack.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}



/*searchAddr*****/
.searchAddr > a,
.searchAddr > button,
.searchAddr > span,
.searchAddr > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4rem;
  background-color: #545454;
  border-radius: calc(4rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: var(--fontSizeS);
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .searchAddr > a:hover,
  .searchAddr > button:hover,
  .searchAddr > span:hover,
  .searchAddr > input[type="submit"]:hover{
    opacity: .6;
  }
}

.searchAddr.disabled > a,
.searchAddr.disabled > button,
.searchAddr.disabled > span,
.searchAddr.disabled > input[type="submit"],
.searchAddr > a[disabled],
.searchAddr > button[disabled],
.searchAddr > span[disabled],
.searchAddr > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}


/*btnChange*****/
.btnChange > a,
.btnChange > button,
.btnChange > span,
.btnChange > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: var(--btnSubColor);
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
  
.btnChange > a > span,
.btnChange > button > span,
.btnChange > span > span{
  color: #FFFFFF;
}

@media (hover: hover) {
  .btnChange > a:hover,
  .btnChange > button:hover,
  .btnChange > span:hover,
  .btnChange > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnChange.disabled > a,
.btnChange.disabled > button,
.btnChange.disabled > span,
.btnChange.disabled > input[type="submit"],
.btnChange > a[disabled],
.btnChange > button[disabled],
.btnChange > span[disabled],
.btnChange > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}


/*btnCancel*****/
.btnCancel > a,
.btnCancel > button,
.btnCancel > span,
.btnCancel > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: #555555;
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
  
@media (hover: hover) {
  .btnCancel > a:hover,
  .btnCancel > button:hover,
  .btnCancel > span:hover,
  .btnCancel > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnCancel.disabled > a,
.btnCancel.disabled > button,
.btnCancel.disabled > span,
.btnCancel.disabled > input[type="submit"],
.btnCancel > a[disabled],
.btnCancel > button[disabled],
.btnCancel > span[disabled],
.btnCancel > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

}/*//PCbtn*/


@media screen and (max-width: 767px) {
/*btnNext*****/
.btnNext > a,
.btnNext > button,
.btnNext > span,
.btnNext > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: var(--btnColor);
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnNext > a:hover,
  .btnNext > button:hover,
  .btnNext > span:hover,
  .btnNext > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnNext.disabled > a,
.btnNext.disabled > button,
.btnNext.disabled > span,
.btnNext.disabled > input[type="submit"],
.btnNext > a[disabled],
.btnNext > button[disabled],
.btnNext > span[disabled],
.btnNext > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnNext.small > a,
.btnNext.small > button,
.btnNext.small > span,
.btnNext.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}

/*btnBorder*****/
.btnBorder > a,
.btnBorder > button,
.btnBorder > span,
.btnBorder > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #738994;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnBorder > a:hover,
  .btnBorder > button:hover,
  .btnBorder > span:hover,
  .btnBorder > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnBorder.disabled > a,
.btnBorder.disabled > button,
.btnBorder.disabled > span,
.btnBorder.disabled > input[type="submit"],
.btnBorder > a[disabled],
.btnBorder > button[disabled],
.btnBorder > span[disabled],
.btnBorder > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnBorder.small > a,
.btnBorder.small > button,
.btnBorder.small > span,
.btnBorder.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}


/*btnBack*****/
.btnBack > a,
.btnBack > button,
.btnBack > span,
.btnBack > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 6rem;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  border-radius: calc(6rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 600;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #738994;
  position: relative;
  transition: opacity 0.3s ease;
}


@media (hover: hover) {
  .btnBack > a:hover,
  .btnBack > button:hover,
  .btnBack > span:hover,
  .btnBack > input[type="submit"]:hover{
    opacity: .6;
  }
}

.btnBack.disabled > a,
.btnBack.disabled > button,
.btnBack.disabled > span,
.btnBack.disabled > input[type="submit"],
.btnBack > a[disabled],
.btnBack > button[disabled],
.btnBack > span[disabled],
.btnBack > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

.btnBack.small > a,
.btnBack.small > button,
.btnBack.small > span,
.btnBack.small > input[type="submit"]{
  height: 4rem;
  border-radius: 2rem;
  font-size: 1.4rem;
}


/*searchAddr*****/
.searchAddr > a,
.searchAddr > button,
.searchAddr > span,
.searchAddr > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4rem;
  background-color: #545454;
  border-radius: calc(4rem / 2);
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: var(--fontSizeS);
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}

.searchAddr.disabled > a,
.searchAddr.disabled > button,
.searchAddr.disabled > span,
.searchAddr.disabled > input[type="submit"],
.searchAddr > a[disabled],
.searchAddr > button[disabled],
.searchAddr > span[disabled],
.searchAddr > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}


/*btnChange*****/
.btnChange > a,
.btnChange > button,
.btnChange > span,
.btnChange > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: var(--btnSubColor);
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-weight: 600;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
  
.btnChange > a > span,
.btnChange > button > span,
.btnChange > span > span{
  color: #FFFFFF;
}

.btnChange.disabled > a,
.btnChange.disabled > button,
.btnChange.disabled > span,
.btnChange.disabled > input[type="submit"],
.btnChange > a[disabled],
.btnChange > button[disabled],
.btnChange > span[disabled],
.btnChange > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}


/*btnCancel*****/
.btnCancel > a,
.btnCancel > button,
.btnCancel > span,
.btnCancel > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: #555555;
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.btnCancel.disabled > a,
.btnCancel.disabled > button,
.btnCancel.disabled > span,
.btnCancel.disabled > input[type="submit"],
.btnCancel > a[disabled],
.btnCancel > button[disabled],
.btnCancel > span[disabled],
.btnCancel > input[type="submit"][disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  pointer-events: none;
}

}/*//SPbtn*/



/**************************************
.pagerBox
**************************************/
.pagerBox{
  margin-top: 2rem;
  padding: 1.5rem;
}
.pagerBox > .cnt{display: none;}

.pagerBox:not(:has(a)){
  display: none;
}

.listPager{
  display: block;
  width: 100%;
}

.listPager > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 1rem 1.4rem;
}

.listPager >  ul > li{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  min-height: 3rem;
  min-width: 3rem;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  position: relative;
}

.listPager >  ul > li > a{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  text-decoration: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--txtColor);
}

.listPager >  ul > li > span{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #957D4C;
  color: #FFFFFF;
}

.listPager >  ul > li.prev,
.listPager >  ul > li.next{}

.listPager >  ul > li.prev > a{
  content: '';
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: url("../img/system/arrow_left.svg") center center no-repeat /*#E9F0F5*/;
  background-size: 0.532rem auto;
  transition: opacity 0.3s ease;
}
.listPager >  ul > li.prev > a:hover{opacity: .6;}

.listPager >  ul > li.next > a{
  content: '';
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: url("../img/system/arrow_right.svg") center center no-repeat  /*#E9F0F5*/;
  background-size: 0.532rem auto;
  transition: opacity 0.3s ease;
}

.listPager >  ul > li.prev > span,
.listPager >  ul > li.next > span{display: none;}

@media (hover: hover) {
  .listPager >  ul > li.prev > a:hover{opacity: .6;}
  .listPager >  ul > li.next > a:hover{opacity: .6;}
}

.listPager >  ul > li.prev > span,
.listPager >  ul > li.next > span{display: none;}






/* 購入履歴 クレジットカード個人情報利用同意モーダル */
#personalInformationConsentWrapper {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
#personalInformationConsentWrapper #background {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  /*他ページに合わせる*/
  background-color: rgba(0, 0, 0, 0.6);
}
#personalInformationConsentWrapper .personal-information-consent-modal {
  width: 80%;
  max-width: 500px;
  padding: 10px 20px 20px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  font-size: 13px;
  overflow-y: scroll;
}
#personalInformationConsentWrapper .personal-information-consent-modal .consent-button-wrapper{
  margin-top: 20px;
}
#personalInformationConsentWrapper .personal-information-consent-modal .consent-button-wrapper .btn {
  padding: 1.5em 0;
  background-color: #000;
  color: #fff;
}
#personalInformationConsentWrapper .personal-information-consent-modal p {
  line-height: 1rem;
}
#personalInformationConsentWrapper .personal-information-consent-modal #closeModal {
  text-align: right;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}

.personal-info-consent-wrapper {
  padding: 1em;
}
.personal-info-consent-wrapper .btn-wrapper {
  margin-top: 10px;
}


/**************************************
OverRide
**************************************/

@media screen and (max-width: 767px) {
  .pcView{display: none;}
}
@media screen and (min-width: 768px) {
  .spView{display: none;}
}