/* シェアボタン */
.c-share-button--mono {
--tcd-share-button-icon: none;
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-icon-color: #000000;
--tcd-share-button-border: 1px solid #dddddd;
--tcd-share-button-bg-color: #ffffff;
--tcd-share-button-bg-color--x: #ffffff;
--tcd-share-button-bg-color--facebook: #ffffff;
--tcd-share-button-bg-color--line: #ffffff;
--tcd-share-button-bg-color--hatena: #ffffff;
--tcd-share-button-bg-color--note: #ffffff;
--tcd-share-button-bg-color--pinterest: #ffffff;
--tcd-share-button-bg-color--copy: #ffffff;
}
.c-share-button--color {
--tcd-share-button-icon: none;
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-icon-color: #ffffff;
--tcd-share-button-border: none;
--tcd-share-button-bg-color: #000000;
--tcd-share-button-bg-color--x: #000000;
--tcd-share-button-bg-color--facebook: #0866ff;
--tcd-share-button-bg-color--line: #06C755;
--tcd-share-button-bg-color--hatena: #00A4DE;
--tcd-share-button-bg-color--note: #040000;
--tcd-share-button-bg-color--pinterest: #e61d26;
--tcd-share-button-bg-color--copy: #222222;
}
.c-share-button--x {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--x);
}
.c-share-button--facebook {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.45em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--facebook);
}
.c-share-button--line {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.45em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--line);
}
.c-share-button--hatena {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--hatena);
}
.c-share-button--note {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--note);
}
.c-share-button--pinterest {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--pinterest);
}
.c-share-button--copy {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.4em;
--tcd-share-button-bg-color: var(--tcd-share-button-bg-color--copy);
}
.c-share-button--copy.is-copied {
--tcd-share-button-icon: url('data:image/svg+xml,');
--tcd-share-button-icon-size: 0.6em;
}
.c-share-button {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
font-size: 40px;
}
.c-share-button__item {
position: relative;
display: grid;
width: 1em;
height: 1em;
padding: 0;
border-radius: 50%;
background-color: var(--tcd-share-button-bg-color);
border: var(--tcd-share-button-border);
}
.c-share-button__item:before {
content: '';
place-self: stretch;
background-color: var(--tcd-share-button-icon-color);
mask: var(--tcd-share-button-icon) no-repeat center / var(--tcd-share-button-icon-size);
}
.c-share-button--copy:after {
content: attr(data-popup);
position: absolute;
font-size: 10px;
white-space: nowrap;
background: #f6f6f6;
padding: 0.5em 1em;
top: -30px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
transition-property: opacity pointer-events visivility;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.c-share-button--copy.is-copied {
pointer-events: none;
}
.c-share-button--copy:not(.is-copied):after {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
@media (any-hover: hover) {
.c-share-button__item:hover {
opacity: 0.7;
}
}
@media (max-width: 767px) {
.c-share-button {
gap: 0.3em;
font-size: 35px;
}
}
@media (max-width: 575px) {
.c-share-button--copy:after {
left: auto;
right: -20px;
transform: initial;
}
}