/* cocoymart feature.css - 特集ページ専用スタイル */

/* ===== BREADCRUMB ===== */
.fc-breadcrumb{padding:10px 0;font-size:13px;color:var(--c-text2);border-bottom:1px solid var(--c-border)}
.fc-breadcrumb a{color:var(--c-primary)}
.fc-breadcrumb a:hover{text-decoration:underline}
.fc-breadcrumb span+span::before{content:" › ";color:var(--c-text2);margin:0 4px}

/* ===== FEATURE HERO ===== */
.fc-hero{padding:32px 20px 28px;background:linear-gradient(135deg,#0D47A1 0%,#1565C0 60%,#1976D2 100%);color:#fff}
.fc-hero-inner{max-width:900px;margin:0 auto}
.fc-hero-badge{display:inline-block;background:var(--c-accent);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:12px;letter-spacing:.5px}
.fc-hero h1{font-size:26px;font-weight:900;line-height:1.35;margin-bottom:10px}
.fc-hero-desc{font-size:14px;opacity:.9;line-height:1.75;margin-bottom:16px}
.fc-hero-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.8}
.fc-hero-meta span::before{margin-right:4px}

/* ===== MAIN LAYOUT ===== */
.fc-main{max-width:900px;margin:0 auto;padding:0 16px}

/* ===== SECTION COMMON ===== */
.fc-section{padding:28px 0;border-bottom:1px solid var(--c-border)}
.fc-section:last-child{border-bottom:none}
.fc-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:10px;border-bottom:3px solid var(--c-primary)}
.fc-sec-title{font-size:17px;font-weight:900;display:flex;align-items:center;gap:8px}
.fc-sec-title::before{content:'';display:inline-block;width:4px;height:18px;background:var(--c-primary);border-radius:2px}

/* ===== INTRO BOX ===== */
.fc-intro-box{background:var(--c-plt);border-radius:var(--r);padding:20px 22px;margin-bottom:24px;line-height:1.85;font-size:14px}
.fc-intro-box p+p{margin-top:10px}
.fc-who{background:#fff;border:1px solid var(--c-border);border-radius:var(--r);padding:18px 20px;margin-top:16px}
.fc-who-title{font-size:13px;font-weight:700;color:var(--c-primary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.fc-who ul{padding-left:0;display:flex;flex-direction:column;gap:6px}
.fc-who li{font-size:13px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.fc-who li::before{content:"✓";color:var(--c-green);font-weight:700;flex-shrink:0;margin-top:1px}

/* ===== PRODUCT GRID ===== */
.fc-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.fc-product-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;color:var(--c-text);transition:.2s;text-decoration:none;border:1px solid var(--c-border)}
.fc-product-card:hover{box-shadow:var(--sh-hv);transform:translateY(-3px);border-color:#BBDEFB}
.fc-product-img{position:relative;width:100%;padding-top:100%;background:var(--c-plt);flex-shrink:0;overflow:hidden}
.fc-product-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.3s}
.fc-product-card:hover .fc-product-img img{transform:scale(1.05)}
.fc-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px}
.fc-rank-badge{position:absolute;top:8px;left:8px;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:4px;z-index:1;line-height:1.4}
.fc-rank-1{background:#F5A623}
.fc-rank-2{background:#9E9E9E}
.fc-rank-3{background:#A0522D}
.fc-product-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.fc-product-name{font-size:12px;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-stars{display:flex;align-items:center;gap:3px}
.fc-stars-icon{color:#F5A623;font-size:12px;letter-spacing:.5px}
.fc-review-count{font-size:11px;color:var(--c-text2)}
.fc-price-box{display:flex;align-items:baseline;gap:4px}
.fc-price-label{font-size:10px;color:var(--c-text2)}
.fc-price{font-size:16px;font-weight:900;color:var(--c-sale)}
.fc-cta-btn{margin-top:auto;background:var(--c-primary);color:#fff;text-align:center;padding:8px 10px;border-radius:6px;font-size:12px;font-weight:700;transition:.2s;display:block}
.fc-product-card:hover .fc-cta-btn{background:var(--c-pdk)}

/* ===== SKELETON ===== */
.fc-skeleton-wrap{display:contents}
.fc-skeleton{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--c-border)}
.fc-skeleton::before{content:'';display:block;padding-top:100%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:fc-shimmer 1.4s infinite}
.fc-skeleton::after{content:'';display:block;height:80px;margin:10px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:fc-shimmer 1.4s infinite;border-radius:4px}
@keyframes fc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fc-error{text-align:center;color:var(--c-text2);padding:20px;font-size:14px}

/* ===== LOAD MORE ===== */
.fc-load-more-wrap{text-align:center;padding:20px 0}
.fc-load-more-btn{background:var(--c-primary);color:#fff;border:none;padding:12px 36px;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.fc-load-more-btn:hover{background:var(--c-pdk);transform:translateY(-1px)}
.fc-load-more-btn:disabled{background:var(--c-border);color:var(--c-text2);cursor:not-allowed;transform:none}

/* ===== FAQ ===== */
.fc-faq-list{display:flex;flex-direction:column;gap:10px}
.fc-faq-item{background:#fff;border-radius:var(--r);border:1px solid var(--c-border);overflow:hidden}
.fc-faq-q{padding:16px 20px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:flex-start;gap:10px;user-select:none;color:var(--c-text);line-height:1.5}
.fc-faq-q::before{content:'Q';background:var(--c-primary);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px}
.fc-faq-q::after{content:'▼';margin-left:auto;font-size:11px;color:var(--c-text2);flex-shrink:0;transition:.25s;padding-left:8px}
.fc-faq-item.open .fc-faq-q::after{transform:rotate(180deg)}
.fc-faq-a{display:none;padding:0 20px 16px 52px;font-size:14px;line-height:1.8;color:var(--c-text2);border-top:1px solid var(--c-border)}
.fc-faq-item.open .fc-faq-a{display:block}

/* ===== RELATED FEATURES ===== */
.fc-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.fc-related-card{background:#fff;border-radius:var(--r);padding:18px 16px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh);text-decoration:none;color:var(--c-text);transition:.2s;border:1px solid var(--c-border)}
.fc-related-card:hover{box-shadow:var(--sh-hv);transform:translateY(-2px);border-color:#BBDEFB}
.fc-related-icon{font-size:32px;flex-shrink:0}
.fc-related-info{min-width:0}
.fc-related-label{font-size:10px;color:var(--c-primary);background:var(--c-plt);padding:2px 7px;border-radius:20px;display:inline-block;font-weight:600;margin-bottom:4px}
.fc-related-title{font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== CATEGORY LINKS ===== */
.fc-cat-links{display:flex;flex-wrap:wrap;gap:8px}
.fc-cat-link{background:var(--c-plt);color:var(--c-primary);padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid #BBDEFB;transition:.2s}
.fc-cat-link:hover{background:var(--c-primary);color:#fff}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .fc-hero h1{font-size:20px}
  .fc-hero-desc{font-size:13px}
  .fc-product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .fc-related-grid{grid-template-columns:1fr}
  .fc-faq-q{font-size:13px;padding:14px 16px}
  .fc-faq-a{padding:0 16px 14px 46px;font-size:13px}
  .fc-sec-title{font-size:15px}
}
@media(min-width:641px)and(max-width:900px){
  .fc-product-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:901px){
  .fc-product-grid{grid-template-columns:repeat(4,1fr)}
}