@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){
  /*必要ならばここにコードを書く*/
}

/* ===== セール・クーポン速報（トップ表示） ===== */
.entry-content .hcnm-top .hcnm-sale__list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.entry-content .hcnm-top .hcnm-sale__item{
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);

  text-decoration: none !important;
  color: #111 !important;
  transition: transform .08s ease, box-shadow .08s ease;
}

.entry-content .hcnm-top .hcnm-sale__item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.entry-content .hcnm-top .hcnm-sale__badge{
  padding: 3px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.entry-content .hcnm-top .hcnm-sale__badge--sale{ background: #111; }
.entry-content .hcnm-top .hcnm-sale__badge--coupon{ background: #111; }
.entry-content .hcnm-top .hcnm-sale__badge--news{ background: #111; }

.entry-content .hcnm-top .hcnm-sale__shop{
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.entry-content .hcnm-top .hcnm-sale__title{
  font-weight: 700;
  line-height: 1.4;
}

.entry-content .hcnm-top .hcnm-sale__meta{
  color: #666;
  font-size: 13px;
  white-space: nowrap;
}

.entry-content .hcnm-top .hcnm-sale__empty{
  padding: 14px;
  border: 1px dashed #e6e6e6;
  border-radius: 14px;
  color: #666;
  background: #fafafa;
}

@media (max-width: 720px){
  .entry-content .hcnm-top .hcnm-sale__item{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge shop"
      "title title"
      "meta meta";
  }
  .entry-content .hcnm-top .hcnm-sale__badge{ grid-area: badge; }
  .entry-content .hcnm-top .hcnm-sale__shop{ grid-area: shop; }
  .entry-content .hcnm-top .hcnm-sale__title{ grid-area: title; }
  .entry-content .hcnm-top .hcnm-sale__meta{ grid-area: meta; }
}