@charset "UTF-8";

/* =========================
   基本テキスト系
   ========================= */
.wa_chpcs_slider_title{
  clear: both;
  height: auto;
  overflow: hidden;
}

.wa_chpcs_foo_con{
  clear: left;
  font-weight: normal;
  font-style: normal;
  height: auto;
  overflow: hidden;
  margin-bottom: 8px;
}

.wa_chpcs_slider_show_custom{
  font-weight: normal;
  font-style: normal;
  height: auto;
  overflow: hidden;
  margin-bottom: 8px;
}

.wa_chpcs_slider_show_cats{
  clear: left;
  display: block;
}

.wa_chpcs_more{
  font-size: 11px;
}

/* =========================
   カルーセル骨格
   ========================= */
.wa_chpcs_image_carousel{
  position: relative;
  width: auto;
  padding: 15px 10px;
}

.wa_chpcs_image_carousel ul{
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

.wa_chpcs_image_carousel li{
  position: relative;
  height: auto;
  padding: 2px;
  margin: 6px;
  display: block;
  float: left;
}

.wa_chpcs_clearfix{
  float: none;
  clear: both;
}

/* =========================
   画像サイズ統一（最重要）
   ・全カード画像は固定比率の枠に収めて中央トリミング
   ・WordPress側のwidth/height属性があっても見た目を統一
   ========================= */
.wa_featured_img{
  position: relative;
  width: 100%;
  aspect-ratio: 16/20;        /* ← 統一したい比率を指定（例：16:9） */
  overflow: hidden;
  border-radius: 8px;        /* デザインに合わせて調整可 */
  line-height: 0;            /* 画像まわりの隙間対策 */
}

/* 実画像は必ず枠いっぱいに表示（中央クロップ） */
.wa_featured_img .wa_card_img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 中央トリミング */
  object-position: center;
  display: block;
  /* 古いスタイルと競合しないように丸め指定 */
  border-radius: 8px !important;
}

/* プラグイン汎用の img 指定は無効化（枠統一に委ねる） */
.wa_chpcs_image_carousel li img{
  display: block;
  float: none;
  width: 100%;
}

