@charset "UTF-8";

/* ==================================================
   夏特集専用スタイル (summerwb.css) 
   ================================================== */

/* 1. 基本レイアウト */
.summer-wrapper {
    width: 100%; max-width: 1240px; margin: 0 auto;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", "Meiryo", "メイリオ", sans-serif;
    color: #1a1a1a; line-height: 1.8;
 background-image: radial-gradient(circle at 100% 0%, rgba(200, 230, 255, 0.4) 0%, transparent 60%);
    background-attachment: fixed;
}

/* 2. 導入エリア (全幅表示対応) */
.summer-intro { 
    width: 100vw;               /* 強制的に画面幅いっぱいにする */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;        /* 画面左端から開始させる */
    margin-right: -50vw;
    padding: 80px 20px; 
    margin-bottom: 60px; 
    text-align: center; 
    background-color: #f7f9fb;
    border-top: 1px solid #e1e8ed;
    border-bottom: 1px solid #e1e8ed;
    box-sizing: border-box;    /* パディングで幅がはみ出ないように設定 */
}
.summer-intro-sub { margin: 0 0 15px; font-size: 1.3rem; color: #007bbd; letter-spacing: 0.2em; font-weight: bold; }
.summer-title { font-size: 2.5rem; color: #1a1a1a; line-height: 1.4; margin-bottom: 30px; font-weight: 800; font-family: "Hiragino Mincho ProN", "YuMincho", "游明朝", serif; }
.summer-intro-text { margin: 0 auto; font-size: 1.25rem; color: #333; line-height: 2.0; max-width: 750px; text-align: center; }

/* 3. 商品カードコンテナ */
.summer-card-container { display: flex; 
flex-wrap: wrap; 
justify-content: center; 
gap: 30px; 
margin-bottom: 80px; 
 align-items: stretch; /* 既存のflexコンテナに追加 */
}

.summer-item-card { 
    width: 48%; 
background-color: #fff; 
border: 1px solid #ddd;
display: flex; 
flex-direction: column; 
transition: transform 0.3s; 
height: auto;
display: flex;
flex-direction: column;

}
.summer-item-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.summer-card-link { 
display: flex;
 text-decoration: none; 
color: inherit; 
height: 100%; 
flex-direction: column;
}

/* 4. カード内パーツ */
.summer-item-img { overflow: hidden; height: 600px;}
.summer-item-img img { width: 100%; transition: transform 0.5s; }


.summer-item-card:hover .summer-item-img img { transform: scale(1.05);　width: 100%;
  height: 100%;
  object-fit: cover;
 }
.summer-item-body { padding: 30px 20px; text-align: center; }
.summer-item-title {
    margin: 0 0 10px 0; font-size: 1.8rem; color: #007bbd; line-height: 1.4; 
    font-weight: 800; font-family: "Hiragino Mincho ProN", "YuMincho", "游明朝", serif;
}
.summer-item-lead { margin: 15px 0 0; font-size: 1.3rem; color: #5d4037; font-weight: 600; }

/* 5. レビュー・おすすめエリア */
.summer-comment-box {
    margin: 0 20px 20px; padding: 15px; background-color: #f9f9f9; 
    border: 1px solid #eee; border-radius: 4px; text-align: left; flex-grow: 1;
　 flex: 1;
}
.summer-review-head {
    font-size: 0.9rem; font-weight: bold; color: #a68b5e; 
    margin-bottom: 8px; border-bottom: 1px dashed #ccc; padding-bottom: 5px;
}
.summer-comment-label {
    background: #a68b5e; color: #fff; display: inline-block;
    padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; margin: 10px 0 5px;
}
.summer-comment-text { font-size: 1.05rem; color: #333; line-height: 1.6; }

/* 6. ボタン */
.summer-btn-wrap { padding: 0 20px 25px; text-align: center; }
.btn-hover-effect { transition: filter 0.3s ease; }
.btn-hover-effect:hover { filter: brightness(1.2); }

/* 7. スマホ最適化 (768px以下を一括管理) */
@media screen and (max-width: 768px) {
    .summer-card-container { display: block; padding: 0 20px; }
    .summer-item-card { width: 100% !important; margin-bottom: 20px; display: block; }
    .summer-card-link { display: block; height: auto; }
    .summer-comment-box { flex: unset; }
    .summer-item-img { height: auto; }
    .summer-item-img img { height: auto; object-fit: unset; }

    .summer-intro-sub { font-size: 16px; line-height: 1.6; }
    .summer-title { font-size: 22px; line-height: 1.4; }
    .summer-intro-text { font-size: 1.1rem; line-height: 1.8; }
    .summer-item-lead { font-size: 16px; line-height: 1.7; }
}