@charset "utf-8";
html {
  font-size: 62.5%;
}

:root {
  --black: #333333;
  --sp-bottom: 8rem;
  --pc-bottom: 16rem;
}

main {
  width: 100%;
  color: var(--black);
  counter-reset: number 0;
}

.bnr_box {
  padding-bottom: 6.8rem;
}

.l-title {
  font-size: 2.4rem;
  text-align: center;
  color: var(--black);
  margin-bottom: 3.6rem;
}

.topic-bnr {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.img-mb {
  margin-bottom: 0.4rem;
}

.topic-bnr figcaption {
  font-size: 1.6rem;
  color: var(--black);
  font-weight: 400;
  word-wrap: break-word;
  word-break: keep-all;
  width: 100%;
  text-align: center;
  text-wrap: balance;
}

.inner-bnr_box {
  padding-bottom: 6.8rem;
}

.l-sub_title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.category-bnr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1rem;
}

.category-bnr h4 {
  font-size: 1.4rem;
  margin-bottom: 0.5lh;
  font-weight: 600;
}

.category-bnr figcaption {
  font-size: 1.2rem;
  color: var(--black);
}

/*========================バナーと説明==================================*/
.top {
  margin-bottom: var(--sp-bottom);
}
.top-img {
  margin-bottom: 4rem;
}

.top-text {
  font-size: 1.4rem;
  width: 90%;
  margin: auto;
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: 8rem;
}

/*========================/バナーと説明==================================*/

/*========================ポイント==================================*/
.point h3 {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.point .list-box {
  border: 1px solid var(--black);
}

.point ul {
  width: fit-content;
  margin: auto;
  list-style: none;
  padding: 2rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
}

.point li::before {
  content: "";
  position: absolute;
  top: calc((1.4rem + 0.4rem) / 2);
  left: 0;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--black);
  border-radius: 50%;
}

.point li {
  font-size: 1.4rem;
  position: relative;
  align-items: center;
  padding: 0.2rem 0;
  padding-left: 1em;
}
/*========================/ポイント==================================*/

/*========================ランキング==================================*/
.ranking {
  padding-bottom: var(--sp-bottom);
}

.ranking-first {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 4rem;
}

.ranking-text {
  order: 2;
  padding: 0.5rem;
  position: relative;
}

