@charset "utf-8";
/* トップ */
.top {
  padding-bottom: 40px;
}
.top_mv {
  padding: 45px 0 25px;
}
.catenavi {
  margin: 0 auto 30px;
}
.catenavi ul {
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.catenavi ul li {
  width: 31%;
  margin-bottom: 10px;
}
.top_category h2 {
  text-align: center;
  font-size: 28px;
}
.top_category span {
  display: block;
  font-size: 12px;
  text-align: center;
  margin: 0 auto 20px;
}
.top_category ul li {
  margin: 0 auto 20px!important;
}
/* カテゴリー */
.categoryList {
  background-color: #f3e7c8;
  padding: 45px 0;
}
.categoryList ul li {
  margin: 0 auto 30px!important;
  background-color: #d7b055;
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
  padding: 5px;
}
.categoryList ul li .categoryList_inner {
  box-shadow: inset 0px 0px 5px #a0a0a0, inset -2px -2px 5px #ffffff;
  background-color: #fff;
  padding: 25px;
  clip-path: polygon(0 17px, 17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px));
}
.categoryList ul li figure img {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.43);
margin: 0 auto 5px;
}
.categoryList ul li .categoryList_ttl {
  justify-content: flex-start;
  margin-top: 10px;
}
.categoryList ul li .categoryList_ttl span {
  font-size: 42px;
  display: block;
  line-height: 1;
  white-space: nowrap;
}
#category01 .categoryList ul li .categoryList_ttl span {
  color: #8d1d21;
}
#category02 .categoryList ul li .categoryList_ttl span {
  color: #05305c;
}
#category03 .categoryList ul li .categoryList_ttl span {
  color: #2f5a38;
}
#category04 .categoryList ul li .categoryList_ttl span {
  color: #ba5926;
}
#category05 .categoryList ul li .categoryList_ttl span {
  color: #c25c70;
}
#category06 .categoryList ul li .categoryList_ttl span {
  color: #514575;
}
#category07 .categoryList ul li .categoryList_ttl span {
  color: #378f63;
}
#category08 .categoryList ul li .categoryList_ttl span {
  color: #27909d;
}
.categoryList ul li .categoryList_ttl h3 {
      line-height: 1.25;
    font-size: 20px;
    margin-left: 10px;
    font-weight: 500;
}
.categoryList ul li a {
  display: block;
  background-color: #9e8730;
  text-align: center;
  padding: 12px!important;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  position: relative;
  width: 90%;
  margin: 10px auto 0;
} 
.categoryList ul li a::after {
  content: "";
    position: absolute;
    right: 5%;
    top: 50%;
    display: block;
    width: 8px;
    height: 8px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}
