@charset "utf-8";
/* =============================================================================
   GYM CLOUD 共通ボタン（2026）
   使い方：<a class="gcBtn gcYellow" href="..."><span class="gcBtnIcon"><i class="material-icons">search</i></span><span class="gcBtnLabel">ラベル</span></a>
   色：gcPink / gcRed / gcBlue / gcOrange / gcPurple / gcGreen / gcBlack / gcYellow / gcGray
   ============================================================================= */
.gcBtn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:10px 44px;box-sizing:border-box;border:0;border-radius:10px;color:#fff !important;font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.3;text-align:center;text-decoration:none !important;background:var(--gc-c2);box-shadow:0 3px 0 var(--gc-c3),0 6px 14px rgba(0,0,0,.12);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;cursor:pointer;}
.gcBtn::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.8;}
.gcBtn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 5px 0 var(--gc-c3),0 10px 18px rgba(0,0,0,.16);}
.gcBtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gc-c3),0 3px 8px rgba(0,0,0,.12);}
.gcBtnIcon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);}
.gcBtnIcon .material-icons{margin:0;font-size:20px;color:inherit;line-height:1;}

/* 色 */
.gcPink{--gc-c2:#cc1a6e;--gc-c3:#9e1254;}
.gcRed{--gc-c2:#ec3642;--gc-c3:#b51f2a;}
.gcBlue{--gc-c2:#005799;--gc-c3:#003f70;}
.gcOrange{--gc-c2:#f26522;--gc-c3:#c54d12;}
.gcPurple{--gc-c2:#6f42b0;--gc-c3:#522f86;}
.gcGreen{--gc-c2:#009a43;--gc-c3:#007332;}
.gcBlack{--gc-c2:#222;--gc-c3:#000;}
.gcYellow{--gc-c2:#ffbe00;--gc-c3:#c99600;}
.gcGray{--gc-c2:#e8e8e8;--gc-c3:#c4c4c4;}
.gcBtn.gcYellow{color:#222 !important;}
.gcBtn.gcYellow .gcBtnIcon{background:rgba(255,255,255,.4);}
.gcBtn.gcGray{color:#757575 !important;font-weight:500;}
.gcBtn.gcGray .gcBtnIcon{background:rgba(0,0,0,.06);}

/* タブ切替用（選択中は .fcs でピンク、未選択は黄） */
.gcBtn.gcTab{--gc-c2:#ffbe00;--gc-c3:#c99600;display:flex;padding:10px 20px;line-height:1.3;background:var(--gc-c2);color:#222 !important;}
.gcBtn.gcTab .gcBtnIcon{background:rgba(255,255,255,.4);}
.gcBtn.gcTab::after{display:none;}
.gcBtn.gcTab.fcs{--gc-c2:#cc1a6e;--gc-c3:#9e1254;color:#fff !important;}
.gcBtn.gcTab.fcs .gcBtnIcon{background:rgba(255,255,255,.2);}

/* カテゴリーボタン（ul.categoryListBox に .gcCatList を付与） */
.categoryListBox.gcCatList li a{position:relative;overflow:hidden;border-radius:10px;background:#ffbe00;box-shadow:0 3px 0 #c99600,0 6px 14px rgba(0,0,0,.12);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;}
.categoryListBox.gcCatList li a:hover{opacity:1;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 5px 0 #c99600,0 10px 18px rgba(0,0,0,.16);}
.categoryListBox.gcCatList li a:active{transform:translateY(2px);box-shadow:0 1px 0 #c99600,0 3px 8px rgba(0,0,0,.12);}
.categoryListBox.gcCatList li a::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-top:2px solid #222;border-right:2px solid #222;transform:translateY(-50%) rotate(45deg);opacity:.7;}
.categoryListBox.gcCatList li a .titleWrap{box-sizing:border-box;padding-right:28px;}
.categoryListBox.gcCatList li .title{color:#222;font-weight:700;}

/* スマホ */
@media screen and (max-width:767px){
	.gcBtn{min-height:52px;padding:8px 32px;gap:6px;font-size:14px;}
	.gcBtn::after{right:12px;width:6px;height:6px;}
	.gcBtnIcon{width:28px;height:28px;}
	.gcBtnIcon .material-icons{font-size:17px;}
	.gcBtn.gcTab{padding:8px 12px;}
}
@media screen and (max-width:800px){
	.categoryListBox.gcCatList li a::after{display:none;}
	.categoryListBox.gcCatList li a .titleWrap{padding-right:0;}
}