.ranking-text h4 {
  font-size: 2rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ranking-text .top-num {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.ranking-text .desc {
  font-size: 1.6rem;
  margin-bottom: 2.5lh;
}

.ranking-first .bottom-text {
  display: grid;
  gap: 0.3rem;
  place-content: end;
  position: absolute;
  bottom: 0;
  right: 0;
}

.bottom-text p {
  text-align: end;
  font-size: 1.4rem;
}

.bottom-text .num {
  display: none;
}

.bottom-text .bottom-price span {
  font-size: 0.85em;
}

.ranking-image {
  position: relative;
}

.ranking-image img {
  order: 1;
}

.ranking-image::before {
  content: "1";
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1rem;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.4rem;
  color: #fff;
  background-color: #1b1b1b;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
}

.ranking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0;
  margin-bottom: 4rem;
  counter-reset: number 1; /*変数"number"を2から始まるように設定 */
}

.inner-card {
  position: relative;
}

.inner-card::before {
  counter-increment: number 1; /*変数"number"が1づつ増えるように設定 */
  content: counter(number) ""; /*変数"number"の値を表示 */
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
  color: #fff;
  background-color: #1b1b1b;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
}

.ranking-card {
  display: grid;
  margin-bottom: 2rem;
}

.ranking-card h4 {
  order: 2;
  font-weight: normal;
  font-size: 1.4rem;
  text-align: center;
}

.ranking-card img {
  order: 1;
  margin-bottom: 1.4rem;
}

.ranking .more {
  font-size: 1.4rem;
  border: 1px solid var(--black);
  display: block;
  width: fit-content;
  padding: 0.5rem 1rem;
  margin: auto;
}

/*========================/ランキング==================================*/

/* =======================Tablet================================= */
@media screen and (min-width: 640px) {
  .bnr_box {
    padding-bottom: 7.6rem;
  }

  .topic-bnr {
    grid-template-columns: 1fr 1fr;
    gap: 7.5rem;
  }

  .l-sub_title {
    font-size: 2rem;
    margin-bottom: 2.4rem;
  }

  .category-bnr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .category-bnr h4 {
    font-size: 1.5rem;
  }

  .category-bnr figcaption {
    font-size: 1.4rem;
  }

  .inner-bnr_box {
    padding-bottom: 8.4rem;
  }

  /*========================バナーと説明==================================*/
  .top {
    margin-bottom: var(--pc-bottom);
  }

  .top-text {
    width: 80%;
  }
  /*========================/バナーと説明==================================*/

  /*========================ポイント==================================*/
  .point h3 {
    font-size: 1.4rem;
  }

  .point ul {
    padding: 2rem 3.5rem;
  }

  .point li::before {
    top: calc((1em + 0.6rem) / 2);
  }

  .point li {
    font-size: 1.4rem;
    padding: 0.3rem 0;
    padding-left: 1em;
  }
  /*========================/ポイント==================================*/

  /*========================ランキング==================================*/
  .ranking {
    padding-bottom: var(--pc-bottom);
  }

  .ranking-first {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 4.5rem;
  }

  .ranking-text {
    padding: 0.8rem;
  }

  .ranking-text h4 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .ranking-text .desc {
    font-size: 1.6rem;
  }

  .ranking-image::before {
    top: 2rem;
    left: 2rem;
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.8rem;
  }

  .ranking-grid {
    gap: 1.5rem;
  }

  .inner-card::before {
    top: 1.5rem;
    left: 1.5rem;
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }

  .ranking-card {
    margin-bottom: 2.5rem;
  }

  .ranking-card h4 {
    font-size: 1.4rem;
  }

  .ranking-card img {
    margin-bottom: 1.4rem;
  }

  .ranking .more {
    font-size: 1.6rem;
    padding: 0.7rem 1.2rem;
  }
  /*========================/ランキング==================================*/
}

/* =========================PC================================= */
@media screen and (min-width: 900px) {
  .bnr_box {
    padding-bottom: 8.4rem;
  }
  .l-title {
    margin-bottom: 3.6rem;
  }

  .l-sub_title {
    font-size: 2rem;
    margin-bottom: 2.8rem;
  }

  .img-mb {
    margin-bottom: 0.8rem;
  }

  .topic-bnr figcaption {
    font-size: 1.6rem;
  }

  .topic-bnr {
    gap: 10rem;
  }
  /*========================バナーと説明==================================*/
  .top-text {
    width: 70%;
    font-size: 1.6rem;
  }
  /*========================/バナーと説明==================================*/

  /*========================ポイント==================================*/

  .point ul {
    padding: 3rem 5rem;
  }

  .point li {
    font-size: 1.6rem;
    padding: 0.3rem 0;
    padding-left: 1em;
  }

  /*========================/ポイント==================================*/

  /*========================ランキング==================================*/
  .ranking-first {
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: 2rem;
    margin-bottom: 5rem;
  }

  .ranking-text h4 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
  }

  .ranking-text .top-num {
    display: none;
  }

  .ranking-text .desc {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  .ranking-first .bottom-text {
    display: grid;
    gap: 0.3rem;
    place-content: end;
    margin-top: 2rem;
  }

  .bottom-text p {
    text-align: end;
    font-size: 1.6rem;
  }

  .bottom-text .num {
    display: inline;
  }

  .ranking-image::before {
    top: 2.5rem;
    left: 2.5rem;
    width: 5rem;
    height: 5rem;
    font-size: 2.2rem;
  }

  .ranking-grid {
    gap: 2rem;
  }

  .inner-card::before {
    top: 2rem;
    left: 2rem;
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.8rem;
  }

  .ranking-card {
    margin-bottom: 3rem;
  }

  .ranking-card h4 {
    font-size: 1.6rem;
  }

  .ranking-card img {
    margin-bottom: 1.6rem;
  }
  /*========================/ランキング==================================*/
}

.fs-c-productPrice--listed:has(+ .fs-c-productPrice--selling) {
    display: none;
}
.ranking{
padding-bottom: 0 !important;
}
.fs-c-productListItem {
  position: relative;
}
.fs-c-productListCarousel .slick-track {
    opacity: unset !important;
    width: auto !important;
    transform: none !important;
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    gap: 3px;
    margin-top: 10px;
}
/*価格以下下の商品リスト非表示
.slick-slide[data-slick-index=""],
.slick-slide[data-slick-index="4"],
.slick-slide[data-slick-index="5"] {
    display: none !important;
}
*/
.fs-c-productMark {
    align-items: center;
}
.fs-c-productPrice.fs-c-productPrice--member{
  display:none;
}
.fs-c-productListItem__control.fs-c-buttonContainer{
  display:none;
}
.fs-c-productPrice__main__label{
  display:none;
}
.fs-c-productPrice__main {
  color:#65563d;
  font-size: 1.4rem !important;
}
.fs-c-productPrice__main__price.fs-c-price, .fs-c-productPrice__addon,.fs-c-price__currencyMark, .fs-c-price__value{
  color:#65563d;
}
.fs-c-slick .slick-list {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    margin: auto;
    padding: 0;
}
  .fs-c-productName__name {
       font-size: 15px !important;
       color:#65563d;
    text-align: left;
  
  }
  .fs-c-productName__copy, .fs-c-productName__variation {
       font-size: 1.4rem !important;
       margin-bottom: 8px !important;
       color:#65563d;
  
  }
  .fs-c-slick .slick-track:before, .fs-c-slick .slick-track:after {
    display:none;
  }
  .fs-c-productListCarousel .fs-c-slick img{
    max-width: 300px;
  
  }
  .fs-c-productListItem form > *:not(.fs-c-productListItem__productName), div .fs-c-productListItem > *:not(.fs-c-productListItem__productName) 
  {
       margin-bottom: 10px;
  }
  .fs-c-buttonContainer {
     justify-content: left !important;
     padding: 0px;
  }
  
  .fs-c-heading.fs-c-heading--page{
    font-size: 2rem !important;
  }
.ranking1 .slick-slide:nth-child(1) .fs-c-productListItem__imageContainer::before {
  
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  width: 60px;
  height: 60px;
  background-image: url('https://www.pourvous.co.jp/common/img_ranking1_1.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.ranking1 .slick-slide:nth-child(2) .fs-c-productListItem__imageContainer::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  width: 60px;
  height: 60px;
  background-image: url('https://www.pourvous.co.jp/common/img_ranking1_2.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking1 .slick-slide:nth-child(3) .fs-c-productListItem__imageContainer::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  width: 60px;
  height: 60px;
  background-image: url('https://www.pourvous.co.jp/common/img_ranking1_3.png');
  background-size: contain;
  background-repeat: no-repeat;
}
a img:hover, a img:active, a img:focus {
  opacity: 1;
}
.fs-c-productListItem__imageContainer::before {
  transition: opacity 0.3s ease-in-out; 
}
.ranking1 .slick-slide:nth-child(4) .fs-c-productListItem__imageContainer::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  width: 60px;
  height: 60px;
  background-image: url('https://www.pourvous.co.jp/common/img_ranking1_4.png');
  background-size: contain;
  background-repeat: no-repeat;
}

body {
    font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}
.featured__pointRanking .flex li {
width: 100%;
margin: 0 0 25px;
}
.featured__pointRanking .flex li:first-of-type {
width:100%;    margin: 0 0 25px;
}

h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  p {
      color: black;
      text-align: center;
      font-size: 1.3rem;
      margin: 0 auto;
  }
  .pc_none {
      display: none;
  }
  
  .sp_none {
      display: block;
  }
.featured .flex {
      display: flex;
      flex-wrap: wrap;
      margin: 20px 0 20px 0;
  }

.featured__pointRanking dd {
  margin: 0 0 35px;
  color: #000;
  }
.featured__pointRanking dt {
      font-size: 1.6rem;
      font-weight: bold;
      color: #000;
  }
.featured__pointRanking .flex li h4, .featured__pointRanking .flex li p, .featured__pointRanking .menu-list li h4 {
      margin: 5px 0 10px;
      padding: 0 1rem;
  }
  
.featured__pointRanking .image-wrapper h2 {
      color: #000;
      font-size: 1.4rem;
      font-weight: 600;
      min-width: 120px;
      text-align: left;
      margin:5px 0 12px 0;
  }
  
.featured__pointRanking .image-wrapper p{
      color: #000;
      text-align: left;
  }
  
ul.flex.justify-content-center{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-content: center;
      padding: 0;
      list-style: none;
      gap:1px;
  }
.main_visual {
    margin: auto;
    padding: 0 4vw;
    text-align: center;
    margin-bottom: 80px;
}
.main_visual-1 {
    margin: auto;
    padding: 0 4vw;
    text-align: center;
    margin-bottom: 40px;
}
.top-bnr_4 .best-seller-bnr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    place-items: center;
} 

.menu-list {
  max-width: 670px;
      display: flex;
      justify-content: center;
      gap: 10px;
      padding: 0;
      list-style: none;
      margin-bottom: 100px;
}
ul.menu-list.justify-content-center {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-content: center;
      padding: 0;
      gap:1px;
      margin: auto;
      list-style: none;
  }
.menu-list li {
      flex: 1;
      max-width: 240px;
      max-width: calc(100% / 3 - 20px); /* 3 columns with spacing */
}
.menu-btn {
    text-align: center;
    position: relative;
    margin-bottom: 2px;
}
.menu-btn a {
      display: inline-block;
      padding: 20px 20px;
      font-size: 12px;
      width:220px;
      border: solid 1px #444;
      color: #000;
      text-decoration: none;
      transition: 0.3s;
  }
  .more-btn-2 a .logo {
    display: flex;
    justify-content: center;
    width: 100px;
    margin: auto;
    height: 30px;
    background-image: url("https://www.pourvous.co.jp/category02/common/pourvous.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.more-btn-2 a:hover .logo {
    background-image: url("https://www.pourvous.co.jp/category02/common/pourvous-wh.png");
}

.more-btn-2 a .logo-atlo {
    display: flex;
    justify-content: center;
    width: 60px;
    margin: auto;
    height: 40px;
    background-image: url(https://www.pourvous.co.jp/category02/common/atlo.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.more-btn-2 a:hover .logo-atlo {
    background-image: url("https://www.pourvous.co.jp/category02/common/atlo.png");
}
.more-btn-area-1 {
    justify-content: center;
    display: flex;
    gap: 10px;
    margin-top: 100px;
    margin-bottom: 200px;
}
.more-btn-2 {
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}

.more-btn-2 a {
    display: inline-block;
    padding: 20px 20px 0px 20px;
    font-size: 12px;
    width:260px;
    border: solid 1px #444;
    color: #000;
    text-decoration: none;
    transition: 0.3s;
}
.more-btn-2 a:hover {
  background-color: #444;
  color: white;
}

.int-wrapper{
    width: 77%;
    margin: auto;
}
  
.text-center.menu {
      font-size: 16px;
      text-align: center;
      margin: 40px 0 20px 0;
  }
.text-center.more {
      font-size: 16px;
      text-align: center;
      margin: 40px 0 0px 0;
  }
.selection-title .text-center.bold {
    font-weight: 600;
    text-align: center;
    color: #65563d;
    font-size: 24px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
  .selection-title .text-center.bold {
    font-size: 14px; /* 必要に応じて調整可 */
    margin-bottom: 16px; /* スマホ用に余白も少し調整 */
  }
}

.selection-title-atlo .text-center.bold {
    font-weight: 600;
    text-align: center;
    color: #65563d;
    font-size: 24px;
    margin-bottom: 20px;
}
.selection-title-1 .text-center.bold {
    font-weight: 600;
    text-align: center;
    color: #65563d;
    font-size: 24px;
    margin-bottom: 20px;
}
.selection-title.selection-title-atlo.selection-title-1 h2{
  margin-top: 100px;
}
.selection-title h2{
  margin-top: 100px;
}
.selection-title h2 img{
 margin: 0 auto;
 margin-bottom: 15px;
 width: 200px;
 display: block; 
 justify-content: center;
 margin-top: 14px;
}


.selection-title-allbrands {
  text-align: center;
  margin-bottom: 20px;
}

.allbrands-logo {
  max-width: 270px;     
  height: auto;          
  display: block;
  margin: 0 auto 10px;
  margin-bottom: -10px;
}

@media (max-width: 480px) {
  .allbrands-logo {
    max-width: 200px;
  }
}

.ranking-subtitle {
    font-weight: 600;
    text-align: center;
    color: #65563d;
    font-size: 24px;
    margin-bottom: -2px;
}

@media (max-width: 480px) {
  .ranking-subtitle {
    font-size: 14px;
    margin-bottom: -5px;
    margin-top: 30px;
  }
}

/* タブレット（481px〜768px） */
@media (min-width: 481px) and (max-width: 768px) {
  .ranking-subtitle {
    font-size: 15px;
    margin-bottom: -5px;
  }
}

.selection-title-atlo h2 img {
    margin: 0 auto;
    margin-bottom: 10px;
    width: 80px;
    display: flex;
    justify-content: center;
}
.selection-title-1 h2 img {
    margin: 0 auto;
    margin-bottom: 10px;
    max-width: 45px;
    display: flex;
    justify-content: center;
}
.selection-title-1 .subtitle {
    position: relative;
    margin: 0 0 30px;
    padding: 0 2rem;
}
.selection-title-1 .subtitle::before {
    left: -15%;
    transform: rotate(-45deg);
}
.selection-title-1 .subtitle::after {
    right: -15%;
    transform: rotate(45deg);
}
.selection-title-1 .subtitle::before, .selection-title-1 .subtitle::after {
    content: '';
    position: absolute;
    width: 1px;
    top: 10px;
    height: 100px;
    background-color:#65563d;
}
.text_int {
    margin: 5px auto;
    width: 80%;
    line-height: 2;
    position: relative;
    padding-bottom: 20px;
}
.text_int p{
  width: 80%;
  color: #65563d;
  font-weight: 500;
}
  
  
@media screen and (max-width: 900px) {
    
ul.menu-list.justify-content-center {
    max-width: 549px;
}
  .menu-btn {
    text-align: center;
    position: relative;
    margin-bottom: 0px;
}
  .menu-btn a {
      display: inline-block;
      padding: 20px 20px;
      font-size: 12px;
      width:180px;
      border: solid 1px #444;
      color: #000;
      text-decoration: none;
      transition: 0.3s;
  }
   }
@media screen and (max-width: 640px) {
  .fs-c-productName__name {
       font-size: 1.4rem !important;
       color:#65563d;
  
  }
  .fs-c-productName__copy, .fs-c-productName__variation {
       display: none;
  
  }
.fs-c-productListCarousel .slick-slide {
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    vertical-align: top;
    border: none;
}
.fs-c-productListCarousel .slick-track {
  grid-template-columns: repeat(2, 1fr);
       
}
 .fs-c-slick .slick-list {
        width: 100%;
      }
.ranking1 .slick-slide:nth-child(1) .fs-c-productListItem__imageContainer::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 5px;
    width: 35px;
    height: 35px;
    background-image: url(https://www.pourvous.co.jp/common/img_ranking1_1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.ranking1 .slick-slide:nth-child(2) .fs-c-productListItem__imageContainer::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 5px;
    width: 35px;
    height: 35px;
    background-image: url(https://www.pourvous.co.jp/common/img_ranking1_2.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.ranking1 .slick-slide:nth-child(3) .fs-c-productListItem__imageContainer::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 5px;
    width: 35px;
    height: 35px;
    background-image: url(https://www.pourvous.co.jp/common/img_ranking1_3.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.ranking1 .slick-slide:nth-child(4) .fs-c-productListItem__imageContainer::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 5px;
  width: 35px;
  height: 35px;
  background-image: url(https://www.pourvous.co.jp/common/img_ranking1_4.png);
  background-size: contain;
  background-repeat: no-repeat;
}
  .main_visual {
    margin: auto;
    padding: 0;
}
.int-wrapper {
    width: 100%;
    margin: auto;
    
}
.text_int p{
  width: 100%;
}
.selection-title .text-center.bold .allbrands-logo .ranking-subtitle {
    font-weight: 600;
    color: #65563d;
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: -10px;
}
ul.flex.justify-content-center,
ul.item-list2.justify-content-center {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.more-btn-area{
      display:grid!important;
      gap: 10px;  
      list-style: none;
      }
.menu-btn a {
      display: inline-block;
      padding: 20px 20px;
      font-size: 12px;
      width:170px;
      border: solid 1px #444;
      color: #000;
      text-decoration: none;
      transition: 0.3s;
}
.pc_none {
    display: block;
}

.sp_none {
    display: none;
}

.menu-list {
    flex-wrap: wrap;
    justify-content: center;
}

ul.menu-list.justify-content-center {
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin:20px 0 0 0;
}
.menu-list li {
        max-width: 100%;
        margin-bottom: 0px;
}
.intro_text{
   padding-left: 30px;
   padding-right: 30px;
}
.text-center.bold {
font-size: 1.4rem;
margin-bottom: 3px;
}
.more-btn-area-1 {
    justify-content: center;
    display: flex;
    gap: 10px;
    margin-top: 50px;
    margin-bottom: 100px;
}
.more-btn-2 a .logo {
    display: flex;
    justify-content: center;
    width: 130px;
    margin: auto;
    height: 30px;
    background-image: url(https://www.pourvous.co.jp/category02/common/pourvous.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.more-btn-area-1 .more-btn-2  a {
    padding: 10px 5px 0;
}
   }
.text-section {
  /* --- 既存のスタイルがあれば、それは維持してください --- */
  /* 例: background-color: #4A4A4A; (画像の背景色に近い濃いグレー) */
  /* 例: padding: 20px 30px; */
  /* 例: text-align: center; */
  /* 例: display: block; (または inline-block, flex など) */

  /* --- 通常時の文字色 (ホバー前の色) --- */
  /* 画像の薄いグレーの文字色を想定しています。実際の色に合わせて調整してください。 */
  color: #A0A0A0; /* 例: 薄いグレー */
  /* または、もし個別のテキスト要素に色が指定されているなら、ここでは不要な場合もあります */

  /* --- マウスカーソルを指マークにする (推奨) --- */
  cursor: pointer;

  /* --- 色の変化を滑らかにする (任意) --- */
  transition: color 0.2s ease-in-out;
  /* もし、子要素の色も個別に transition させたい場合は、
     子要素のセレクタにも transition を指定します。 */
}

.text-section:hover {
  color: #FFFFFF !important; 
}

.all-partydress-text.pc-only{
    display: block;
}

.all-partydress-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .all-partydress-text.pc-only {
    display: none;
  }
.all-partydress-text.sp-only {
    display: block;
  }
}

.atlo-partydress-text.pc-only{
    display: block;
}

.atlo-partydress-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .atlo-partydress-text.pc-only {
    display: none;
  }
  .atlo-partydress-text.sp-only {
    display: block;
  }
}

.atlo-pantsuit-text.pc-only{
    display: block;
}

.atlo-pantsuit-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .atlo-pantsuit-text.pc-only {
    display: none;
  }
  .atlo-pantsuit-text.sp-only {
    display: block;
  }
}

.atlo-acce-text.pc-only{
    display: block;
}

.atlo-acce-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .atlo-acce-text.pc-only {
    display: none;
  }
  .atlo-acce-text.sp-only {
    display: block;
  }
}

.atlo-bag-text.pc-only{
    display: block;
}

.atlo-bag-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .atlo-bag-text.pc-only {
    display: none;
  }
  .atlo-bag-text.sp-only {
    display: block;
  }
}

.pourvous-partydress-text.pc-only{
    display: block;
}

.pourvous-partydress-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-partydress-text.pc-only {
    display: none;
  }
  .pourvous-partydress-text.sp-only {
    display: block;
  }
}

.pourvous-suit-text.pc-only{
    display: block;
}

.pourvous-suit-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-suit-text.pc-only {
    display: none;
  }
  .pourvous-suit-text.sp-only {
    display: block;
  }
}

.pourvous-pantsuit-text.pc-only{
    display: block;
}

.pourvous-pantsuit-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-pantsuit-text.pc-only {
    display: none;
  }
  .pourvous-pantsuit-text.sp-only {
    display: block;
  }
}

