html{
    font-size: 62.5%;
}
body{
  font-family:"Hiragino Mincho ProN",
	YuMincho,
	serif;
  font-size: 1.6rem;
  color: #333333;
}
.inner{
    width: calc(1176 / 1424 * 100%);
    margin: 0 auto;
    max-width: 1176px;
    background-color: white;
}
.gray{
    color: #7bb69b;
}
.mt10{
  margin-top:  1rem;
}
.mt20{
  margin-top:  2rem;
}
.mt30{
  margin-top:  3rem;
}
.mt40{
  margin-top:  4rem;
}
.mt50{
  margin-top:  5rem;
}
.mt60{
  margin-top:  6rem;
}
.mt70{
  margin-top:  7rem;
}
.mt80{
  margin-top:  8rem;
}
.mt90{
  margin-top:  9rem;
}
.mt100{
  margin-top:  10rem;
}
.mb10{
  margin-bottom:  1rem;
}
.mb20{
  margin-bottom:  2rem;
}
.mb30{
  margin-bottom:  3rem;
}
.mb40{
  margin-bottom:  4rem;
}
.mb50{
  margin-bottom:  5rem;
}
.mb60{
  margin-bottom:  6rem;
}
.mb70{
  margin-bottom:  7rem;
}
.mb80{
  margin-bottom:  8rem;
}
.mb90{
  margin-bottom:  9rem;
}
.mb100{
  margin-bottom:  10rem;
}
.pb10{
  padding-bottom:  1rem;
}
.pb20{
  padding-bottom:  2rem;
}
.pb30{
  padding-bottom:  3rem;
}
.pb40{
  padding-bottom:  4rem;
}
.pb50{
  padding-bottom:  5rem;
}
.pb60{
  padding-bottom:  6rem;
} 
.pb70{
  padding-bottom:  7rem;
}
.pb80{
  padding-bottom:  8rem;
}
.pb90{
  padding-bottom:  9rem;
}
.pb100{
  padding-bottom:  10rem;
}
.pt10{
  padding-top:  1rem;
}
.pt20{
  padding-top:  2rem;
}
.pt30{
  padding-top:  3rem;
}
.pt40{
  padding-top:  4rem;
}
.pt50{
  padding-top:  5rem;
}
.pt60{
  padding-top:  6rem;
}
.pt70{
  padding-top:  7rem;
}
.pt80{
  padding-top:  8rem;
}
.pt90{
  padding-top:  9rem;
}
.pt100{
  padding-top:  10rem;
}
.title{
  color: #7bb69b;
  &:after{
    content: '';
    display: block;
    width: 8rem;
    height: 1px;
    background-color: #7bb69b;
    margin: 0 auto;
    margin-top: 1rem;
  }
}
.btn{
  display: table;
  margin: 0 auto;
  color: #7bb69b;
  text-decoration: none;
  padding:2rem;
  border: 1px solid #7bb69b;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 315px;
  font-size: 2.2rem;
}
.header{
 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 136px;
  .inner{
    position: relative;
    

    h1{
      width: 100%;
    max-width: 347px;
    margin: 0 auto;
    }
    .menu{
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      ul{
        display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 32px;
      margin-right: 3.2rem;
     
      }
    }
  }
}
.footer {
         position: relative;
         overflow: hidden;
         padding-top: 30rem;

         .ill08 {
            position: absolute;
            top: 0;
            left: -200px;
            width: auto;
         }

         .inner {
            padding-left: 45%;

            h3 {
               img {
                  width: 100%;
                  max-width: 347px;
               }
            }

            ul {
               position: relative;
               z-index: 3;

               li {
                  margin-bottom: 2rem;

                  a {
                     font-size: 1.6rem;
                     color: #333333;

                     &::before {
                        content: '-';
                        margin-right: .5rem;
                        vertical-align: middle;
                        line-height: 1;
                     }
                  }
               }
            }

            address {
               font-style: normal;
               color: #999999;
            }
         }
      }
