/**
 * SNSリンクアイコンブロック スタイル
 */

/* Base Styles */
.fg-sns-link-icons {
    width: 100%;
}

.fg-sns-link-icons__inner {
    display: block;
    width: 100%;
}

/* SNS Links */
.fg-sns-link-icons__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Alignment */
.fg-sns-link-icons--align-left .fg-sns-link-icons__list {
    justify-content: flex-start !important;
    align-content: flex-start;
}

.fg-sns-link-icons--align-center .fg-sns-link-icons__list {
    justify-content: center !important;
    align-content: center;
}

.fg-sns-link-icons--align-right .fg-sns-link-icons__list {
    justify-content: flex-end !important;
    align-content: flex-end;
}

.fg-sns-link-icons__item {
    margin: 0;
    padding: 0;
}

.fg-sns-link-icons__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.fg-sns-link-icons__icon {
    width: 24px;
    height: 24px;
    display: block;
    transition: all 0.3s ease;
}

/* Brand Colors */
.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook {
    --fg-sns-color: #1877f2;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter,
.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x {
    --fg-sns-color: #1da1f2;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram {
    --fg-sns-color: #e4405f;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube {
    --fg-sns-color: #ff0000;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line {
    --fg-sns-color: #00c300;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin {
    --fg-sns-color: #0077b5;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok {
    --fg-sns-color: #000000;
}

.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest {
    --fg-sns-color: #bd081c;
}

/* Custom Color */
.fg-sns-link-icons--color-custom {
    --fg-sns-color: var(--fg-sns-custom-color, #333333);
}

.fg-sns-link-icons--color-custom .fg-sns-link-icons__link {
    --fg-sns-color: var(--fg-sns-custom-color, #333333);
}

/* SNS Design: Simple */
.fg-sns-link-icons--design-simple .fg-sns-link-icons__link {
    padding: 0;
    background: none;
    border: none;
}

.fg-sns-link-icons--design-simple .fg-sns-link-icons__link:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Simple design with brand/custom colors */
.fg-sns-link-icons--design-simple .fg-sns-link-icons__icon {
    filter: none;
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest .fg-sns-link-icons__icon {
    filter: none;
}

/* Apply color to SVG icons using CSS filters (for simple design) */
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1352%) hue-rotate(208deg) brightness(97%) contrast(97%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter .fg-sns-link-icons__icon,
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(1352%) hue-rotate(188deg) brightness(97%) contrast(97%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1352%) hue-rotate(320deg) brightness(97%) contrast(97%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(1352%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1352%) hue-rotate(90deg) brightness(97%) contrast(97%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(38%) sepia(98%) saturate(1352%) hue-rotate(188deg) brightness(97%) contrast(97%);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok .fg-sns-link-icons__icon {
    filter: brightness(0);
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest .fg-sns-link-icons__icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(1352%) hue-rotate(340deg) brightness(97%) contrast(97%);
}

/* Custom color for simple design - use mask-image to apply custom color */
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-custom .fg-sns-link-icons__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-custom .fg-sns-link-icons__icon {
    /* Use the icon itself as a mask and fill with custom color */
    background-color: var(--fg-sns-color, #333333);
    -webkit-mask-image: var(--fg-sns-icon-url);
    mask-image: var(--fg-sns-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* Hide the original icon image */
    opacity: 0;
    width: 24px;
    height: 24px;
    display: block;
}

/* Show the masked version */
.fg-sns-link-icons--design-simple.fg-sns-link-icons--color-custom .fg-sns-link-icons__link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: var(--fg-sns-color, #333333);
    -webkit-mask-image: var(--fg-sns-icon-url);
    mask-image: var(--fg-sns-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}

/* SNS Design: Rounded */
.fg-sns-link-icons--design-rounded .fg-sns-link-icons__link {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook {
    background: rgba(24, 119, 242, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook:hover {
    background: rgba(24, 119, 242, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter,
.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x {
    background: rgba(29, 161, 242, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter:hover,
.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x:hover {
    background: rgba(29, 161, 242, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram {
    background: rgba(228, 64, 95, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram:hover {
    background: rgba(228, 64, 95, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube {
    background: rgba(255, 0, 0, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube:hover {
    background: rgba(255, 0, 0, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line {
    background: rgba(0, 195, 0, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line:hover {
    background: rgba(0, 195, 0, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin {
    background: rgba(0, 119, 181, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin:hover {
    background: rgba(0, 119, 181, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok {
    background: rgba(0, 0, 0, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok:hover {
    background: rgba(0, 0, 0, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest {
    background: rgba(189, 8, 28, 0.1);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest:hover {
    background: rgba(189, 8, 28, 0.2);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-custom .fg-sns-link-icons__link {
    background: color-mix(in srgb, var(--fg-sns-color) 10%, transparent);
}

.fg-sns-link-icons--design-rounded.fg-sns-link-icons--color-custom .fg-sns-link-icons__link:hover {
    background: color-mix(in srgb, var(--fg-sns-color) 20%, transparent);
    transform: translateY(-2px);
}

/* SNS Design: Circle */
.fg-sns-link-icons--design-circle .fg-sns-link-icons__link {
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    border: none;
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook {
    background: rgba(24, 119, 242, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook:hover {
    background: rgba(24, 119, 242, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter,
.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x {
    background: rgba(29, 161, 242, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter:hover,
.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x:hover {
    background: rgba(29, 161, 242, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram {
    background: rgba(228, 64, 95, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram:hover {
    background: rgba(228, 64, 95, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube {
    background: rgba(255, 0, 0, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube:hover {
    background: rgba(255, 0, 0, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line {
    background: rgba(0, 195, 0, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line:hover {
    background: rgba(0, 195, 0, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin {
    background: rgba(0, 119, 181, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin:hover {
    background: rgba(0, 119, 181, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok {
    background: rgba(0, 0, 0, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok:hover {
    background: rgba(0, 0, 0, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest {
    background: rgba(189, 8, 28, 0.1);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest:hover {
    background: rgba(189, 8, 28, 0.2);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-custom .fg-sns-link-icons__link {
    background: color-mix(in srgb, var(--fg-sns-color) 10%, transparent);
}

.fg-sns-link-icons--design-circle.fg-sns-link-icons--color-custom .fg-sns-link-icons__link:hover {
    background: color-mix(in srgb, var(--fg-sns-color) 20%, transparent);
    transform: scale(1.1);
}

.fg-sns-link-icons--design-circle .fg-sns-link-icons__icon {
    width: 20px;
    height: 20px;
}

/* SNS Design: Outline */
.fg-sns-link-icons--design-outline .fg-sns-link-icons__link {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook {
    border-color: #1877f2;
    color: #1877f2;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--facebook:hover {
    background: #1877f2;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter,
.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x {
    border-color: #1da1f2;
    color: #1da1f2;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--twitter:hover,
.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--x:hover {
    background: #1da1f2;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram {
    border-color: #e4405f;
    color: #e4405f;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--instagram:hover {
    background: #e4405f;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube {
    border-color: #ff0000;
    color: #ff0000;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--youtube:hover {
    background: #ff0000;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line {
    border-color: #00c300;
    color: #00c300;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--line:hover {
    background: #00c300;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin {
    border-color: #0077b5;
    color: #0077b5;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--linkedin:hover {
    background: #0077b5;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok {
    border-color: #000000;
    color: #000000;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--tiktok:hover {
    background: #000000;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest {
    border-color: #bd081c;
    color: #bd081c;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-brand .fg-sns-link-icons__link--pinterest:hover {
    background: #bd081c;
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-custom .fg-sns-link-icons__link {
    border-color: var(--fg-sns-color);
    color: var(--fg-sns-color);
}

.fg-sns-link-icons--design-outline.fg-sns-link-icons--color-custom .fg-sns-link-icons__link:hover {
    background: var(--fg-sns-color);
    opacity: 0.9;
}

.fg-sns-link-icons--design-outline .fg-sns-link-icons__link:hover .fg-sns-link-icons__icon {
    filter: invert(1);
}

.fg-sns-link-icons--design-outline .fg-sns-link-icons__icon {
    width: 20px;
    height: 20px;
}

/* SNS Design: Gradient */
.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link {
    width: 40px;
    height: 40px;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    border: none;
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--facebook:hover {
    background: linear-gradient(135deg, #1877f2 0%, #0d5fbf 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--twitter:hover,
.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--x:hover {
    background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--instagram:hover {
    background: linear-gradient(135deg, #e4405f 0%, #c13584 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--youtube:hover {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--line:hover {
    background: linear-gradient(135deg, #00c300 0%, #00a000 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--linkedin:hover {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--tiktok:hover {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__link--pinterest:hover {
    background: linear-gradient(135deg, #bd081c 0%, #8b0614 100%);
}

.fg-sns-link-icons--design-gradient .fg-sns-link-icons__icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* Responsive */
@media (min-width: 768px) {
    .fg-sns-link-icons {
        margin-top: 1rem;
    }
}