@charset "UTF-8";

#index section { padding: 50px 0; }
.index-title { margin-bottom: 30px; font-size: 1.6rem; line-height: 1.6rem; }
.index-more a {
  width: 100%;
  max-width: 240px;
  padding: 15px 0;
  position: relative;
  display: inline-block;
  border: 1px solid var(--color-primary);
  line-height: 1.4rem;
  text-align: center;
}
.index-more a::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  right: 15px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--color-primary);
  transition: .3s;
}
.index-more-white a {
  width: 100%;
  color: #fff;
  max-width: 240px;
  padding: 15px 0;
  position: relative;
  display: inline-block;
  border: 1px solid #fff;
  line-height: 1.4rem;
  text-align: center;
}
.index-more-white a::after {
content: '';
position: absolute;
top: calc(50% - 4px);
right: 15px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #ffffff; /* 白色に変更 */
transition: .3s;
}
.items__nav { margin-bottom: 20px; }
.items__nav li {
  margin-right: 1rem;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-secondary);
  line-height: 2rem;
  text-align: center;
  cursor: pointer;
  transition: .3s;
}
.items__nav li.is-current { background-color: var(--color-primary); border: none; color: #fff; }
.index__layout { flex-direction: column-reverse; }
.index__nav-sp { display: none; }

@media screen and (min-width: 801px) and (pointer: fine) {
  .index-more a:hover::after { right: 12px; }
  .index-more-white a:hover::after { right: 12px; }
  .items__nav li:hover { opacity: .6; }
}

@media screen and (max-width: 800px) {
  #index section { padding: 30px 0; }
  .index-title { color: var(--color-primary); text-align: center; }
  .index-more a { max-width: 100%; }
  .index-more-white a { max-width: 100%; }
  .items__nav { justify-content: center; }
  .index__layout { display: block; flex-direction: inherit; }
}

@media screen and (max-width: 640px) {
  #index article { margin-bottom: 30px; }
  .items__nav li { margin: 0 3px; padding: 7px 1rem; font-size: 1.1rem; line-height: 1.8rem; }
  .index__nav-sp { display: flex; justify-content: center; }
  .index__nav-sp li a { padding: 1.5rem 1rem; display: block; font-size: 1.1rem; line-height: 1.1rem; }
}



/* Swiper
--------------------------------------------------*/
.swiper-pagination-bullets { position: static; margin-top: 16px; } 
.swiper-pagination-bullet { width: 6px !important; height: 6px !important; margin: 0 8px 20px !important; background: #333 !important; }
.items__swiper { width: 100%; margin: 0 auto; }
.items__swiper .swiper-button-prev { width: 40px; height: 40px; left: auto; right: 99%; }
.items__swiper .swiper-button-next { width: 40px; height: 40px; left: 99%; }
.items__swiper .swiper-button-prev::after,
.items__swiper .swiper-button-next::after { content: ''; width: 12px; height: 12px; border: solid var(--color-primary); border-width: 1px 1px 0 0; }
.items__swiper .swiper-button-prev::after{ transform: rotate(-135deg) translate(-2px, 2px); }
.items__swiper .swiper-button-next::after { transform: rotate(45deg) translate(-2px, 2px); }
.items__swiper .swiper-button-disabled { opacity: 0; }
.items__swiper .swiper-pagination { margin-top: 50px; }
.items__swiper .swiper-scrollbar { max-width: 1100px; height: 3px; margin: 50px auto 0; }
.items__swiper .swiper-scrollbar-drag { background: #999; cursor: pointer; }
.item { width: 25%; padding: 0 20px; position: relative; transition: .3s; }
.item-img { margin-bottom: 10px; }
.item-title {margin-bottom: 8px;line-height: 2.2rem;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.item-price { font-size: 1.2rem; line-height: 1.2rem; }
.item-rank { position: absolute; top: 10px; left: 0; z-index: 1; background-color: #fff;
  padding: 0 5px 0 5px;}
.items__container { position: relative; }

@media screen and (min-width: 801px) and (pointer: fine) {
  .item:hover { opacity: .6; }
}

@media screen and (max-width: 1080px) {
  .items__swiper .swiper-button-prev { right: calc(103% - 40px); }
  .items__swiper .swiper-button-next { left: calc(103% - 40px); }
}

@media screen and (max-width: 800px) {
  .items { width: 100%; overflow: hidden; }
  .item { width: 30%; padding: 0 30px 0 0; }
  .items__swiper .swiper { padding-left: 5%; overflow: visible; }
  .items__swiper .swiper-button-prev,
  .items__swiper .swiper-button-next { display: none; }
  .items .items__swiper .swiper-scrollbar { width: 90%; }
}

@media screen and (max-width: 640px) {
  .item { width: 70%; }
  .item-img { margin-bottom: 5px; padding: 20px; }
  .items .items__swiper .swiper-scrollbar { margin-top: 30px; }
}



/* MV
--------------------------------------------------*/
.index__mv { position: relative; }

@media screen and (min-width: 801px) and (pointer: fine) {
  .index__mv a:hover { opacity: 1; }
}

@media screen and (max-width: 800px) {
  .index__mv .swiper-pagination { position: absolute; left: 0; bottom: 0; z-index: 1; }
}



/* Float Nav
--------------------------------------------------*/
.index__float-nav { width: 100%; height: 100%; background: #fff; overflow: hidden;}
.index__float-nav ul { padding-top: 10px; }
.index__float-nav li { padding: 0 1.5rem; white-space: nowrap; }
.index__float-nav .mCSB_scrollTools { bottom: 4px; }
.index__float-nav .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-bottom: 20px; }
.index__float-nav .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    margin: 7px auto;
    height: 3px;
    background-color: #999;
}
.index__float-nav .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    background-color: rgba(0, 0, 0, .1);
    height: 3px;
}
@media screen and (max-width: 1080px) {
  .index__float-nav ul { justify-content: flex-start; }
}



/* Topics News
--------------------------------------------------*/
.index__topics-news { margin-bottom: 30px; position: relative; background: #f5f5f5; }
.index__topics-news .inner { padding: 2.5rem 5% 1rem; }
.index__topics-close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 15px;
  right: 0;
  cursor: pointer;
}
.index__topics-close::before,
.index__topics-close::after {
  content: '';
  width: 13px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 10px;
  background: #929292;
}
.index__topics-close::before { transform: rotate(45deg); }
.index__topics-close::after  { transform: rotate(-45deg); }

.index__topics-lists li { margin-bottom: 1.5rem; font-size: 1.3rem; line-height: 2.3rem; }
.index__topics-lists li a { padding-left: 16px; position: relative; display: inline-block; }
.index__topics-lists li a::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--color-primary);
  transition: .3s;
}