.catchup{
  position: relative;
  .ill01{
    position: absolute;
    top: -200px;
    left: 0;
    width: auto;
  }
  .ill02{
    position: absolute;
    top: 50px;
    left: 0;
    width: auto;
    z-index: -1;
  }
  .ill03{
    position: absolute;
    top: -200px;
    right: 0;
    width: auto;
    z-index: -1;
  }
  .ill04{
    position: absolute;
    top: 100px;
    right: 0;
    width: auto;
    z-index: -1;
  }
  .lead{
    font-size: 2.8rem;
    letter-spacing: .5rem;
  }
}
.pickup{
  .list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5%;
    padding-left: 8%;
    padding-right: 8%;
    li{
      width: calc(33.33% - 5%);
      margin-bottom: 5%;
      a{
        color: #333333;
      }
      p{
      text-align: center;
      font-size: 1.4rem;
      }
      .price{
        color: #7bb69b;
      }
      .soldout{
        color: #f58387;
      }
      img{
        width: 100%;
        height: 100%;
                margin-bottom: 2rem;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                
      }
    }
  }
}

      .about {
         position: relative;

         .ill05 {
            position: absolute;
            top: -100px;
            left: -200px;
            width: auto;
         }

         .ill06 {
            position: absolute;
            top: 250px;
            left: -200px;
            width: auto;
            z-index: -1;
         }

         .ill07 {
            position: absolute;
            bottom: 0;
            left: -250px;
            width: auto;
            z-index: -1;
         }

         .ill09 {
            position: absolute;
            top: 0;
            right: -50px;
            width: auto;
            z-index: -1;
         }

         .ill10 {
            position: absolute;
            bottom: -150px;
            right: -300px;
            width: auto;
         }

         .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            li {
               width: 50%;

               &.text {
                  p {
                     padding: 0 4rem;

                     a {
                        &::before {
                           content: '>';
                           margin-right: 1rem;
                           vertical-align: text-bottom;
                           line-height: 1;
                        }
                     }
                  }
               }
            }

            &:last-child {
               flex-direction: row-reverse;

               p {
                  text-align: right;

               }

            }
         }
      }

.toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 24px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
      }

      .toggle span {
width: 100%;
height: 2px;
background-color: #333;
border-radius: 2px;
transition: all 0.3s ease;
      }

      /* モーダルオーバーレイ */
      .menu-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
      }

      .menu-modal.active {
display: block;
opacity: 1;
      }

      /* モーダルコンテンツ */
      .menu-modal-content {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: #fff;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
overflow-y: auto;
z-index: 1000;
      }

      .menu-modal.active .menu-modal-content {
right: 0;
      }

      .menu-modal-content nav {
padding: 80px 40px 40px;
      }

      .menu-modal-content ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
      }

      .menu-modal-content li {
border-bottom: 1px solid #eee;
      }

      .menu-modal-content li:last-child {
border-bottom: none;
      }

      .menu-modal-content a {
display: block;
padding: 20px 0;
color: #333;
text-decoration: none;
font-size: 1.6rem;
transition: color 0.3s ease;
      }

      .menu-modal-content a:hover {
color: #7bb69b;
      }

      /* 閉じるボタン 
      .menu-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 1001;
      }

      .menu-close::before,
      .menu-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background-color: #333;
transform: translate(-50%, -50%) rotate(45deg);
      }

      .menu-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
      }
*/
      /* トグルボタンのアニメーション（開いた時） */
      .toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
      }

      .toggle.active span:nth-child(2) {
opacity: 0;
      }

      .toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -7px);
      }

      /* レスポンシブ対応 */
