.ssc-outer-container { width: 100%; box-sizing: border-box; display: block; clear: both;}
.ssc-outer-container::before, .ssc-outer-container::after { content: " "; display: table; }
.ssc-outer-container::after { clear: both; }

.ssc-wrapper {
    --ssc-primary: #00639B; --ssc-on-primary: #FFFFFF; 
    --ssc-surface: #F8F9FF; --ssc-surface-container: #F0F4FA;
    --ssc-on-surface: #191C20; --ssc-on-surface-sub: #42474E;
    width: 100%; box-sizing: border-box; position: relative; overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: block; margin-left: auto; margin-right: auto;
}
.ssc-wrapper-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ssc-inner-content { position: relative; z-index: 1; }

.ssc-wrapper.ssc-width-large { max-width: 100%; border-radius: 0; }
.ssc-wrapper.ssc-width-large-1 { max-width: 1440px; }
.ssc-wrapper.ssc-width-large-2 { max-width: 1220px; }
.ssc-wrapper.ssc-width-medium { max-width: 1024px; }
.ssc-wrapper.ssc-width-medium-small { max-width: 1024px; }
.ssc-wrapper.ssc-width-small { max-width: 600px; }

.ssc-group-header { text-align: left; margin-bottom: 40px; }
.ssc-group-title { font-size: 2rem; font-weight: 600; margin: 0 0 16px 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 12px; line-height: 1.3 !important; }
.ssc-group-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font-size: 1em; height: 1em; }
.ssc-group-icon::before { vertical-align: middle; line-height: 1; display: block; }
.ssc-group-title-text { display: block; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; }
.ssc-group-desc { font-size: 1rem; margin: 0; line-height: 1.6; padding: 24px; border-radius: 16px; backdrop-filter: blur(8px); }

.ssc-group-title.has-bg, .ssc-group-icon.has-bg { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.ssc-group-desc.has-bg { background-color: rgba(0, 0, 0, 0.4); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.ssc-group-title.no-bg { color: var(--ssc-on-surface); }
.ssc-group-desc.no-bg { background-color: var(--ssc-surface-container); color: var(--ssc-on-surface-sub); border: 1px solid rgba(0,0,0,0.05); }
.ssc-group-icon.no-bg { color: var(--ssc-primary); }

.ssc-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px) { .ssc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ssc-grid { grid-template-columns: repeat(4, 1fr); } }

.ssc-card {
    background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-radius: 24px; padding: 24px; display: flex; flex-direction: column;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    border: 1px solid rgba(0,0,0,0.05); height: 100%; box-sizing: border-box;
}
.ssc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); background-color: #fff; }

