@charset "UTF-8";
/*=============================================================
  Date: 2025-09-04
  CSS Document ： トップス・ボトムス紹介（共通LP用）
=============================================================*/

/*------------------------------------
  全体・ベース制御
------------------------------------*/
/* リスト2ページ目以降表示させない */
#outer_id {
  display: none;
}

.pc {
  display: block;
}
.sp {
  display: none;
}
.bold_ct {
  font-weight: bold;
}
.fsc_gheader-wrap {
  transition: all 0.3s;
}

/* 仮想LP用ベース */
.fca_cat-hero {
  z-index: 1;
}
.fca_cat-hero, 
.sr_page-shopping-result__free {
  overflow: visible !important;
}
.fca_page-shop-category__body {
  margin-top: 0;
}

/*==================================
  ルビ設定
==================================*/
[data-ruby] {
  position: relative;
  margin-top: 0.2em;
  display: inline-block;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  text-align: center;
  top: -0.9em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.38em;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

/*------------------------------------
  メインコンテンツ・ラッパー
------------------------------------*/
#wrapper {
  opacity: 1;
  margin: 0 0 1.3em;
  overflow: hidden;
}

.main-ttl {
  color: #4C9AC9;
  font-size: min(3.5vw, 45px);
  text-align: center;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

h2.list-ttl {
  font-size: 20px;
  text-align: center;
  margin: 0.5em 0 0.7em;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: "游ゴシック体 Pr6N D";
  letter-spacing: 0.06em;
}

#list-anchor {
  font-size: 140%;
  text-align: center;
  margin: 1.1em 0 0;
  font-weight: bold;
  font-family: "游ゴシック体 Pr6N D";
  letter-spacing: 0.06em;
}

/*------------------------------------
  Swiper（スライダー全体）
------------------------------------*/
.listSwiper {
  width: 98%;
  position: relative;
  overflow: visible;
}
.listSwiper img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- index.css の修正部分 --- */

/* 矢印ナビゲーション */
.swiper-button-prev, 
.swiper-button-next {
  width: 40px;             /* PC用の固定サイズ */
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  z-index: 10;
}
.swiper-button-prev {
  background-image: url("../images/slide_prev.webp") !important; /* 強制適用 */
  left: 2%;
}
.swiper-button-next {
  background-image: url("../images/slide_next.webp") !important; /* 強制適用 */
  right: 2%;
}

/* ★ここがポイント！デフォルトの青い矢印（文字）を確実に非表示にする */
.swiper.listSwiper .swiper-button-prev::after, 
.swiper.listSwiper .swiper-button-next::after {
  display: none !important;
  content: "" !important;
}

/* ホバーエフェクトの調整 */
@media (hover: hover) {
  .swiper.listSwiper .swiper-wrapper .swiper-slide a:hover {
    opacity: 0.7;
  }
  .swiper-button-prev:hover {
    transform: translateX(-4px) translateY(-50%);
  }
  .swiper-button-next:hover {
    transform: translateX(4px) translateY(-50%);
  }
}
/*------------------------------------
  Swiper（スライド個体・カード）
------------------------------------*/
.swiper.listSwiper .swiper-wrapper .swiper-slide {
  width: 100%;
}
.swiper.listSwiper .swiper-wrapper .swiper-slide a {
  display: block;
  width: 92%;
  margin: 0 auto;
  position: relative;
  transition: all 0.3s;
}

/* ホバーエフェクト */
@media (hover: hover) {
  .swiper.listSwiper .swiper-wrapper .swiper-slide a:hover {
    opacity: 0.7;
  }
  .swiper-button-prev:hover {
    transform: translateX(-4px);
  }
  .swiper-button-next:hover {
    transform: translateX(4px);
  }
}

/* スライド内テキスト制御 */
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt {
  position: absolute;
  top: 3%;
  left: 5%;
  margin: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt p {
  display: block;
  font-family: "游ゴシック体 Pr6N M";
  font-size: 113%;
}
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt p span {
  background: #FFFFFF;
  padding: 0.15em 0.2em;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

/* 価格タグ */
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-price {
  position: absolute;
  bottom: 3%;
  right: 3%;
  margin: 0;
  background: #000;
  color: #FFF;
  border-radius: 2em;
  padding: 0 0.5em 0 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  letter-spacing: 0.05em;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 82%;
}
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-price::after {
  display: block;
  width: 0.8em;
  aspect-ratio: 1;
  content: '';
  background-image: url(../images/link_arrow.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/*-------------------------------------------------------------
  水色リボン（機能バッジ）共通スタイル
-------------------------------------------------------------*/
#outer_id .list-txt {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  margin: 5px auto !important;
  clip-path: none !important; 
}

#outer_id .btn-cyan {
  display: inline-block !important;
  background-color: #4C9AC9 !important;
  color: #ffffff !important;         
  padding: 4px 12px !important;         
  border-radius: 20px !important;       
  font-size: 13px !important;           
  font-weight: bold !important;
  text-align: center !important;
  margin: 5px auto !important;
}
#outer_id .btn-cyan:hover {
  background-color: #1aa3ff !important;
}

/*------------------------------------
  「機能から選ぶ」セクション（catCont）
------------------------------------*/
#catCont { 
  font-family: "秀英角ゴシック銀 M", "Shuei KakuGo Gin M"; 
  margin-top: 60px; 
}
#catCont img { width: 100%; height: auto; }
#catCont #mainImage { margin-bottom: 6vw; }
#catCont #mainImage .sp_display { display: none; }
#catCont .select-wrap { margin-bottom: 6vw; }