@media screen and (max-width: 800px) {
  .index__topics-news { margin: 0; }
  .index__topics-news .inner {width: 100%;}
  .index__topics-close {top: 0;}
}
.index__topics dd p:not(.index__topics-title) {
    text-align: center;
}
.index__features .item-txt {
    text-align: center;
    line-height: 2rem;
}

/* Topics
--------------------------------------------------*/
.index__topics .index-title { display: none; }
.index__topics ul { margin-bottom: 50px; }
.index__topics li { width: 29%; position: relative; transition: .3s; }
.index__topics dd { padding-top: 10px; }
.index__topics-title { margin-bottom: 12px; font-size: 1.8rem; line-height: 3.2rem; text-align: center; }
.index__topics .index-more { text-align: right; }

@media screen and (min-width: 801px) and (pointer: fine) {
  .index__topics li:hover { opacity: .6; }
}

@media screen and (max-width: 800px) {
  .index__topics { margin-bottom: 30px; }
  .index__topics-title { font-size: 1.6rem; line-height: 2.8rem; }
}

@media screen and (max-width: 640px) {
  .index__topics { margin-bottom: 20px; }
  .index__topics ul { margin-bottom: 40px; }
  .index__topics li { width: 48%; }
  .index__topics li:first-child { width: 100%; margin-bottom: 30px; }
  .index__topics dt { text-align: center; }
  .index__topics dd { padding-top: 5px; font-size: 1.2rem; line-height: 2rem; }
  .index__topics-title {margin-bottom: 8px;font-size: 1.4rem;line-height: 2.4rem;}
}