/* 既存カード全体の img 丸め指定は枠に合わせる */
.wa_chpcs_card img{
  width: 100%;
  border-radius: 8px !important;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* =========================
   スライダー操作（水平）
   ========================= */
.wa_chpcs_image_carousel .wa_chpcs_prev,
.wa_chpcs_image_carousel .wa_chpcs_next{
  z-index: 250;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  display: block;
  position: absolute;
  top: 50%;
  z-index: 4;
}

.wa_chpcs_image_carousel .wa_chpcs_prev{ left: 0; }
.wa_chpcs_image_carousel .wa_chpcs_next{ right: 0; }

/* =========================
   スライダー操作（垂直）
   ========================= */
.wa_chpcs_image_carousel .wa_chpcs_prev_v,
.wa_chpcs_image_carousel .wa_chpcs_next_v{
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  display: block;
  position: absolute;
  z-index: 250;
  margin-left: 50%;
}
.wa_chpcs_image_carousel .wa_chpcs_prev_v{ top: 0; }
.wa_chpcs_image_carousel .wa_chpcs_next_v{ bottom: 0; }

/* =========================
   ページネーション
   ========================= */
.wa_chpcs_image_carousel .wa_chpcs_pagination{
  text-align: center;
  margin: 20px auto;
}
.wa_chpcs_image_carousel .wa_chpcs_pagination a{
  text-decoration: none;
  text-indent: -999px;
  display: inline-block;
  overflow: hidden;
  width: 8px;
  height: 8px;
  margin: 0 5px 0 0;
  z-index: 250;
  cursor: pointer;
  opacity: .5;
}
.wa_chpcs_image_carousel .wa_chpcs_pagination a.selected{
  text-decoration: underline;
  zoom: 1;
  opacity: 1;
}

/* =========================
   テキストオーバーレイ（既存動作維持）
   ========================= */
.wa_chpcss_text_overlay_p_container{
  margin: 0 auto;
  max-width: 100%;
}

.wa_chpcs_text_overlay_caption{
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.wa_chpcs_text_overlay_caption > a{
  line-height: 0;
  margin: 0;
  padding: 0;
  display: block;
}

.wa_chpcs_text_overlay_caption::before{
  content: '';
  position: absolute; inset: 0;
  background: transparent;
  transition: background .35s ease-out;
}
.wa_chpcs_text_overlay_caption:hover::before{
  background: rgba(0,0,0,.5);
}

.wa_chpcs_text_overlay_caption_media{
  display: block;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

.wa_chpcs_text_overlay_caption_overlay,
.wa_chpcs_overlay_caption_overlay{
  position: absolute; inset: 0;
  text-align: center;
  color: #fff;
}

.wa_chpcs_text_overlay_caption_overlay{
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: transform .35s ease-out;
}
.wa_chpcs_text_overlay_caption:hover .wa_chpcs_text_overlay_caption_overlay{
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.wa_chpcs_text_overlay_caption_overlay_title{
  font: normal 16px/1.5 Arial, sans-serif;
  padding: 0 0 .5em;
  -webkit-transform: translateY(calc(-100% - 10px));
          transform: translateY(calc(-100% - 10px));
  transition: transform .35s ease-out;
}
.wa_chpcs_text_overlay_caption:hover .wa_chpcs_text_overlay_caption_overlay_title{
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* =========================
   Lazyload
   ========================= */
.wa_lazy{ display: none; }

/* =========================
   Sale バッジ
   ========================= */
.wa_chpcs_onsale{
  background-color: #96c42e;
  position: absolute;
  top: 2%;
  left: -2px;
  padding: 2px 8px;
  font-size: .8751em;
  text-align: center;
  color: #fff;
  z-index: 999;
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.wa_chpcs_onsale:before{
  content: '';
  border: 14px solid #96c42e;
  border-color: transparent transparent transparent #96c42e;
  position: absolute;
  top: 0;
  right: -28px;
}
.wa_chpcs_onsale:after{
  content: '';
  border: 6px solid #67861f;
  border-color: #67861f transparent transparent transparent;
  border-right-width: 0;
  position: absolute;
  left: 0;
  bottom: -12px;
}

/* =========================
   操作矢印の無効状態
   ========================= */
.wa_chpcs_prev.disabled,
.wa_chpcs_next.disabled{
  color: #865;
  opacity: 0;
  cursor: default;
}

/* =========================
   カートボタン
   ========================= */
a.wa_chpcs_button,
.wa_chpcs_button{
  display: inline-block;
  margin: 5px 5px 5px 0;
  padding: 2px 13px;
  border: 1px solid #ccc;
  color: #444;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  font-size: 1em !important;
  font-family: inherit;
  overflow: visible;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  border-radius: 3px;
  background: #237fd7;
  background-image: -webkit-linear-gradient(top,#fefefe,#e5e5e5);
  background-image: linear-gradient(to bottom,#fefefe,#e5e5e5);
  box-shadow:
    inset 0 1px 0 hsla(0,100%,100%,.3),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 1px 2px rgba(0,0,0,.1);
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/* =========================
   星評価
   ========================= */
.chpcs_rating .sr{
  float: left;
  margin: .5em 4px 0 0;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1em;
  font-size: 1em;
  width: 5.4em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.wa_chpcs_text_overlay_caption_overlay_content .chpcs_rating .sr{
  float: none; margin-left: auto; margin-right: auto;
}
.chpcs_rating .sr:before{
  content: "\2606\2606\2606\2606\2606";
  color: #e0dadf;
  position: absolute; top: 0; left: 0;
  letter-spacing: .1em;
}
.chpcs_rating .sr span{
  overflow: hidden;
  position: absolute; top: 0; left: 0;
  padding-top: 1.5em;
}
.chpcs_rating .sr span:before{
  content: "\2605\2605\2605\2605\2605";
  position: absolute; top: 0; left: 0;
  letter-spacing: .1em;
}
.chpcs_rating .products .sr{ display: block; margin: 0 0 .5em; float: none; }
.chpcs_rating .hreview-aggregate .sr{ margin: 10px 0 0; }

/* =========================
   カード見た目
   ========================= */
.wa_chpcs_card .item-content{
  border: 0;
  box-shadow:
    0 0 0 15px rgba(226,212,2,.9),
    0 2px 1px -1px rgba(60,75,100,0),
    0 1px 3px 0 rgba(60,75,100,0);
  border-radius: 8px;
  background-color: #f1f1f1 !important; /* スライダー内枠背景色 */
  background-clip: border-box;
  z-index: 999;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 5px 1.5rem;
  padding: 5%;
}

/* =========================
   動画ウォーターマーク（既存）
   ========================= */
.wa_featured_img i{
  position: absolute;
  top: 50%;
  right: 50%;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  margin-top: -20px;
  margin-right: -18px;
  z-index: 5;
  font-family: fontawesome;
  font-weight: 400;
}

/* =========================
   二段組テーマ（既存）
   ========================= */
.wa_chpcs_two_sides .wa_featured_img a,
.wa_chpcs_two_sides .wa_featured_img img,
.wa_chpcs_two_sides .wa_featured_img{
  line-height: 0 !important;
}
.wa_chpcs_two_sides .wa_featured_img{ max-width: 48%; }
.wa_chpcs_two_sides .wa_below_contents{
  padding-left: 5px;
  max-width: 48%;
}
.wa_chpcs_two_sides .item_content{ position: relative; width: 100%; }
.wa_chpcs_two_sides .wa_chpcs_text_overlay_caption{
  line-height: 0; margin-bottom: 14px;
}

/* =========================
   矢印を上部に出す別ID（既存）
   ========================= */
#wa_chpcs_image_carousel_id .wa_chpcs_prev,
#wa_chpcs_image_carousel_id .wa_chpcs_next{
  z-index: 250;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  display: block;
  position: absolute;
  top: 0;
  z-index: 4;
}
#wa_chpcs_image_carousel_id .wa_chpcs_prev{
  right: 30px; left: auto;
}

/* =========================
   Lightbox
   ========================= */
.mfp-close:hover{ background: none; }