.ssc-card-header { display: flex; flex-direction: row; align-items: center; gap: 16px; margin: 0 0 16px 0 !important; padding: 0 !important; }
.ssc-card-icon-box {
    width: 48px; height: 48px; border-radius: 12px; background: #F0F4FA;
    display: flex !important; align-items: center; justify-content: center; font-size: 20px; color: var(--ssc-primary); flex-shrink: 0; overflow: hidden; line-height: 1 !important; margin: 0 !important; padding: 0 !important;
}
.ssc-card-icon-box i { display: block !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; }
.ssc-card-img { width: 100%; height: 100%; object-fit: cover; }
.ssc-card-title { margin: 0 !important; padding: 0 !important; font-size: 1.1rem; font-weight: 700; color: #191C20; line-height: 1.3 !important; }

.ssc-card-body { display: flex; flex-direction: column; margin-bottom: 16px; flex-grow: 1; }
.ssc-card-app-image { width: 100%; height: auto; max-height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; display: block; border: 1px solid rgba(0,0,0,0.05); }
.ssc-card-desc { font-size: 0.9rem; color: #42474E; margin: 0; line-height: 1.6; }

.ssc-card-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #E0E0E0; }
.ssc-card-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ssc-badge-ver { font-size: 0.75rem; font-weight: 600; color: #191C20; }
.ssc-badge-type { font-size: 0.7rem; color: #666; background: #CEE5FF; color: #001D33; padding: 2px 8px; border-radius: 4px; display: inline-block; font-weight: 500; }
.ssc-card-actions-col { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ssc-btn-large, .ssc-banner-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; flex-wrap: nowrap;
    border-radius: 12px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s;
    box-sizing: border-box; text-align: center; margin: 0; line-height: 1.2; flex-shrink: 0; max-width: 100%;
    word-break: break-word; white-space: normal;
}
.ssc-btn-large { width: 100%; }
.ssc-banner-btn { padding: 10px 24px; border-radius: 100px; font-size: 0.9rem; }
.ssc-btn-large span, .ssc-banner-btn span { display: block; line-height: 1.2; }
.ssc-btn-large i, .ssc-banner-btn i { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 1; font-size: 1.1em; flex-shrink: 0;}
.ssc-btn-large.primary, .ssc-banner-btn.primary { background: var(--ssc-primary); color: #fff; border: 1px solid var(--ssc-primary); }
.ssc-btn-large.secondary, .ssc-banner-btn.secondary { background: var(--ssc-surface-container); color: var(--ssc-primary); border: 1px solid var(--ssc-primary); }
.ssc-btn-large:hover, .ssc-banner-btn:hover { opacity: 0.85; }

.ssc-banner-list { display: flex; flex-direction: column; gap: 24px; }
.ssc-banner-card {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-radius: 24px; display: flex; flex-direction: row; align-items: stretch;
    overflow: hidden; border: 1px solid rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;
    overflow-wrap: anywhere;
}
.ssc-banner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); background-color: #fff; }
.ssc-banner-card.align-right { flex-direction: row-reverse; }

.ssc-banner-img-box { width: 40%; flex-shrink: 0; min-height: 200px; background: #F0F4FA; border-right: 1px solid rgba(0,0,0,0.05); position: relative; }
.ssc-banner-card.align-right .ssc-banner-img-box { border-right: none; border-left: 1px solid rgba(0,0,0,0.05); }
.ssc-banner-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; top:0; left:0; }
.ssc-banner-img-box .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 64px; color: var(--ssc-primary); opacity: 0.5; position: absolute; top:0; left:0;}

.ssc-banner-content { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-start; }
.ssc-banner-header { display: flex; align-items: center; gap: 16px; margin: 0 0 16px 0 !important; padding: 0 !important; }
.ssc-banner-icon { width: 56px; height: 56px; border-radius: 12px; background: #F0F4FA; display: flex !important; align-items: center; justify-content: center; font-size: 24px; color: var(--ssc-primary); flex-shrink:0; line-height:1 !important; margin: 0 !important; padding: 0 !important; }
.ssc-banner-icon i { display: block !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; }
.ssc-banner-title { margin: 0 !important; padding: 0 !important; font-size: 1.5rem; font-weight: 700; color: #191C20; line-height: 1.2 !important; }
.ssc-banner-desc { font-size: 1rem; color: #42474E; margin-bottom: 24px; line-height: 1.6; }
.ssc-banner-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; border-top: 1px solid #E0E0E0; }
.ssc-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ssc-simple-banner-list { display: flex; flex-direction: column; gap: 64px; }
.ssc-simple-banner-item { 
    display: flex; flex-direction: column; border-radius: 24px; box-sizing: border-box; 
    transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; border: 1px solid rgba(0,0,0,0.05);
}
.ssc-simple-banner-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }

.ssc-sb-top-row { display: flex; flex-direction: row; align-items: stretch; padding: 32px; gap: 40px; }
.ssc-simple-banner-item.align-right .ssc-sb-top-row { flex-direction: row-reverse; }

.ssc-sb-img-col { flex: 1.2; display: flex; flex-direction: column; justify-content: center; }
.ssc-sb-img-box { width: 100%; position: relative; border-radius: 12px; overflow: hidden; background: transparent; }
.ssc-sb-img-box img { width: 100%; height: auto; max-height: 360px; object-fit: contain; display: block; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.ssc-sb-img-box .no-image { width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--ssc-primary); opacity: 0.5; background: rgba(0,0,0,0.05); border-radius: 12px; }

.ssc-sb-title-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ssc-sb-title { margin: 0 0 12px 0 !important; padding: 0 !important; font-size: 1.8rem; font-weight: 700; line-height: 1.3 !important; }
.ssc-sb-catch { font-size: 1.1rem; color: var(--ssc-primary); font-weight: 600; margin: 0 !important; padding: 0 !important; line-height: 1.5; }

.ssc-sb-bottom-row { display: flex; flex-direction: row; align-items: stretch; padding: 32px; gap: 40px; border-top: 1px solid rgba(128,128,128,0.15); }
.ssc-simple-banner-item.align-right .ssc-sb-bottom-row { flex-direction: row-reverse; }

.ssc-sb-desc-col { flex: 1.2; display: flex; flex-direction: column; min-width: 0; }
.ssc-sb-desc { font-size: 1rem; margin: 0 !important; padding: 0 !important; line-height: 1.6; opacity: 0.9; }

.ssc-sb-actions-col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ssc-sb-actions-col .ssc-banner-btn { width: fit-content; }

@media (max-width: 768px) {
    .ssc-banner-card, .ssc-banner-card.align-right { flex-direction: column; }
    .ssc-banner-img-box { width: 100%; height: 200px; min-height: 200px; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .ssc-banner-card.align-right .ssc-banner-img-box { border-left: none; }
    .ssc-banner-footer { flex-direction: column; align-items: flex-start; }
    .ssc-banner-actions { width: 100%; flex-direction: column; }
    .ssc-banner-btn { width: 100%; justify-content: center; }
    
    .ssc-sb-top-row { flex-direction: column !important; padding: 24px; gap: 24px; }
    .ssc-sb-bottom-row { flex-direction: column !important; padding: 24px; gap: 24px; }
    .ssc-sb-img-col, .ssc-sb-title-col, .ssc-sb-desc-col, .ssc-sb-actions-col { width: 100%; flex: none; }
    .ssc-sb-actions-col { align-items: stretch !important; }
    .ssc-sb-actions-col .ssc-banner-btn { width: 100% !important; justify-content: center !important; }
}

.ssc-card.coming-soon, .ssc-banner-card.coming-soon, .ssc-simple-banner-item.coming-soon { background: rgba(255,255,255,0.4); border: 2px dashed #C2C7CF; align-items: center; justify-content: center; color: #72777F; text-align: center; height: 100%; min-height: 240px; border-radius: 24px; display: flex; flex-direction: column; }
.ssc-cs-icon { font-size: 32px; margin-bottom: 10px !important; padding: 0 !important; opacity: 0.5; display: block !important; line-height: 1 !important;}

/* =========================================
   ★ PSI パフォーマンス＆CLS（レイアウトズレ）対策
   ========================================= */
.ssc-plugin-wrap {
    content-visibility: auto;
    contain-intrinsic-size: 400px;
}
.ssc-card-app-image,
.ssc-sb-img-box img {
    aspect-ratio: 16 / 9;
    background-color: rgba(0, 0, 0, 0.02);
}