@charset "UTF-8";

/*
 * HOME
*=============================================*/
#top__concept {
   position: relative;
   padding-bottom: 40px;
}

#top__concept h2 {
   color: #6B5263;
   letter-spacing: 0.1em;
   padding-bottom: 40px;
}

#top__concept .txt {
   font-weight: 700;
   letter-spacing: 0.05em;
   color: #544C51;
}

#top__concept .txt p:not(:last-child) {
   padding-bottom: 30px;
}

#top__concept figure {
   width: 100%;
   padding-top: 36%;
   position: relative;
}

#top__concept figure img {
   position: absolute;
   top: 0;
   left: 0;
}

/* -- -- */
#top__products h2 {
   color: #6B5263;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.1em;
   padding-bottom: 16px;
}

#top__products .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding-bottom: 40px;
}

#top__products .box figure {
   padding-top: 100%;
   position: relative;
}

#top__products .box figure img {
   max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#top__products .box h3 {
   padding: 12px 0 6px;
}

#top__products .box .price {
   font-weight: 700;
}

#top__products .box a:hover figure img {
   transform: translate(-50%, -50%) scale(1.07);
}

#top__products .category {
   padding-bottom: 40px;
}

#top__products .category h3 {
   color: #6B5263;
   font-weight: 700;
   font-size: 16px;
}

#top__products .category .list-cat-toggle {
   padding-top: 16px;
}

#top__products .note {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #fff;
   border: 2px solid #252525;
   color: #252525;
   font-size: 12px;
   min-height: 90px;
   padding: 16px;
   text-align: center;
}

#top__products .note strong {
   font-weight: 700;
   font-size: 14px;
}

#top__products .note strong span {
   font-size: 20px;
}

#top__products .blog-link {
   display: none;
}

@media screen and (max-width: 767px) {
   #top__products .box {
      grid-template-columns: repeat(2, 1fr);
   }

   #top__products .box h3 span {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
   }
}

/* -- -- */
#top__about {
   position: relative;
}

#top__about h2 {
   border-bottom: 1px solid #f0f1f4;
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 16px;
   padding-bottom: 20px;
}

#top__about .txt p:not(:last-child) {
   padding-bottom: 30px;
}

/* -- --  */

#top__news h2 {
   color: #6B5263;
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;
}

#top__news .wrap {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 50px;
}

#top__news h2 {
   padding-bottom: 15px;
}

#top__news .feed {
   max-height: 280px;
   overflow: hidden auto;
   padding-right: 15px;
}

#top__news .feed ul {
   display: grid;
   gap: 20px;
}

#top__news .feed li {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 10px;
}

#top__news .feed li a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#top__news .infoImg {
   width: 100%;
   padding-top: 60%;
   position: relative;
}

#top__news .infoImg img {
   position: absolute;
   top: 0;
   left: 0;
}

#top__news .infoTxt {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

@media screen and (max-width: 767px) {
   #top__news .wrap {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   #top__news .feed ul {
      gap: 10px;
   }
}

/* =============================================
 * FAQ
*=============================================*/
#faq h2 {
   font-weight: 400;
   padding-bottom: 40px;
}

#faq .box .item:not(:last-child) {
   padding-bottom: 40px;
}

#faq .box h3 {
   border-bottom: 1px solid;
   font-weight: 400;
   position: relative;
   margin-bottom: 40px;
   padding: 0 0 8px 40px;
}

#faq .box h3:before {
   content: 'Q.';
   font-weight: 700;
   position: absolute;
   top: 0;
   left: 0;
}

#faq .box .txt p:not(:last-child) {
   padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
   #faq h2 {
      padding-bottom: 20px;
   }

   #faq .box .item:not(:last-child) {
      padding-bottom: 20px;
   }

   #faq .box h3 {
      margin-bottom: 20px;
      padding: 0 0 8px 30px;
   }

   #faq .box .txt p:not(:last-child) {
      padding-bottom: 20px;
   }
}

/* =============================================
 * SHOPPING GUIDE
*=============================================*/
#guide h2 {
   font-weight: 400;
   padding-bottom: 40px;
}

#guide h3 {
   border-bottom: 1px solid;
   font-weight: 400;
   position: relative;
   margin-bottom: 40px;
   padding: 0 0 8px;
}

#guide h4 {
   font-size: 16px;
   padding-bottom: 40px;
}

#guide p:not(:last-child) {
   padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
   #guide h2 {
      padding-bottom: 20px;
   }

   #guide h3 {
      margin-bottom: 20px;
   }

   #guide h4 {
      padding-bottom: 20px;
   }

   #guide p:not(:last-child) {
      padding-bottom: 20px;
   }
}

/* =============================================
 * ギフトラッピングについて
*=============================================*/
#gift h2 {
   font-weight: 700;
   font-size: 16px;
}

/* =============================================
 * ギフトラッピングについて
*=============================================*/
#privacy h2 {
   border-bottom: 1px solid #f0f1f4;
   color: #333;
   font-weight: 700;
   font-size: 16px;
   margin-bottom: 20px;
   padding-bottom: 20px;
}

#privacy dt {
   font-weight: 700;
   margin-bottom: 12px;
   margin-top: 24px;
   padding-top: 24px;
}

#privacy dd a {
   color: -webkit-link;
   text-decoration: underline;
}

#privacy ul {
   list-style: none;
}

/* =============================================
 * 特定商取引法に基づく表記
*=============================================*/
#law h2,
#law h3 {
   font-weight: 700;
}

#law h2 {
   color: #333;
   font-size: 16px;
}

#law h3 {
   margin-bottom: 8px;
   margin-top: 24px;
}

#law a:not([href^="tel:"]) {
   text-decoration: underline;
}

#law a:not([href^="tel:"]):hover {
   text-decoration: none;
}

#law .law_attention {
   background-color: #f8f9fa;
   margin-top: 16px;
   padding: 16px;
}