.pourvous-onepiece-text.pc-only{
    display: block;
}

.pourvous-onepiece-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-onepiece-text.pc-only {
    display: none;
  }
  .pourvous-onepiece-text.sp-only {
    display: block;
  }
}

.pourvous-bag-text.pc-only{
    display: block;
}

.pourvous-bag-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-bag-text.pc-only {
    display: none;
  }
  .pourvous-bag-text.sp-only {
    display: block;
  }
}

.pourvous-shoe-text.pc-only{
    display: block;
}

.pourvous-shoe-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-shoe-text.pc-only {
    display: none;
  }
  .pourvous-shoe-text.sp-only {
    display: block;
  }
}

.pourvous-acce-text.pc-only{
    display: block;
}

.pourvous-acce-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .pourvous-acce-text.pc-only {
    display: none;
  }
  .pourvous-acce-text.sp-only {
    display: block;
  }
}

.borelo-text.pc-only{
    display: block;
}

.borelo-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .borelo-text.pc-only {
    display: none;
  }
  .borelo-text.sp-only {
    display: block;
  }
}

.all-suit-text.pc-only{
    display: block;
}

.all-suit-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .all-suit-text.pc-only {
    display: none;
  }
  .all-suit-text.sp-only {
    display: block;
  }
}

.dailywear-text.pc-only{
    display: block;
}