/* 見出しヘッダー */
#catCont .heading-wrap { display: flex; justify-content: space-between; align-items: center; width: 40%; margin: 0 auto 2vw; }
#catCont .heading-wrap .select-heading { max-width: 230px; width: 50%; margin: 0; }
#catCont .heading-wrap .select-heading:before,
#catCont .heading-wrap .heading-arrow { width: 10%; }

/* リスト・ボタン形式 */
#catCont .select-list { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
#catCont .select-list li { list-style: none; flex: 1; }
#catCont .select-list li a {
  padding: 25px 15px 25px 20px;
  background: url("/search/ladies/tops/tshirt/images/arrow01.svg?$staticlink$") 95% 50% / 10% auto no-repeat #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: .3s;
}
#catCont .select-list li a:hover { background-color: #ebf3f7; box-shadow: none; }
#catCont .select-icon { margin-right: 7%; }

/* 各ボタン個別アイコン幅 */
#catCont #btn-cotton .select-icon { width: 21%; }
#catCont #btn-sweat .select-icon { width: 19%; }
#catCont #btn-cool .select-icon { width: 20%; }
#catCont #btn-quickdry .select-icon { width: 21%; }
#catCont .select-ttl { font-size: min(2vw,24px); letter-spacing: 0.1em; }


/*===================================
  レスポンシブ：ブレイクポイント（1170px以下）
===================================*/
@media (max-width: 1170px) {
  #wrapper {
    font-size: 1.6vw;
  }
}

/*===================================
  レスポンシブ：ブレイクポイント（768px以下：スマホ・タブレット）
===================================*/
@media (max-width: 768px) {
  .side-nav {
    display: none;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  #sp-contents {
    width: 100%;
  }
  
  #wrapper {
    font-size: 3.1vw;
    overflow: hidden;
  }
  
  .main-ttl { 
    font-size: 7vw; 
    margin-bottom: 20px; 
  }
  h2.list-ttl { 
    font-size: 5vw; 
    margin-bottom: 15px;
  }

  /* Swiperスマホ */
  .swiper-button-prev, 
  .swiper-button-next {
    width: 9%;
  }
  .swiper-button-prev {
    left: 6%;
  }
  .swiper-button-next {
    right: 6%;
  }
  .swiper.listSwiper .swiper-wrapper .swiper-slide a {
    width: 94%;
  }
  .swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt p {
    font-size: 129%;
  }
  .swiper.listSwiper .swiper-wrapper .swiper-slide a .list-price {
    font-size: 110%;
  }

  /* catContスマホ */
  #catCont { margin-top: 40px; }
  #catCont #mainImage { margin-bottom: 15px; }
  #catCont #mainImage .pc_display { display: none; }
  #catCont #mainImage .sp_display { display: block; }
  #catCont .select-wrap { margin-bottom: 15px; }
  
  #catCont .heading-wrap { 
    display: flex; 
    width: 80%; 
    margin: 0 auto 20px; 
  }
  
  #catCont .select-list li { width: calc(100% / 2 - 16px); flex: auto; }
  #catCont .select-list li a { padding: 12px 15px 12px 20px; background-size: 12% auto; }
  #catCont .select-ttl { font-size: 3vw; }
  #catCont #btn-cotton .select-icon { width: 15%; }
  #catCont #btn-sweat .select-icon { width: 13%; }
  #catCont #btn-cool .select-icon { width: 14%; }
  #catCont #btn-quickdry .select-icon { width: 15%; }
}

/*===================================
  レスポンシブ：ブレイクポイント（390px以下：小型スマホ）
===================================*/
@media (max-width: 390px) {
  #catCont .heading-wrap { width: 90%; }
  #catCont .select-list { gap: 12px; }
  #catCont .select-list li a { padding-left: 12px; }
  #catCont .select-icon { margin-right: 8%; }
  #catCont #btn-cotton .select-icon { width: 21%; }
  #catCont #btn-sweat .select-icon { width: 19%; }
  #catCont #btn-cool .select-icon { width: 20%; }
  #catCont #btn-quickdry .select-icon { width: 21%; }    
  #catCont .select-ttl { font-size: 4vw; letter-spacing: 0.05em; }
}

/* JSで生成されたバッジを強制的に表示させる設定 */
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt {
  clip-path: none !important; 
  opacity: 1 !important;
  visibility: visible !important;
}

/* バッジ（span）の周りの余白や改行の調整 */
.swiper.listSwiper .swiper-wrapper .swiper-slide a .list-txt p span.btn-cyan {
  display: inline-block !important;
  margin-bottom: 4px; 
  white-space: nowrap;
}