swell_child

/* ===========================================
SNSシェアボタン カスタマイズ
枠: #ff3131細枠 / 背景: 白 / アイコン: #ff3131
=========================================== */

:root {
–brand-main: #ff3131;
–brand-main-hover: #c62828;
}

/* SWELLシェアボタン：共通スタイル */
.p-shareBtns .p-shareBtns__btn,
.p-shareBtns a[class*=”share-btn”] {
background: #fff !important;
border: 1px solid var(–brand-main) !important;
color: var(–brand-main) !important;
border-radius: 2px !important;
transition: all 0.2s ease;
}

.p-shareBtns .p-shareBtns__btn:hover,
.p-shareBtns a[class*=”share-btn”]:hover {
background: var(–brand-main) !important;
color: #fff !important;
}

.p-shareBtns .p-shareBtns__btn .icon,
.p-shareBtns .p-shareBtns__btn svg,
.p-shareBtns .p-shareBtns__btn i {
fill: var(–brand-main) !important;
color: var(–brand-main) !important;
}

.p-shareBtns .p-shareBtns__btn:hover .icon,
.p-shareBtns .p-shareBtns__btn:hover svg,
.p-shareBtns .p-shareBtns__btn:hover i {
fill: #fff !important;
color: #fff !important;
}

.p-shareBtns .p-shareBtns__btn .__label {
color: inherit !important;
font-weight: bold;
}

/* 個別ブランド色を上書き */
.p-shareBtns .twitter,
.p-shareBtns .facebook,
.p-shareBtns .line,
.p-shareBtns .hatena,
.p-shareBtns .pocket,
.p-shareBtns .copy,
.p-shareBtns .feedly,
.p-shareBtns .bluesky {
background: #fff !important;
border-color: var(–brand-main) !important;
color: var(–brand-main) !important;
}

.p-shareBtns .twitter:hover,
.p-shareBtns .facebook:hover,
.p-shareBtns .line:hover,
.p-shareBtns .hatena:hover,
.p-shareBtns .pocket:hover,
.p-shareBtns .copy:hover,
.p-shareBtns .feedly:hover,
.p-shareBtns .bluesky:hover {
background: var(–brand-main) !important;
color: #fff !important;
}

/* サイトロゴテキストも統一 */
.l-header__logo a,
.c-siteBrand__logo a {
color: var(–brand-main) !important;
}

/* ===== Claude SNS Custom START ===== */
/* ===========================================
SNSシェアボタン カスタマイズ
枠: #ff3131細枠 / 背景: 白 / アイコン: #ff3131
SWELL の c-shareBtns に対応
=========================================== */

:root {
–hyl-main: #ff3131;
–hyl-main-dark: #c62828;
}

/* SWELL c-shareBtns 全体 */
.c-shareBtns .c-shareBtns__item,
.c-shareBtns__list .c-shareBtns__btn {
background: #fff !important;
border: 1px solid var(–hyl-main) !important;
color: var(–hyl-main) !important;
border-radius: 2px !important;
transition: all 0.2s ease;
}

.c-shareBtns .c-shareBtns__item:hover,
.c-shareBtns__list .c-shareBtns__btn:hover {
background: var(–hyl-main) !important;
color: #fff !important;
}

/* アイコン要素 */
.c-shareBtns .c-shareBtns__item svg,
.c-shareBtns .c-shareBtns__item i,
.c-shareBtns__btn svg,
.c-shareBtns__btn i {
fill: var(–hyl-main) !important;
color: var(–hyl-main) !important;
}

.c-shareBtns .c-shareBtns__item:hover svg,
.c-shareBtns .c-shareBtns__item:hover i,
.c-shareBtns__btn:hover svg,
.c-shareBtns__btn:hover i {
fill: #fff !important;
color: #fff !important;
}

/* 個別種別に存在するブランド色を上書き */
.c-shareBtns__item.-twitter-x,
.c-shareBtns__item.-facebook,
.c-shareBtns__item.-line,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-copy,
.c-shareBtns__item.-feedly,
.c-shareBtns__item.-bluesky {
background: #fff !important;
border-color: var(–hyl-main) !important;
color: var(–hyl-main) !important;
}

.c-shareBtns__item.-twitter-x:hover,
.c-shareBtns__item.-facebook:hover,
.c-shareBtns__item.-line:hover,
.c-shareBtns__item.-hatebu:hover,
.c-shareBtns__item.-pocket:hover,
.c-shareBtns__item.-copy:hover,
.c-shareBtns__item.-feedly:hover,
.c-shareBtns__item.-bluesky:hover {
background: var(–hyl-main) !important;
color: #fff !important;
}

/* SWELL がデフォルトで適用する個別SNS色を無効化 */
.c-shareBtns__item.-twitter-x,
.c-shareBtns__item.-twitter-x::before,
.c-shareBtns__item.-facebook,
.c-shareBtns__item.-line,
.c-shareBtns__item.-hatebu {
–bg_def: #fff;
–color_def: var(–hyl-main);
}

/* サイトロゴテキストも統一 */
.l-header__logo a,
.c-siteBrand__logo a,
.p-siteLogoText {
color: var(–hyl-main) !important;
}
/* ===== Claude SNS Custom END ===== */