.dailywear-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .dailywear-text.pc-only {
    display: none;
  }
  .dailywear-text.sp-only {
    display: block;
  }
}

.yukata-text.pc-only{
    display: block;
}

.yukata-text.sp-only{
    display: none;
}

@media screen and (max-width: 640px) {
  .yukata-text.pc-only {
    display: none;
  }
  .yukata-text.sp-only {
    display: block;
  }
}


/* =============================================
   pv-p-nav: 商品カテゴリナビゲーション
   ============================================= */

.pv-p-nav {
  background-color: #fff;
  margin-inline: auto;
  margin-bottom: 0;
  transition: box-shadow 0.3s ease;
}

/* 非sticky：グリッドでアイコン+ラベルを縦並び配置（スマホ3列／PC4列・ボーダーなし） */
.pv-p-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; /* SP：8px */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* PC：4列・gap 16px */
@media (min-width: 768px) {
  .pv-p-nav__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.pv-p-nav__item {
  display: flex; /* リンクをセル全体に広げ、クリック領域を最大化 */
  border-bottom: 1px solid #e0e0e0;
}

.pv-p-nav__link {
  display: flex;
  flex-direction: column; /* アイコンを上・ラベルを下に */
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 16px 8px;
  text-decoration: none;
  color: #333;
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pv-p-nav__link:hover {
  background-color: #f8f8f8;
  color: #666;
}

.pv-p-nav__link:focus-visible {
  outline: 2px solid #333;
  outline-offset: -2px;
  background-color: #f8f8f8;
}

.pv-p-nav__icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

/* JS補助：sticky検知センチネル／高さ補填スペーサー */
.pv-p-nav__sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
  visibility: hidden;
}

.pv-p-nav__spacer {
  margin-bottom: var(--space-section);
  pointer-events: none;
}

/* =============================================
   sticky状態
   ※ メディアクエリより後ろに配置（カスケード優先）
   ============================================= */

@keyframes pv-p-nav-flash {
  0%, 30% { opacity: 0; }
  100%     { opacity: 1; }
}

.pv-p-nav--sticky {
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: none;
  animation: pv-p-nav-flash 0.35s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .pv-p-nav--sticky {
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  .pv-p-nav--sticky {
    top: 55px;
  }
}

.pv-p-nav--sticky .pv-p-nav__list {
  display: flex; /* 非stickyのgridから横並びflexへ戻す */
  flex-wrap: nowrap;
  gap: 0; /* 非stickyのgapを打ち消す */
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: left;
}

.pv-p-nav--sticky .pv-p-nav__list::-webkit-scrollbar {
  display: none;
}

.pv-p-nav--sticky .pv-p-nav__item {
  flex: 0 0 160px;
  border-left: 1px solid #e0e0e0;
  border-bottom: none; /* 非stickyのborder-bottomを打ち消す */
}

.pv-p-nav--sticky .pv-p-nav__link {
  flex-direction: row; /* 非stickyの縦並びから横並びへ戻す */
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--fs-caption);
}

.pv-p-nav--sticky .pv-p-nav__icon {
  width: 20px;
  height: 20px;
}

/* margin: auto でアイテム群を中央寄せ。全部収まらない場合は auto が 0 に解決され左寄せ＋横スクロールになる */
.pv-p-nav--sticky .pv-p-nav__item:first-child { margin-left: auto; border-left: none; }
.pv-p-nav--sticky .pv-p-nav__item:last-child  { margin-right: auto; }

/* スクロール可能なことを示す端のフェード */
.pv-p-nav--sticky::before,
.pv-p-nav--sticky::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pv-p-nav--sticky::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.pv-p-nav--sticky::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

.pv-p-nav--fade-left::before  { opacity: 1; }
.pv-p-nav--fade-right::after  { opacity: 1; }



/* ==============================================================================
              ランキング (pv-p-ranking)
    gr43.html内の<style>から移設
============================================================================== */
.pv-p-ranking-section {
    margin-bottom: var(--space-section);
}

.pv-p-ranking {
    margin-inline: auto;
    margin-bottom: 0.8rem;
}

/* 画像を直接指定する運用のカード用（JSONの.pv-c-card__imgと違い、
   共通CSS側のaspect-ratioが当たらないためgr43側で個別に補う） */
.pv-c-card__img--manual {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    vertical-align: bottom;
}

.pv-p-ranking__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px; /* 実際の余白に合わせて調整 */
}

