/*メインビジュアル*/
 .mainvisual {
  position: relative;
  margin-top: -20px;
  overflow: hidden;
}
.mainvisual.back-image {
 padding: 0;
}
@media screen and (max-width: 1024px) {
.mainvisual {
  margin-top: 0;
　}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mainvisual {
  height: auto!important;
　}
}

/*メインビジュアル文言*/
.main-text1, .main-text2 {
  padding: 2.5%;
 z-index: 5;
 background-color: #3B833D;
}
@media screen and (max-width: 767px) {
.main-text1, .main-text2 {
  padding: 4% 2.5%;
 }
}

.main-text1 {
 position: absolute;
 top: 20px;
 left: 180px;
}
@media screen and (max-width: 767px) {
.main-text1 {
  top: 38px;
  left: 20px;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.main-text1 {
  left: 60px;
 }
}


.main-text2 {
 position: absolute;
 bottom: 0;
 right: 180px;
}
@media screen and (max-width: 767px) {
.main-text2 {
  right: 20px;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.main-text2 {
  right: 60px;
 }
}

.main-text1 p, .main-text2 p{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1.2rem;
  color: #fdfdfd;
}
@media screen and (max-width: 767px) {
.main-text1 p, .main-text2 p {
  font-size: .9rem;
 }
}

.main-text1 p span, .main-text2 p span {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
.main-text1 p span, .main-text2 p span {
  font-size: 1.5rem;
 }
}


.main-text1 p .main-text1-last {
 display: block;
 text-align: right;
 margin-top: 25px;
 font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.main-text1 p .main-text1-last {
 margin-top: 35px;
 font-size: .9rem;
 }
}

/*カルーセル*/
.main-list {
 margin: 0 auto;
 width: 100%;
 overflow: hidden;
}

.main-list li {
 margin: 0 2%;
}
@media screen and (max-width: 1024px) {
.main-list li {
  margin: 0;
 }
}

.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px 40px 0 0;
}
@media screen and (max-width: 1024px) {
.main-img {
  height: 74vh;
  border-radius: 0;
 }
}

.main-list-sp {

}

@media screen and (max-width: 767px) {
 .main-list-sp {
 display: block;
 }
}


/*メインバナー*/
.main-under-banner {
display: flex;
justify-content: center;
}
@media screen and (max-width: 767px) {
.main-under-banner {
flex-direction: column;
align-items: center;
}
}


/*カテゴリで探す*/
.category-contents {
  display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .category-contents {
   grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .category-contents {
   grid-template-columns: 1fr 1fr 1fr;
  }
}

.category-contents li { 
 margin-bottom: 30px;
}

.category-contents li a {
  display: flex;
  align-items: center;
 color: #fdfdfd;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .category-contents li a{
  flex-direction: column;
  }
}

.category-image {
 width: 80px;
  height: 80px;
  display: inline-block;
  margin-right: 15px;
}
@media screen and (max-width: 767px) {
  .category-image {
  margin-right: 0;
  margin-bottom: 10px;
  }
}

/*商品一覧*/
.product-list {
 display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) { 
.product-list {
  justify-content: space-between;
　}
}

.product-item {
 width: calc(90%/4);
margin: 0 10px 30px 10px;
}
@media screen and (max-width: 767px) { 
.product-item {
 width: calc(90%/2);
margin: 10px 5px;
　}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.product-item {
 width: calc(90%/3);
margin: 10px;
　}
}

.item-image {
 width: 100%;
  height: 270px!important;
  object-fit: cover;
  margin: 0 auto 10px auto;
  text-align: center;
}
@media screen and (max-width: 767px) { 
.item-image {
  height: 160px!important;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.item-image {
  height: 220px!important;
　}
}

.item-name {
 width: 100%;
}

.item-price {
  margin-top: 10px;
font-weight: bold;
 text-align: right;
}

.soldout {
  text-align: right;
 color: red;
}

.extra {
 text-align: center;
}

.c-btn {

}

/*ランキング*/
.ranking-container {
position: relative;
}

.ranking-slider .item-image {
}

 .ranking-badge {
display: inline-block;
   position: absolute;
   color: #fdfdfd;
   font-weight: bold;
   text-align: center;
   padding: 15px;
   margin: 5px;
   clip-path: polygon(100% 0, 100% 100%, 50% 88%, 0 100%, 0 0);
   top: -5px;
   left: -5px;
}

.ranking-badge.rank1 {
 background-color: #B99C3F; /* 1位のバッジの背景色 */
}

.ranking-badge.rank2 {
 background-color: #AFAFAF; /* 2位のバッジの背景色 */
}

.ranking-badge.rank3 {
 background-color: #C37C40; /* 3位のバッジの背景色 */
}

.ranking-badge.rank4 {
 background-color:  #606060; /* 4位のバッジの背景色 */
}

.ranking-badge.rank5 {
 background-color: #606060; /* 5位のバッジの背景色 */
}

.ranking-badge.rank6 {
 background-color: #606060; /* 6位のバッジの背景色 */
}

.is-hidden {
 display: none;
}

#ranking-section a, #ranking-section p {
 color: #fdfdfd;
}

.c-btn::after {
  top: 16px;
 transform: rotate(135deg);
}
.c-btn:hover {
 opacity: 0.6;
}

/*ランキングスライドボタン*/
#ranking-section .slick-prev,#ranking-section .slick-next {
background-color: #fdfdfd;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 top: 28%;
 z-index: 3;
}
@media screen and (max-width: 767px) {
#ranking-section .slick-prev,#ranking-section .slick-next {
 top: 24%;
 }
}