.menu nav {
   display: none;
}

      .itemdetail {
         padding-top: 5rem;

         #slideImg {
            .imgBox {
               text-align: center;

               a {
                  display: inline-block;

                  img {
                     display: inline-block;
                     width: 508px;
                     max-width: none;
                     object-fit: cover;
                     aspect-ratio: 1/1;
                  }
               }
            }
         }

         #slideImgPager {
            #mCSB_1 {
               display: flex;
               justify-content: center;
               align-items: center;
            }

            #mCSB_1_container {
               display: flex;
               justify-content: flex-start;
               /* centerだと見た目は中央寄せだが、動きが分かりづらい */
               align-items: center;
               gap: .5rem;
               width: 508px;

               overflow-x: auto;
               /* 横だけスクロール */
               overflow-y: hidden;
               /* 縦スクロールを消す */

               white-space: nowrap;
               /* 念のため折り返し防止 */
            }

            #mCSB_1_container>* {
               flex-shrink: 0;
            }

            #mCSB_1_container::-webkit-scrollbar {
               height: 8px;
            }

            #mCSB_1_container::-webkit-scrollbar-thumb {
               background: #999;
               border-radius: 10px;
            }

            #mCSB_1_container {
               flex-wrap: nowrap;
            }




            a {
               display: inline-block;

               .smallImgBox {
                  img {
                     object-fit: cover;
                     aspect-ratio: 1/1;
                     width: 100%;
                     min-width: 97px;
                  }
               }
            }
         }

         .itemDescription,
         .purchase {
            width: 100%;
            max-width: 690px;
            margin: 0 auto;
            display: table;

            p {
               font-size: 1.5rem;
            }

            #itemSelect {
               padding-top: 3rem;

               .itemOption__name {
                  font-weight: bold;
                  margin-top: 2rem;
                  margin-bottom: .5rem;
               }

               .itemOption__select {
                  text-align: center;
                  width: 100%;
                  font-size: 1.7rem;
                  padding: 1rem;
                  margin: .5rem 0;
               }

               .itemOption__input {
                  width: 100%;
                  font-size: 1.7rem;
                  padding: 1rem;
                  margin: .5rem 0;
               }

               .itemOption__caption {
                  font-size: 1.5rem;
               }
            }

            .purchaseButton {
               text-align: center;
               width: 100%;
               margin-top: 5rem;

               .purchaseButton__btn {
                  background: #7bb69b;
                  border: solid 1px #7bb69b;
                  font-size: 1.7rem;
                  font-weight: bold;
                  color: #fff;
                  width: 100%;
                  display: inline-block;
                  padding: 1.5rem;
                  border-radius: 5px;
                  transition: all 0.3s ease;

                  &:hover {
                     background: #fff;
                     color: #7bb69b;
                     transition: all 0.3s ease;
                  }
               }
            }

            .locallink {
               margin-top: 5rem;

               ul {
                  border-top: solid 1px #e6e6e6;

                  li {
                     border-bottom: solid 1px #e6e6e6;
                     padding: 1.5rem;

                     a {
                        font-size: 1.6rem;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        width: 100%;
                        text-align: left;
                        background: url("https://basefile.akamaized.net/ansur-buyshop-jp/6979c42a80447/icon-arrow.png") no-repeat right center / 10px auto;
                        padding-right: 10px;
                        transition: all 0.3s ease;

                        &:hover {
                           opacity: 0.7;
                           transition: all 0.3s ease;
                        }

                        &:active {
                           opacity: 0.5;
                           transition: all 0.3s ease;
                        }
                     }

                     &.delivery {
                        img {
                           width: 16px;
                           margin-right: .5rem;
                        }
                     }

                     &.payment {
                        img {
                           width: 16px;
                           margin-right: .5rem;
                        }
                     }
                  }
               }
            }
         }

         .itemDescription {
            h1 {
               font-size: 1.8rem;
               margin-bottom: 1rem;
               font-weight: bold;
            }

            .itemPrice {
               h2 {
                  font-size: 1.8rem;
                  color: #808080;
                  font-weight: bold;
               }

               .soldout {
                  color: #ed4242;
                  display: inline-block;
                  font-size: 1.6rem;
                  margin-top: 1rem;
               }
            }

            #itemAttention {
               margin-bottom: 5rem;
            }
         }

         .itemsocial {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 3rem;

            .shareButtons {
               display: flex;
               justify-content: flex-start;
               align-items: center;
               gap: 1rem;
               line-height: 1;
            }

            #reportBtn {
               #openIllegalReport {
                  font-size: 1.5rem;
                  color: #cccccc;

               }
            }
         }
      }

      #privacy {
         width: calc(1176 / 1424 * 100%);
         margin: 0 auto;
         max-width: 1176px;
         background-color: white;
         margin: 0 auto;
         padding: 5rem 0;

         h2 {
            margin-bottom: 2rem;
            font-size: 3.2rem;
            font-weight: bold;
            text-align: center;
         }

         p {
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 1rem;
         }

         dl {
            margin-bottom: 1rem;

            dt {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               font-weight: bold;
            }

            dd {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               line-height: 1.5;
            }
         }

         ul {
            list-style: disc;
            padding-left: 2rem;

            li {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               line-height: 1.5;
            }
         }
      }

      #law {
         width: calc(1176 / 1424 * 100%);
         max-width: 1176px;
         background-color: white;
         margin: 0 auto;
         padding: 5rem 0;

         h2 {
            margin-bottom: 2rem;
            font-size: 3.2rem;
            font-weight: bold;
            text-align: center;
         }

         h3 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
            font-weight: bold;
         }

         p {
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 1rem;
         }

         dl {
            margin-bottom: 1rem;

            dt {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               font-weight: bold;
            }

            dd {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               line-height: 1.5;
            }
         }

         ul {
            list-style: disc;
            padding-left: 2rem;

            li {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               line-height: 1.5;
            }
         }
      }

      .inquirySection {
         width: calc(1176 / 1424 * 100%);
         max-width: 690px;
         background-color: white;
         margin: 0 auto;
         padding: 5rem 0;

         h1 {
            margin-bottom: 2rem;
            font-size: 3.2rem;
            font-weight: bold;
            text-align: center;
         }

         p {
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            text-align: center;
         }

         form {
            width: 100%;

            input {
               width: 100%;
               padding: 1rem;
               margin-bottom: 1rem;
               border: 1px solid #e6e6e6;
               border-radius: 5px;
            }

            textarea {
               width: 100%;
               padding: 1rem;
               margin-bottom: 1rem;
               border: 1px solid #e6e6e6;
               border-radius: 5px;
            }

            button {
               width: 100%;
               padding: 1rem;
               margin-bottom: 1rem;
               border: 1px solid #e6e6e6;
               border-radius: 5px;
            }
         }

         dl {
            margin-bottom: 1rem;

            dt {
               margin-bottom: 1rem;
               font-size: 1.5rem;
               font-weight: bold;
            }
         }
      }