/* 1〜2枚目：上段（幅1/2ずつ＝2列） */
.pv-p-ranking__grid .pv-c-card:nth-child(1),
.pv-p-ranking__grid .pv-c-card:nth-child(2) {
    grid-column: span 3;
}

/* 3〜5枚目：下段（幅1/3ずつ＝3列） */
.pv-p-ranking__grid .pv-c-card:nth-child(3),
.pv-p-ranking__grid .pv-c-card:nth-child(4),
.pv-p-ranking__grid .pv-c-card:nth-child(5) {
    grid-column: span 2;
}

/* PC幅（640px以上）：横1列、はみ出したら横スクロール */
@media (min-width: 640px) {
    .pv-p-ranking__grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
    }

    .pv-p-ranking__grid .pv-c-card {
        flex: 1 1 20%;
        min-width: 225px; /* カード1枚分の幅。実際のデザインに合わせて調整 */
    }
}


/* =============ランキングバッジ表示============= */


.pv-p-ranking__grid .pv-c-card {
    position: relative;
}

.pv-p-ranking__grid .pv-c-card::before {
    position: absolute;
    color: #333333;
    top: 0.1em;
    left: 0.5em;
    font-size: clamp(1.3rem, 1.16368rem + 0.3497vw, 1.6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
}

.pv-c-card::before {
    content: "";
}
.pv-c-card:nth-child(1)::before { content: "1"; }
.pv-c-card:nth-child(2)::before { content: "2"; }
.pv-c-card:nth-child(3)::before { content: "3"; }
.pv-c-card:nth-child(4)::before { content: "4"; }
.pv-c-card:nth-child(5)::before { content: "5"; }

.pv-p-ranking__grid .pv-c-card:nth-child(1)::before,
.pv-p-ranking__grid .pv-c-card:nth-child(2)::before,
.pv-p-ranking__grid .pv-c-card:nth-child(3)::before {
    color: white;
}

.pv-p-ranking__grid .pv-c-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #F4F4F4;
    /* 390pxで約36px → 900pxで約52px */
    width: clamp(3.6rem, 2.8728rem + 1.8648vw, 5.2rem);
    height: clamp(3.6rem, 2.8728rem + 1.8648vw, 5.2rem);
    clip-path: polygon(100% 0, 0 0, 0 100%);
}

