@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 動画ジャンル切り替えナビ */
.genre-nav {
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.2em;  /* 項目の間隔 */
}

.genre-nav a {
  text-decoration: none;
}
.genre-nav-bottom {
  margin-top: 50px;
}

.genre-nav-label {
  flex-basis: 100%;
  font-size: 80%;
  color: #888;
  margin-bottom: 5px;
}

.ranking-pickup {
  border: 2px solid #f4c2d7;
  padding: 16px 18px;
  border-radius: 8px;
  margin: 20px 0 24px;
  background: #fff7fb;
}

.ranking-pickup p {
  margin: 0 0 8px;
}

.ranking-pickup p strong {
  font-size: 1.05em;
}

/* sale-badgeを画像の上に載せる前提 */
.dmm-img-wrap{
  position: relative;
  overflow: hidden;
}

/* ランキング側の sale-badge（あなたのHTMLは <div class="sale-badge"><span>..</span></div> なので両対応） */
.dmm-img-wrap .sale-badge,
.dmm-card .sale-badge{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  background: #e60012;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  pointer-events: none;
}

.dmm-card .sale-badge span{
  display: inline-block;
}

/* 画像上にバッジを重ねる前提 */
.dmm-img-wrap{
  position: relative;
  overflow: hidden;
}

.dmm-img-only{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* 赤帯 */
.dmm-img-wrap .sale-badge{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  background: #e60012;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  pointer-events: none;
}

.dmm-price-area{
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.dmm-list-price{
  color:#999;
  text-decoration: line-through;
  font-size: 0.9em;
}

.dmm-sale-price{
  color:#e60000;
  font-weight:700;
  font-size: 1.1em;
}

.dmm-normal-price{
  color:#222;
  font-weight:700;
}

.dmm-off-badge{
  background:#e60000;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  line-height:1.4;
}