/* 商品詳細 */
.categoryMv {
  text-align: center;
  padding: 35px 0 30px;
}
#category01 .categoryMv {
  background: url(/img/common/category01_mv.jpg) no-repeat top center /cover;
}
#category02 .categoryMv {
  background: url(/img/common/category02_mv.jpg) no-repeat top center /cover;
}
#category03 .categoryMv {
  background: url(/img/common/category03_mv.jpg) no-repeat top center /cover;
}
#category04 .categoryMv {
  background: url(/img/common/category04_mv.jpg) no-repeat top center /cover;
}
#category05 .categoryMv {
  background: url(/img/common/category05_mv.jpg) no-repeat top center /cover;
}
#category06 .categoryMv {
  background: url(/img/common/category06_mv.jpg) no-repeat top center /cover;
}
#category07 .categoryMv {
  background: url(/img/common/category07_mv.jpg) no-repeat top center /cover;
}
#category08 .categoryMv {
  background: url(/img/common/category08_mv.jpg) no-repeat top center /cover;
}
.categoryMv_txt {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
.categoryMv_txt h2, .categoryMv_txt p, .categoryMv_txt span {
  background: linear-gradient(120deg, #ffbd32 20%, #fff9e9 50%, #fdd65d 80%); /* 背景色にグラデーションを指定 */
  -webkit-background-clip: text; /* テキストで切り抜く */
  -webkit-text-fill-color: transparent; /* 切り抜いた部分は背景を表示 */
  display: inline;
  line-height: 1;
}
.categoryMv_txt h2 {
  font-size: 72px;
}
.categoryMv_txt p {
  font-size: 20px;
}
.categoryMv_txt span {
  font-size: 20px;
}
/*  */
.categoryProd {
  padding: 65px 0 25px;
}
.categoryProd_ttl {
  margin-bottom: 5px;
}
.categoryProd_ttl span {
  display: block;
  font-size: 50px;
  line-height: 1;
}
#category01 .categoryProd .categoryProd_ttl span {
  color: #8d1d21;
}
#category02 .categoryProd .categoryProd_ttl span {
  color: #05305c;
}
#category03 .categoryProd .categoryProd_ttl span {
  color: #2f5a38;
}
#category04 .categoryProd .categoryProd_ttl span {
  color: #ba5926;
}
#category05 .categoryProd .categoryProd_ttl span {
  color: #c25c70;
}
#category06 .categoryProd .categoryProd_ttl span {
  color: #514575;
}
#category07 .categoryProd .categoryProd_ttl span {
  color: #378f63;
}
#category08 .categoryProd .categoryProd_ttl span {
  color: #27909d;
}
.categoryProd_ttl h2 {
  font-size: 30px;
}
.categoryProd_img .swiper-thumb {
  margin-top: 10px;
}
.categoryProd_img .swiper-main li, .categoryProd_img .swiper-thumb li {
  border: 1px solid #777777;
}
.categoryProd_img .swiper-thumb li {
  cursor: pointer;
}
.categoryProd h3 {
  font-size: 24px;
  margin: 20px auto 10px;
}
.categoryProd_info {
  background-color: #f4f1e7;
  padding: 15px;
  line-height: 1.5;
  margin: 20px auto 0;
}
.categoryProd_infoCont {
  margin: 0 auto 10px;
}
.categoryProd_infoCont:last-of-type {
  margin-bottom: 0;
}
.categoryProd_infoCont h4 {
  font-weight: 600;
}
.categoryProd_favBtn {
  margin: 0 auto 35px;
}
.categoryProd_backBtn {
  margin: 0 auto 70px;
}
.categoryProd_favBtn a, .categoryProd_backBtn a {
  max-width: 380px;
  display: block;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
.categoryProd_favBtn a {
  padding: 12px;
  border: 3px solid #c7a81f;
  border-radius: 100px;
}
.categoryProd_favBtn a::after {
  content: "";
    position: absolute;
    right: 5%;
    top: 50%;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 4px #c7a81f;
    border-right: solid 4px #c7a81f;
    transform: translateY(-50%) rotate(45deg);
}
.categoryProd_favBtn a p {
  padding-left: 25px;
  position: relative;
  display: inline-block;
}
.categoryProd_favBtn a p::before {
  content: '';
    display: inline-block;
    background: url(/img/common/favBtn_icon.png) no-repeat top center / 100% auto;
    width: 20px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.categoryProd_backBtn a {
  border: 2px solid #797979;
  color: #303030;
  padding: 15px;
}
.categoryProd_backBtn a::before {
content: "";
    position: absolute;
    left: 5%;
    top: 50%;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 4px #303030;
    border-right: solid 4px #303030;
    transform: translateY(-50%) rotate(225deg);
}
/*  */
.category_choiceBtn {
  max-width: 430px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 990;
}
.category_choiceBtn a {
  display: block;
  background-color: #e03308;
  text-align: center;
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 22px 0;
  box-shadow: 0px 2px 5px 5px rgba(0, 0, 0, 0.3);
}
.category_choiceBtn a::after {
  content: "";
    position: absolute;
    right: 5%;
    top: 50%;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    transform: translateY(-50%) rotate(45deg);
}
/* faq */
#faq .categoryMv_txt h2 {
  font-size: 36px;
}
#faq .categoryMv {
  background: url(/img/common/submv_bg.jpg) no-repeat top center /cover;
}
#faq .catenavi {
background: url(/img/common/favorite_bg.jpg) no-repeat top center /cover;
padding: 15px 0 10px;
border-bottom: 2px solid #d8b72d;
}
#faq .catenavi h3 {
  font-size: 24px;
  text-align: center;
  margin: 0 auto 10px;
}
.faqInner h2 {
  text-align: center;
  font-size: 28px;
  color: #967714;
  margin: 0 auto 20px;
}
.faqInner .tab-list {
  display: flex;
  margin: 0 auto 20px;
}
.faqInner .tab-item {
  background-color: #e8d496;
  border-left: 1px solid #cfc08c;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  width: 33%;
  padding: 13px 0;
  color: #676767;
  letter-spacing: 0;
  font-weight: 500;
}
.faqInner .tab-panel {
  display: none;
}
.faqInner .tab-item.active {
  background: linear-gradient(#c7ae61, #e8d494);
  border-top: 1.5px solid #967714;
  border-left: unset;
  color: #000000;
}
.faqInner .tab-panel.active {
  display: block;
  padding: 3%;
}
.faqInner .tab-panel.active h2 {
  font-size: 20px;
  font-weight: bold;
}
.faqInner_cont {
  margin: 0 auto 15px;
}
.faqTtl {
  line-height: 1.5;
  padding: 10px 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-bottom: 1px dotted #000;
}
.faqTtl::before {
  content: '';
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
display: inline-block;
width: 25px;
height: 2.5px;
background-color: #967714;
}
.faqTtl::after {
  content: '';
position: absolute;
right: 11.5px;
top: 50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
display: inline-block;
width: 2.5px;
height: 25px;
background-color: #967714;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.faqTtl.active::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
      -ms-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.faqTtl h3 {
  font-weight: 500;
  line-height: 1.5;
  width: calc(100% - 30px);
  padding-left: 1rem;
  text-indent: -1rem;
}
.faqTtl h3 span {
  color: #967714;
}
.faqTtl + .faq_accoContent {
  display: none;
}
.faq_accoContent {
  line-height: 1.5;
  padding-left: 1rem;
  text-indent: -1rem;
  padding-top: 10px;
}
.faq_accoContent span {
  color: #e03308;
}
@media only screen and (max-width: 1080px) {
  
}
@media only screen and (max-width: 860px) {

}
@media only screen and (max-width: 769px) {
 .category_choiceBtn {
  max-width: 100%;
 }
}