#ranking-section .slick-prev::before, #ranking-section .slick-next::before {
  content: "";
  position: absolute;
  top:  40%;
  left: 30%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-left: 3px solid #3B833D;
  border-top: 3px solid #3B833D;
  transition: all 0.4s ease;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #ranking-section  .slick-prev:before, #ranking-section  .slick-next:before {
    top: 15px;
  }
}
#ranking-section .slick-prev {
  left: -30px;
}
@media screen and (max-width: 767px) {
  #ranking-section .slick-prev {
    left: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
#ranking-section .slick-prev {
  left: -12px;
 }
}

#ranking-section .slick-prev:before {
  transform: rotate(-45deg);
   left: 18px;
}
@media screen and (max-width: 767px) {
 #ranking-section .slick-prev:before {
    left: 16px;
  }
}
#ranking-section .slick-next {
  right: -30px;
}
@media screen and (max-width: 767px) {
#ranking-section .slick-next {
    right: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
#ranking-section .slick-next {
    right: -12px;
  }
}

#ranking-section .slick-next:before {
  left: 14px;
  transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
#ranking-section .slick-next:before {
    right: 11px;
  }
}

/*和香について*/
.top-about-contents {
 display: flex;
  justify-content: space-between; 
  align-items: center;
}
@media screen and (max-width: 767px) {
.top-about-contents {
 flex-direction: column;
 }
}

.top-about-image1 {
 display: flex;
 flex-direction: column;
  width: 28%;
}
@media screen and (max-width: 767px) {
.top-about-image1 {
  width: 100%;
  order: 2;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
.top-about-image1 {
  width: 22%;
  }
}

.top-about-text {
 width: 30%;
 color: #fdfdfd;
}
@media screen and (max-width: 767px) {
.top-about-text {
  margin-bottom: 30px;
  width: 100%;
  order: 1;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
.top-about-text {
  width: 50%;
  }
}

.top-about-text  h3 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.top-about-text .btn-block {
 margin-top: 30px;
}

.top-about-image1 img {
 margin-bottom: 20px;
}


/*法人向け卸売販売について*/
.back-image4 {
   background-image: url('https://file001.shop-pro.jp/PA01508/814/images/back-image/nagoyaka-back-wholesale.jpg');
  padding: 40px 0;
  background-position: 100% 20%;
  background-size: cover;
}

@media screen and (max-width: 767px) {
 .back-image4 {
   background-image: url('https://file001.shop-pro.jp/PA01508/814/images/back-image/nagoyaka-back-wholesale-sp.jpg');
  }
}

.wholesale-text {
 max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .wholesale-text {
   max-width: 95%;
  }
}

.wholesale-text p {
 display: inline-block;
 text-align: left;
}

/*Instagram*/
.insta-contents {

}

/*和香公式SNS*/
.sns-contents {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.sns-contents li {
 width: 21%;
}
@media screen and (max-width: 767px) {
  .sns-contents li {
    width: 48%;
    margin-bottom: 10px;
 }
}

/*ブログ*/
#blog-list {
 display: flex;
 justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#blog-list {
 flex-direction: column;
 }
}

#blog-list li {
 width: calc(95% / 4);
 margin: 0 15px;
}
@media screen and (max-width: 767px) {
#blog-list li {
 width: 90%;
 margin-bottom: 20px;
 }
}

.blog-card a { 
 color: #fdfdfd;
}

@media screen and (max-width: 767px) {
 .blog-meta {
 margin-left: 10px;
 }
}

.blog-date {
 margin-top: 5px;
}

.blog-title {
 margin-top: 5px;
font-weight: 600;
}

/*お知らせ*/
.infomation {
 text-align: center;
}
@media screen and (max-width: 767px) {
 .infomation {
 text-align: left;
 }
}

.infomation ul {
display: inline-block;
}
@media screen and (max-width: 767px) {
 .infomation ul {
 display: block;
 }
}

.infomation ul li {
 font-size: 1.2rem;
 text-align: left;
 line-height: 2.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .infomation ul li {
 font-size: 1rem;
 }
}

.infomation ul li time {
font-weight: 600;
 margin-right: 10px;
}

.pc-none {
display: none;
}

@media screen and (max-width: 767px) { 
.pc-none {
display: block;
}
}

.infomation ul li a {
 font-size: 1.2rem;
}

@media screen and (max-width: 767px) { 
 .infomation ul {
 margin-top: 30px;
}
  
.infomation ul li {
 font-size: 1rem;
 line-height: 2rem;
}
  
.infomation ul li a {
 font-size: 1rem;
　}
}