.pv-p-ranking__grid .pv-c-card:nth-child(1)::after {
    background-color: #BDA879;
}
.pv-p-ranking__grid .pv-c-card:nth-child(2)::after {
    background-color: #A8A8A8;
}
.pv-p-ranking__grid .pv-c-card:nth-child(3)::after {
    background-color: #947A61;
}
/* =============ここまでランキングバッジ表示============= */


/* ==============================================================================
              比較表 (pv-p-compare-table)
    category02.css からgr43専用に移設 + 新命名規則へリネーム
============================================================================== */
.pv-p-compare-table {
  margin: 0 0 30px;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-x: scroll;
  font-size: 1.2rem;
}

.pv-p-compare-table__table {
  width: 100%;
  min-width: 630px;
  border-spacing: 0;
}

.pv-p-compare-table__table th,
.pv-p-compare-table__table td {
  padding: 10px 1%;
  border-left: 1px solid #ccc;
}

.pv-p-compare-table__table th {
  background-color: #222;
  color: #fff;
}

.pv-p-compare-table__table th:first-child,
.pv-p-compare-table__table td:first-child {
  border-left: none;
}

.pv-p-compare-table__table tr:nth-of-type(odd) td {
  background: #f9f9f9;
}

.pv-p-compare-table__item {
  width: 24%;
  text-align: center;
}