/* Pickup
--------------------------------------------------*/
.index__pickup { margin-bottom: 60px; }
/* .index__pickup .index-title { display: none; } */
.index__pickup .items__swiper { opacity: 0; visibility: hidden; transition: .3s; }
.index__pickup .items__swiper.is-show { opacity: 1; visibility: visible; }
.pickup-recommend, .pickup-best { position: absolute; top: 0; left: 0; }

@media screen and (max-width: 800px) {
  .index__pickup { margin: 0; padding-top: 60px !important; }
}

@media screen and (max-width: 640px) {
  .index__pickup { padding-top: 40px !important; }
}



/* Features
--------------------------------------------------*/
.index__features { margin-bottom: 50px; padding: 100px 0 !important; background: #ededed; }
.index__features .index-title { display: none; }
.index__features .inner { width: 98%; max-width: 98%; }
.index__features .item { padding: 0 12px; }
.index__features .items__swiper .swiper-button-prev { top: 35%; left: 0; right: auto; background: #fff; }
.index__features .items__swiper .swiper-button-next { top: 35%; left: auto; right: 0; background: #fff; }
.index__features .items__swiper .swiper-scrollbar { width: 90%; }
.index__features .item-title { font-size: 1.8rem; line-height: 3.2rem; text-align: center; }
.index__features-bnr { width: 100%; max-width: 1100px; margin: 80px auto 0; }
.index__features-bnr li { width: 23%; margin: 0 1%; line-height: 0; }

@media screen and (max-width: 800px) {
  .index__features { margin-bottom: 30px; padding: 70px 0 !important; }
  .index__features .inner { width: 100%; max-width: 100%; }
  .index__features .item { width: 40%; }
  .index__features .item-title { font-size: 1.6rem; line-height: 2.8rem; }
  .index__features-bnr { margin-top: 60px; }
}

@media screen and (max-width: 640px) {
  .index__features { margin-bottom: 20px; padding: 50px 0 !important; }
  .index__features .items__swiper .swiper { padding: 0 2%; }
  .index__features .swiper-wrapper { flex-wrap: wrap; transform: none !important; }
  .index__features .items__swiper .swiper-scrollbar { display: none; }
  .index__features .item { width: 50%; margin-bottom: 30px; padding: 0 1%; }
  .index__features .item-title { padding: 0 2%; font-size: 1.4rem; line-height: 2.2rem; }
  .index__features .item-txt {padding: 0 2%;font-size: 1.2rem;line-height: 2rem;display: none;}
  .index__features-bnr { width: 90%; margin-top: 30px; justify-content: space-between; }
  .index__features-bnr li { width: 49%; margin: 0 0 2%; }
  .index__features-bnr li.w100 { width: 100%; }
}



/* News
--------------------------------------------------*/
.index__news .index-title { display: none; }
.index__news-list li { width: 48%; margin-bottom: 4%; }
.index__news-list dl { position: relative; }
.index__news-list dt { width: 35%; }
.index__news-list dd { width: 60%; padding-top: 2rem; }
.index__news-date { position: absolute; top: 0; left: 40%; font-size: 1.2rem; line-height: 1.2rem; }
.index__news-title { margin-bottom: 5px; font-size: 1.6rem; line-height: 2.6rem; }
.index__news-txt { margin-bottom: 20px; }
.index__news .index-more { width: 70%; }
.index__news .index-more a { padding: 12px; border-color: #ededed; }

@media screen and (max-width: 800px) {
  .index__news { padding-bottom: 0 !important; }
  .index__news-list { display: block; }
  .index__news-list li { width: 100%; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #ededed; }
  .index__news-list dt { width: 27%; }
  .index__news-list dd { width: 68%; padding: 0; text-align: right; }
  .index__news-date { margin-top: 5px; position: static; text-align: center; }
  .index__news-title, .index__news-txt { text-align: left; }
  .index__news .index-more { width: auto; display: inline-block; }
  .index__news .index-more a {
    padding: 10px 0 10px 12px;
    border: none;
    text-align: right;
    text-decoration: underline;
  }
  .index__news .index-more a::after { left: 0; right: auto; }
}

@media screen and (max-width: 640px) {
  .index__news-list li { margin-bottom: 20px; padding-bottom: 10px; }
  .index__news-title { font-size: 1.4rem; line-height: 2rem; }
  .index__news-txt { margin-bottom: 5px; font-size: 1.2rem; line-height: 2rem; }
  .index__news .index-more a { font-size: 1.2rem; line-height: 1.2rem; }
}



/* Ranking
--------------------------------------------------*/
.index__ranking .items__swiper { opacity: 0; visibility: hidden; transition: .3s; }
.index__ranking .items__swiper.is-show { opacity: 1; visibility: visible; }
.ranking-basemake, .ranking-pointmake { position: absolute; top: 0; left: 0; }

@media screen and (max-width: 800px) {
  .index__ranking .items__nav li .d-sp { display: none; }
}

@media screen and (max-width: 640px) {
  .index__ranking .items__nav li { width: 29%; }
  .index__ranking .items__nav li .d-sp { display: block; }
}



/* Products
--------------------------------------------------*/
.index__products-caption {
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #ededed;
  font-size: 1.8rem;
  line-height: 1.8rem;
}
.index__products .container { margin-bottom: 60px; }
.index__products .container figure { margin-bottom: 10px; line-height: 0; }
.index__products .container figure img { width: auto; height: 90px; }
.index__products .container li {
  margin-bottom: 4rem;
  padding: 0 1rem;
  font-size: 1.3rem;
  line-height: 2rem;
  text-align: center;
}
.index__products-category { width: 100%; }
.index__products-category ul { padding-right: 3%; }
.index__products-category li { width: 16.66%; }
.index__products-line { width: 40%; }
.index__products-line .index__products-caption { padding-left: 5%; }
.index__products-line ul { padding-left: 3%; }
.index__products-line li { width: 50%; padding-bottom: 2rem !important; }

.index__products .block-global-search { margin-bottom: 50px; }
.index__products .index-more { width: 340px; margin: 0 auto; }
.index__products .index-more a {
  width: 100%;
  max-width: 100%;
  padding: 20px 0;
  background: #ededed;
  border: none;
  font-size: 1.8rem;
  line-height: 1.8rem;
}

@media screen and (max-width: 800px) {
  .index__products-caption { padding: 10px 0; border: none; text-align: center; }
  .index__products .container { margin-bottom: 30px; display: block; }
  .index__products .container li .d-pc { display: block; }
  .index__products-category,
  .index__products-line { width: 100%; }
  .index__products-category { margin-bottom: 20px; border: none; }
  .index__products-line .index__products-caption,
  .index__products-line ul { padding-left: 0; }
  .index__products-line li { width: 25%; padding-bottom: 0 !important; }
}

@media screen and (max-width: 640px) {
  .index__products-caption { padding: 0; font-size: 1.6rem; line-height: 1.6rem; }
  .index__products .container li { margin-bottom: 2rem; }
  .index__products .container li .d-pc { display: none; }
  .index__products-category { margin-bottom: 40px; }
  .index__products-category li,
  .index__products-line li { width: 50%; }
  .index__products .block-global-search { margin-bottom: 30px; }
  .index__products .index-more { width: 90%; }
  .index__products .index-more a { font-size: 1.6rem; line-height: 1.6rem; }
}



/* Information
--------------------------------------------------*/
.index__info .container {margin-bottom: 30px;padding: 0 40px;border: 1px solid #ededed;}
.index__info .container li { padding: 15px 0; border-bottom: 1px solid #ededed; }
.index__info .container li:last-child { border-bottom: none; }
.index__info-date { flex: 0 0 auto; }
.index__info-title { width: 95%; margin-left: 5%; }
.index__info-more { text-align: right; }
.index__info-more a { text-decoration: underline; }

@media screen and (min-width: 801px) and (pointer: fine) {
  .index__info-more a:hover { text-decoration: none; }
}

@media screen and (max-width: 800px) {
  .index__info .container { padding: 0; border: none; }
  .index__info .container ul { border-top: 1px solid #ededed; }
}

@media screen and (max-width: 640px) {
  .index__info-date, .index__info-title { width: 100%; margin: 0; display: block; }
  .index__info .container li:last-child { border-bottom: 1px solid #ededed; }
  .index__info .container li a { display: block; }
}