@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-card .card-thumb, 
.no-card .entry-thumb {
    position: relative;
    overflow: hidden;
}

/* 「is-sale」クラスがついている記事のサムネイルに、文字位置を完全に中央調整した斜め帯を表示 */
.is-sale .card-thumb::after,
.is-sale .entry-thumb::after {
    content: "SALE";
    position: absolute;
    top: 12px;
    left: -32px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff4500, #ff2400);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    font-family: sans-serif;
    letter-spacing: 1px;
    width: 130px;
    
    /* 高さを固定し、行高さ（line-height）を揃えることで上下の中央ズレを解消 */
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;

    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    z-index: 20;
    pointer-events: none;
}




/* 1. すべてのテーブルの基本設定（余白の暴走を完全に防ぐ） */
table.responsive-table,
.is-style-stripes {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
  
  /* 【超重要】2番目以降の表の「上側」に必ず同じ隙間を強制する */
  margin-top: 24px !important; 
  margin-bottom: 0 !important;
}

/* 2. ただし、一番最初（一番上の表）だけは上マージンをゼロにする */
table.responsive-table:first-of-type,
.is-style-stripes:first-of-type {
  margin-top: 0 !important;
}

/* 3. 左側の項目名（th）の幅を170pxに固定 */
th {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  box-sizing: border-box !important;
  word-break: break-all !important;
}

/* 4. 右側の詳細（td）の幅を残り全部に固定 */
td {
  width: calc(100% - 170px) !important;
  box-sizing: border-box !important;
  word-break: break-all !important;
}






/************************************
****　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#ff8c00; /*エリア背景色・ボタン色と同じカラーコードを入力*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;/*文字色はこちらで変更できます*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}