.pv-p-compare-table__item a {
  display: block;
  position: relative;
}

/* =============ランキングバッジ表示（pv-p-rankingと同じ意匠に統一）============= */

.pv-p-compare-table__item a::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0.5em;
  font-size: clamp(1.3rem, 1.16368rem + 0.3497vw, 1.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 1;
  color: #333333;
}

.pv-p-compare-table__item a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F4F4F4;
  width: clamp(3.6rem, 2.8728rem + 1.8648vw, 5.2rem);
  height: clamp(3.6rem, 2.8728rem + 1.8648vw, 5.2rem);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.pv-p-compare-table__table tr:nth-child(2) .pv-p-compare-table__item a::before { content: "1"; color: #fff; }
.pv-p-compare-table__table tr:nth-child(3) .pv-p-compare-table__item a::before { content: "2"; color: #fff; }
.pv-p-compare-table__table tr:nth-child(4) .pv-p-compare-table__item a::before { content: "3"; color: #fff; }
.pv-p-compare-table__table tr:nth-child(5) .pv-p-compare-table__item a::before { content: "4"; }
.pv-p-compare-table__table tr:nth-child(6) .pv-p-compare-table__item a::before { content: "5"; }

.pv-p-compare-table__table tr:nth-child(2) .pv-p-compare-table__item a::after { background-color: #BDA879; }
.pv-p-compare-table__table tr:nth-child(3) .pv-p-compare-table__item a::after { background-color: #A8A8A8; }
.pv-p-compare-table__table tr:nth-child(4) .pv-p-compare-table__item a::after { background-color: #947A61; }
/* =============ここまでランキングバッジ表示============= */

/* 比較表の商品画像（元の固定画像345pxに合わせたサイズ制御）
   JSONの商品画像は1500px幅のため、指定がないと原寸で表示されてしまう。
   gr43では画像を直接指定しているため、この幅・クロップに合わせている */
.pv-p-compare-table__thumb {
  width: 100%;
  max-width: 345px;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  vertical-align: bottom;
  margin: 0 auto;
  display: block;
}

.pv-p-compare-table__name {
  font-size: 1.3rem;
  font-weight: bold;
}

.pv-p-compare-table__desc {
  font-size: 1.3rem;
}

.pv-p-compare-table__price-cell {
  width: 14%;
  text-align: center;
  white-space: nowrap;
}

.pv-p-compare-table__color-row {
  display: flex;
  align-items: center;
}

.pv-p-compare-table__size-cell {
  width: 18%;
  text-align: center;
}

.pv-p-compare-table__design-cell {
  text-align: center;
}