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

/*フッター*/
.navi-footer-in > .menu-footer li {
  border-left: none;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: none;
}
 /* ==============================================
 * ワイン紹介カード（2カラム・線なしシンプル版）
 * ============================================== */

/* 1. 2列のグリッドレイアウト */
.wine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0;
}

/* 2. カード全体の枠 */
.wine-card-item {
    background: #fff;
    border: 1px solid #e6e2df;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 3. 画像エリア */
.wine-card-img img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
    border-bottom: 1px solid #f9f9f9;
}

/* 4. テキスト部分（中央寄せを徹底） */
.wine-card-body {
    padding: 20px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を強制的に中央へ */
    justify-content: center;
}

/* 5. 日本語の銘柄名（テーマの装飾を徹底的にリセット） */
.wine-card-body h3:nth-of-type(1) {
    /* フォント設定 */
    font-size: 1.2rem !important;
    color: #333 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-weight: normal !important;

    
    /* あらゆる装飾を強制的に削除 */
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* 余白の強制リセット */
    margin: 0 !important;
    padding: 0 !important;
    
    /* 擬似要素（線がこれで作られている場合があるため）も消す */
    position: static !important;
    border: none !important;
    background: none !important;
    margin: 0 0 5px 0 !important; /* 下の余白を2pxまで詰めました */
    padding: 0 !important;
}

/* もし Cocoon の「::before」や「::after」で線が付いている場合の対策 */
.wine-card-body h3:nth-of-type(1)::before,
.wine-card-body h3:nth-of-type(1)::after {
    content: none !important;
    display: none !important;
}

/* 6. 英語名 */
.wine-card-body .en-name {
font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    color: #8a1a24 !important;
    margin:0 0 40px 0 !important;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-style: italic;
    margin-top: 0px !important;   /* マイナス指定でさらに上に引き寄せます */
    margin-bottom: 15px !important; /* 説明文との距離 */
    
}

/* 7. 価格*/
.wine-card-body .price {
    font-size: 0.95em;
    color: #444;
    margin: 0 !important; /* 念のため強制リセット */
    padding: 3px 20px;
    background-color: #f9f6f3;
    border-radius: 20px;
    display: inline-block;
    line-height: 1.5 !important; 
    vertical-align: middle;
}
/* 「円(税込)」の部分だけ小さくする */
.wine-card-body .price .price-unit {
    font-size: 0.7em;      
    margin-left: 2px;     
    display: inline-block;
}
/* 8. 本文 */
.wine-card-body .wine-description {
    margin-top: 15px;           /* ここで価格との間隔を15pxに固定 */
    display: block;             /* 確実に改行させる */
    padding: 0 10px;            /* 左右に少し余裕を持たせる */
}

.wine-card-body .wine-description p {
    font-size: 15px !important;    /* サイズ固定 */
    font-weight: normal !important; /* 太字解除 */
    color: #444 !important;
    line-height: 1.8 !important;   /* 行間を整える */
    margin: 0 !important;          /* pタグ自体の余白は消す（枠のmargin-topに任せる） */
    display: inline-block;
    text-align: center;            /* 中央寄せを維持 */
    font-style: normal !important; /* 英語名のイタリックを引き継がない */
}

.wine-card-body .wine-description p:empty {
    display: none;
}
/* スマホ対応 */
@media (max-width: 600px) {
    .wine-grid {
        grid-template-columns: 1fr; /* ここを1列に変更 */
        gap: 20px; /* 縦に並ぶので、隙間を少し広げると見やすいです */
        padding: 10px; /* 画面端との余白 */
    }

    .wine-card-img img {
        height: auto; /* 1カラム時は横幅が広がるため、自動（auto）がおすすめ */
        max-height: 250px; /* 大きすぎると感じる場合は、ここで最大高さを制限 */
    }

.wine-card-body h3:nth-of-type(1) {
        font-size: 1.1rem; /* 1カラムなら少し文字が大きくても綺麗に見えます */
    }
}