/*
 Theme Name:   junhome Child
 Template:     junhome
*/

/* 1. 全体：余計な改行を消して横いっぱいに広げる */
.jun-card-group br { display: none !important; }

.jun-card-group .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: space-between !important; /* 左右に広げて配置 */
}

/* 2. 各カード：幅を広く設定（最大幅を500pxまで引き上げ） */
.jun-card-group .wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
    flex: 1 1 calc(50% - 10px) !important; /* 横2列で可能な限り広がる */
    max-width: 500px !important; /* 以前の320pxから500pxに拡大 */
    min-width: 280px !important; /* スマホで潰れない最小幅 */
}

/* 3. ラベル（カードの外枠）：中身を整える */
.jun-card-group label {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #ddd !important;
    padding: 15px !important;
    border-radius: 10px !important;
    background: #fff !important;
    height: 100% !important;
    cursor: pointer !important;
    transition: 0.2s;
    box-sizing: border-box !important;
}

.jun-card-group label:hover {
    border-color: #f29900 !important;
    background: #fffaf2 !important;
}

/* 4. 画像エリア：横幅いっぱいに広げ、高さを出す */
.jun-card-img-area {
    margin-top: auto !important; /* テキストの下に配置 */
    padding-top: 10px !important;
}

.jun-card-img-area img {
    width: 100% !important;
    height: 220px !important; /* 画像を以前より大きく表示 */
    object-fit: cover !important;
    border-radius: 5px !important;
    display: block !important;
}

/* 5. 文字情報の装飾 */
.jun-card-title { display: block; font-weight: bold; color: #f29900; font-size: 1.2rem; margin-bottom: 5px; }
.jun-card-address { display: block; font-size: 0.9rem; color: #333; line-height: 1.4; }
.jun-card-note { display: block; font-size: 0.8rem; color: #d00; margin-top: 3px; }

/* 6. スマホ表示：1カラムにする */
@media screen and (max-width: 640px) {
    .jun-card-group .wpcf7-list-item {
        flex: 1 1 100% !important;
        max-width: none !important;
    }
    .jun-card-img-area img {
        height: 180px !important; /* スマホでは高さを少し抑える */
    }
}


/* 1. 親要素：横並びを強制し、折り返さない設定 */
.jun-card-group .wpcf7-radio {
    display: flex !important;
    flex-wrap: nowrap !important; /* 強制的に1行に収める */
    gap: 20px !important;
    width: 100% !important;
    max-width: 900px !important; /* 全体の最大幅 */
    margin: 0 auto !important;
}

/* 2. 各カード：2枚が綺麗に収まる計算（100% ÷ 2 - 隙間） */
.jun-card-group .wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
    flex: 0 0 calc(50% - 10px) !important; /* きっちり半分より少し小さく */
    width: calc(50% - 10px) !important;
    max-width: 440px !important; /* 1枚がデカくなりすぎない絶妙なサイズ */
}

/* 3. ラベル（カードの外枠）：中身を縦に整列 */
.jun-card-group label {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #ddd !important;
    padding: 15px !important;
    border-radius: 10px !important;
    background: #fff !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* 4. 画像エリア：高さを出しつつ、カード幅いっぱいに */
.jun-card-img-area {
    margin-top: auto !important;
    padding-top: 10px !important;
}

.jun-card-img-area img {
    width: 100% !important;
    height: 200px !important; /* PCでの高さを調整 */
    object-fit: cover !important;
    border-radius: 5px !important;
}

/* 5. スマホ表示：ここだけは縦並びに戻す */
@media screen and (max-width: 768px) {
    .jun-card-group .wpcf7-radio {
        flex-wrap: wrap !important; /* スマホでは折り返す */
    }
    .jun-card-group .wpcf7-list-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: none !important;
    }
    .jun-card-img-area img {
        height: 180px !important;
    }
}