/* 2026.09.24 変更 SNS共有操作をアイコン＋役割別配色で識別しやすくする */
:root,
html[data-theme="light"] {
    --wb-share-x-bg: #0F172A;
    --wb-share-x-text: #FFFFFF;
    --wb-share-x-border: #0F172A;
    --wb-share-line-bg: #EAFBF0;
    --wb-share-line-text: #0B5D2A;
    --wb-share-line-border: #22C55E;
    --wb-share-image-bg: var(--wb-warning-bg, #FFFBEB);
    --wb-share-image-text: var(--wb-warning, #92400E);
    --wb-share-image-border: #F59E0B;
}

html[data-theme="dark"] {
    --wb-share-x-bg: #020617;
    --wb-share-x-text: #F8FAFC;
    --wb-share-x-border: #64748B;
    --wb-share-line-bg: #123222;
    --wb-share-line-text: #86EFAC;
    --wb-share-line-border: #22C55E;
    --wb-share-image-bg: var(--wb-warning-bg, #3B2F12);
    --wb-share-image-text: var(--wb-warning, #FCD34D);
    --wb-share-image-border: #B45309;
}

.social-share-heading-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
}

.social-share-heading-mark {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wb-primary-border-strong, #818CF8);
    border-radius: 999px;
    background: var(--wb-primary-soft, #EEF2FF);
    color: var(--wb-primary-soft-text, #3730A3);
}

.social-share-heading-icon,
.social-share-action-icon {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-image: var(--social-share-icon-mask);
    mask-image: var(--social-share-icon-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.social-share-heading-icon {
    width: 1.15rem;
    height: 1.15rem;
    -webkit-mask-size: 1.15rem 1.15rem;
    mask-size: 1.15rem 1.15rem;
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4M8.6%2013.5l6.8%204%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-action {
    display: inline-flex;
    min-width: 10rem;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wb-border, #CBD5E1);
    border-radius: 11px;
    box-sizing: border-box;
    font: inherit;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.social-share-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--wb-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

.social-share-action:focus-visible {
    outline: 3px solid var(--wb-focus, #7C3AED);
    outline-offset: 3px;
}

.social-share-action-primary {
    border-color: var(--wb-primary, #4F46E5);
    background: var(--wb-primary, #4F46E5);
    color: var(--wb-on-primary, #FFFFFF);
}

.social-share-action-copy {
    border-color: var(--wb-blue-border, #BFDBFE);
    background: var(--wb-blue-soft, #EAF4FF);
    color: var(--wb-blue-text, #2563EB);
}

.social-share-action-x {
    border-color: var(--wb-share-x-border);
    background: var(--wb-share-x-bg);
    color: var(--wb-share-x-text);
}

.social-share-action-line {
    border-color: var(--wb-share-line-border);
    background: var(--wb-share-line-bg);
    color: var(--wb-share-line-text);
}

.social-share-action-image {
    border-color: var(--wb-share-image-border);
    background: var(--wb-share-image-bg);
    color: var(--wb-share-image-text);
}

.social-share-action-icon {
    width: 1.1rem;
    height: 1.1rem;
    -webkit-mask-size: 1.1rem 1.1rem;
    mask-size: 1.1rem 1.1rem;
}

.social-share-action-icon-share {
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4M8.6%2013.5l6.8%204%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-action-icon-copy {
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2211%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-action-icon-x {
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-width%3D%272.2%27%3E%3Cpath%20d%3D%22M5%205l14%2014M19%205%205%2019%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-action-icon-line {
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%209.8%209.8%200%200%201-4.2-.9L3%2021l1.5-4.2A8.1%208.1%200%200%201%203%2011.5a9%209%200%200%201%2018%200Z%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-action-icon-image {
    --social-share-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2020%22%2F%3E%3C%2Fsvg%3E");
}

.social-share-copy-target {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .social-share-action {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-share-action {
        transition: none;
    }

    .social-share-action:hover {
        transform: none;
    }
}