@charset "utf-8";
/* CSS Document */

/*--reset start--*/
html{font-feature-settings:"palt"; scroll-behavior:smooth; background:var(--C13)}
body,div,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,button,small,strong,table,input{margin:0; font-size:1em}
body{font-family:-apple-system, BlinkMacSystemFont,'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; -webkit-font-smoothing:antialiased; line-height:1.75; color:var(--C11)}/*color, line-height*/
ul,ol{padding:0; list-style:none}
i,em{font-style:normal}
img{max-width:100%}
a{color:inherit; text-decoration:none}
button{background:none; border:0; outline:0; appearance:none}
/*--reset end--*/

/*--共通パーツ start--*/
:root{
    --C1:#960018;/*赤・ボタンの色*/
    --C2:#4C1C24;/*黄土色　→　2502黒*/
    --C3:#DC143C;/**/
    --C4:#fff;/*黒・文字基本色　→　2502白*/
    --C5:#800020;/*白　→　2502紺*/
    --C6:#b4b4b4;/*白灰・メニュー日本語*/
    --C7:#0af;/*リンクの色：水色*/
    --C8:#B7282E;/*灰２・input背景、スライダー背景　→　2502紺*/
    --C9:#fff;/*紺　→　2502白*/
    --C10:#bdddff;/*グローバルメニュー背景色*/
    
    --C11:#000;/*250630追加*/
	--C12:#666;/*グレー*/
    --C13:url(../images/common/pt_01.png);/*new*/
	--C14:#8600ff;/*紫1*/
	--C15:#3e0087;/*紫2*/
	--C16:#1b0044;/*紫3*/
    --C17:#ede8ff;/*紫4*/
    --C18:url(../images/common/pt_03.png), linear-gradient(to bottom,#3e0087,#1b0044);/*紫グラデ*/
    --C19:linear-gradient(to bottom,#222,#000);/*グレーグラデ*/
    --C20:url(../images/common/pt_02.png), linear-gradient(to bottom,#3e0087,#1b0044);/*紫グラデ*/
    --C21:linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 4;/*紫グラデ*/
	--C30:#e3e3e3;/*table背景色*/
}


@media(max-width:789px){
      .PcOnly{display:none !important}
      html{font-size:calc(100vw / 750)}
      body{font-size:28rem}/*基礎font-size*/
      .Btxt{font-size:38rem}/*タイトルなど大きい文字*/
      .Btxt2{font-size:34rem; font-weight:bold}/*少し大きい文字*/
	  .Btxt3{font-size:28rem; font-weight:bold;line-height:150%;}/*エラーメッセージ*/
}

@media(min-width:790px){
    .SpOnly{display:none !important}
    html{font-size:0.1vw}
    body{font-size:16rem}/*基礎font-size*/
    .Btxt{font-size:26rem}/*タイトルなど大きい文字*/
    .Btxt2{font-size:23rem; font-weight:bold}/*少し大きい文字*/
	.Btxt3{font-size:22rem; font-weight:bold}/*エラーメッセージ*/
    a,label,button,summary,select{transition:opacity .6s; cursor:pointer}
    a:hover,label:hover,button:hover,summary:hover{opacity:.6}
    
    html::-webkit-scrollbar{width:5px}/*remはSafariでバグが出るのでpx指定*/
    html::-webkit-scrollbar-track{background-color:var(--C15)}
    html::-webkit-scrollbar-thumb{background-color:var(--C14)}
}

@media(min-width:1000px){
	html{font-size:1px}
}

/*--Header--*/
#Header,
#HeaderNoLink{position:relative}
#HeaderLogo{display:block}
#HeaderMenu{display:flex; align-items:center; text-align:center; line-height:1; font-weight:bold; background: var(--C20)}
.HeaderBtxt{color:var(--C4); display:block}
.HeaderStxt{color:var(--C4); display:block}
.HeaderLogoImg{display:block; width:100%}

#HeaderMenuBg{position:fixed; top:0; left:100vw; background-size:cover; background-position:top center; background-color: rgb(0 0 0 / 0.8); height:100vh; z-index:5; transition:.6s}
#HeaderMenuBg.Active{left:0}
#HeaderMenuUl{position:fixed; font-weight: bold; color:var(--C9); overflow:auto; z-index:6; text-align:right; transition:.6s}
#HeaderMenuUl:not(.Active),
#HeaderMenuBg:not(.Active){opacity:0}
.HeaderMenuLi{display:block; border-bottom:2px solid var(--C14)}
.HeaderMenuLi:last-child{margin-bottom:0}
#CloseBtn{position:absolute}

@media(max-width:789px){
    #Header,
    #HeaderNoLink{min-height:150rem; margin:0 auto; border-bottom: solid 4rem; border-image: linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 4; background:var(--C18);box-sizing: border-box;}
	#HeaderH1{height: 180rem; position: relative}
    #HeaderLogo{width:360rem; max-width:100%;position: absolute; top: 20rem;left: calc(50% - 180rem);}
    #HeaderMenu{justify-content:space-around; height:110rem}
    .HeaderBtxt{font-size:36rem}
    .HeaderStxt{padding-top:4rem; font-size:24rem}
    #HeaderMenuBtn{width:80rem; max-width:100%; position: absolute; top:60rem; right: calc(50% - 320rem); cursor:pointer; transition:opacity .6s}

    #HeaderMenuUl{top:200rem; width:670rem; left:calc(100vw + 40rem); max-height:calc(100vh - 400rem)}
    #HeaderMenuUl.Active{left:40rem}
    .HeaderMenuLi{padding:20rem 30rem}
    #HeaderMenuBg{width:100vw}
    #CloseBtn{top:80rem; right:80rem; width:40rem; height:40rem}
}

@media(min-width:790px){
    #Header,
    #HeaderNoLink{min-height:120rem; margin:0 auto; border-bottom: solid 4rem; border-image: linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 4; background:var(--C18);box-sizing: border-box;}
    #HeaderH1{height: 140rem; position: relative}
    #HeaderLogo{width:280rem; max-width:100%;position: absolute; top: 20rem;left: calc(50% - 140rem);}
    #HeaderMenu{padding:0 calc(50% - 420rem); height:50rem; justify-content:space-between}
    .HeaderBtxt{font-size:20rem}
	.MenuBtnimg{width: 60rem}
    .HeaderStxt{padding-top:3rem}
    #HeaderMenuBtn{width:60rem; max-width:100%; position: absolute; top:50rem; right: calc(50% - 530rem); cursor:pointer; transition:opacity .6s}
    #HeaderMenuUl{top:90rem; width:500rem; left:calc(200vw - 530rem); max-height:calc(100vh - 180rem); padding-top:20rem}
    #HeaderMenuUl.Active{left:calc(100vw - 530rem)}
    .HeaderMenuLi{margin-bottom:10rem; padding:0 30rem 10rem}
    #HeaderMenuBg{width:100vw; cursor:pointer}
    #CloseBtn{top:30rem; right:30rem; width:30rem; height:30rem}
    #HeaderMenuUl::-webkit-scrollbar{width:5rem}
    #HeaderMenuUl::-webkit-scrollbar-track{background-color:transparent}
    #HeaderMenuUl::-webkit-scrollbar-thumb{background-color:var(--C5)}
    
    #HeaderMenuBtn:hover{opacity:.6}
}

/*--メール無効の人に表示（TOPページ）--*/
#MailNone{border:2rem solid red; padding:2em; margin:20rem auto 1em; box-sizing:border-box}
@media(max-width:789px){
    #MailNone{width:670rem}
}
@media(min-width:790px){
    #MailNone{width:1000rem}
}

/*--Footer--*/
#Footer,
#FooterNoLink{color:var(--C9)}
#Footer:not(.NoBt),
#FooterNoLink{border-top:solid 2rem var(--C1)}

.FooterBtxt,
.FooterStxt{display:block; text-align:center}
#FooterLogoA,
#Copy,
#FooterNoLink{display:block}
.FooterMenu{line-height:1.2; font-weight:bold}
#FooterNoLink,
#Copy{text-align:center; line-height:1}

@media(max-width:789px){
    #Footer,
    #FooterNoLink{margin: 28rem 0 0; padding:40rem calc(43% - 420rem) 50rem; background:var(--C18); font-size:14rem}
    #Footer:not(.NoBt){margin-top:100rem}
    #FooterLogoA{padding-top:50rem}
    .FooterBtxt{font-size:32rem; padding-top:20rem}
    #FooterP + .FooterMenu{padding-top:50rem}
    .FooterMenuA{display:block; white-space:nowrap}
    .FooterMenuA::before,
	.FooterMenu{width: 700rem; margin: 0 auto; display:flex; flex-wrap:wrap; justify-content:center; padding:10rem 20rem 16rem}
    #FooterP{padding:0 40rem}
    .FooterMenu:first-child{background:var(--C16); border-top:4rem solid; border-bottom:4rem solid; border-image: linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 4; box-sizing: border-box;}
    #Copy{font-size:24rem}
	.FooterLogoImg{display:block; margin:0 auto 50rem; width: 320rem}
}

@media(min-width:790px){
    #Footer,
    #FooterNoLink{margin: 30rem 0 0; padding:40rem calc(43% - 420rem) 50rem; background:var(--C18); font-size:14rem}
    #Footer:not(.NoBt){margin-top:100rem}
    .FooterBtxt{font-size:18rem; padding-top:10rem}
    #FooterP{padding-bottom:20rem}
    .FooterMenu{display:flex; justify-content:space-around; flex-wrap:wrap; padding:10rem 0 16rem}
    #FooterLogoA{padding-top: 40rem; padding-bottom: 40rem}
	.copyright{font-size:1.2em}
    .FooterMenu:first-child{background:var(--C16); border-top:2rem solid; border-bottom:2rem solid; border-image: linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 2; box-sizing: border-box;}
    #Copy{padding-top:20rem}
    .FooterLogoImg{display:block; margin:0 auto; width: 260rem}
}

/*--Wrapper--*/
.Ttl1{background:var(--C1); color:var(--C5); text-align:center; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:.5em 1em; min-height:50rem}
.Ttl2{color:var(--C9); text-align:center}
.Ttl3{color:var(--C4); text-align:center}
.Link{color:darkblue;}
.BtnArea{display:flex; justify-content:space-between}
.Btn1,
.Btn2,
.Btn3,
.Btn4,
.Btn5{background:var(--C11); color:var(--C4); font-weight:bold; text-align:center; display:flex; justify-content:center; align-items:center; margin:0 auto; line-height:1.3; box-sizing:border-box; flex-direction:column}
.Btn3{background:var(--C9); color:var(--C5)}
.Btn4{background:var(--C2); color:var(--C1)}
.Btn5{background:var(--C11); color:var(--C9); box-sizing:border-box}
.W1{box-sizing:border-box}
.W2{box-sizing:border-box}
div.Btn3{opacity:.35}
.BtnRuby{font-size:.8em}
.TC{text-align:center}
.TJ{text-align:justify}
.Red{color:var(--C8)}
.Blue{color:darkblue;}
.FreeTxt{border-bottom:1rem dotted var(--C1); text-align:justify}
.FreeTxt img{display:block}
.ListDetailPagerA{position:absolute}
.Th,.Td{border:1rem solid var(--C12); padding:.5em; word-break:break-all}
.Th{color:var(--C4); background:var(--C16)}
.Td{color:var(--C11); background:var(--C30)}
table { border-collapse: collapse; border-spacing: 0;}
.Table .Th,
.Table .Td{text-align:center}
.Table2{table-layout:fixed}
.Table2 .Th{width:35%}
.ThRuby{display:block; font-size:.6em; line-height:1}
.FormLabel:not(:first-child){margin-left:1em}
.labelInput{margin-right:.5em}
.ListABox,
.Ul{list-style:disc}
.ListA{display:list-item; color:var(--C7)}
.Ol{list-style:decimal}
.ListABox,
.Ol,
.Ul{padding-left:1em; box-sizing:border-box}
.Ul{list-style-position:inside}
.Li{text-indent:-1.3em; padding-left:1.3em}
.LpImg,
.LpA,
.DelayImg{display:block}
pre img,
.DelayImg{pointer-events:none}
pre a{pointer-events:auto; color:var(--C7); text-decoration:underline}
.DelayImg{margin:0 auto}
.TableInput,
.TableSelect,
.TableTexterea{width:100%; border:1rem solid var(--C9); display:block; margin:0 auto; box-sizing:border-box; padding:.5em; border-radius:10rem; background:var(--C4); color:var(--C11)}
.TableInput::placeholder{color:var(--C6);}
.Details{border:1rem solid var(--C12); background:none; border-radius:10rem; padding:1em; word-break:break-all}
.Summary{color:var(--C11); display:block}
.Summary::-webkit-details-marker {display:none}/* Safari対策 */
.Details[open] .Summary{padding-bottom:1em; border-bottom:1rem solid var(--C12); margin-bottom:1em}
.LbL{line-break:loose; font-feature-settings:normal}
.TtlRuby{display:block; font-size:.7em; line-height:1}
@media(max-width:789px){
    .BtnArea{padding:0 40rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4,
    .Btn5{min-height:70rem; padding:15rem}
    .Btn1,
    .Btn3,
    .Btn4,
    .Btn5{font-size:30rem; width:300rem}
    .Btn2{flex:1 1 210rem}
    .Btn2:not(:first-child){margin-left:20rem}
    .W1{width:700rem; margin:0 auto}
	.W2{width:650rem; margin:0 auto}
    .Mt1{margin-top:100rem}
    .Mt2{margin-top:50rem}
    .Mt3{margin-top:20rem}
    .Mt4{margin-top:10rem}
	.Mb1{margin-bottom:100rem}
	.Mb2{margin-bottom:40rem}
	.Mb3{margin-bottom:20rem}
	.Mb4{margin-bottom:10rem}	
    .Pt1{padding-top:100rem}
    .Pt2{padding-top:50rem}
    .Pt3{padding-top:20rem}
    .Pt4{padding-top:10rem}
    .Pb1{padding-bottom:100rem}
	.Table{width:100%; margin:0 auto}
    .TableSelect,
    .TableTexterea{max-width:400rem; min-height:70rem}
    .TableTexterea{min-height:250rem}
    .FreeTxt img{height:auto !important}
    .Ttl3{font-size:31rem}
    .PointCheckTable .Th,
    .PointCheckTable .Td{font-size:27rem}
    .Th{line-height:1.2}
    .ThRuby{margin-top:5rem}
    .ThS{display:block; font-size:20rem}
}

@media(min-width:790px){
    .BtnArea{padding:0 60rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4,
    .Btn5{min-height:40rem; padding:10rem}
    .Btn3:disabled:hover{opacity:1; cursor:auto}
    .Btn1,
    .Btn3,
    .Btn4,
    .Btn5{font-size:18rem; width:280rem}
    .Btn2{flex:1 1 170rem}
    .Btn2:not(:first-child){margin-left:15rem}
    .W1{width:100%; margin:0 auto}
	.W2{width:80%; margin:0 80rem}
    .Mt1{margin-top:100rem}
    .Mt2{margin-top:50rem}
    .Mt3{margin-top:20rem}
    .Mt4{margin-top:10rem}
	.Mb1{margin-bottom:100rem}
	.Mb2{margin-bottom:40rem}
	.Mb3{margin-bottom:20rem}
	.Mb4{margin-bottom:10rem}	
    .Pt1{padding-top:100rem}
    .Pt2{padding-top:50rem}
    .Pt3{padding-top:20rem}
    .Pt4{padding-top:10rem}
    .Pb1{padding-bottom:100rem}
	.Table{width:100%; margin:0 auto}
    .TableSelect{min-height:50rem}
    .TableTexterea{min-height:200rem}
    #MainColumn:not(.FullWidth){width:1000rem; margin:0 auto}
    .Ttl3{font-size:20rem}
    .PcTC{text-align:center}
}

/*--Top--*/
#FreePassArea{display:flex; justify-content:center; align-items:center;}
#FreePassBtn{display:block; margin: 0 auto}
.ItemAreaUl{background:var(--C18)}
.ItemBtnArea{background:var(--C4); border: solid 2px var(--C16)}
#BannerArea{width:1060rem; margin: 20rem auto;}
#MemberArea{width:1060rem; margin: 0 auto; border: solid 4rem; border-image: linear-gradient(to right,#a4681f, #be8032 16%, #ffffaf 50%, #be8032 84%, #a4681f 100%) 4; background:var(--C4) url("../images/top/bp_01.png");box-sizing: border-box;background-position: bottom;background-repeat: no-repeat}
.TopTtlImg,
.ItemAreaLiImg,
.BannerAImg,
#BookCover{display:block}
#BookTxt{text-align:center}
#BookTxt{font-weight:bold; color:var(--C9)}
.MemberStatusLi{text-align:center; font-weight:bold;}
.MemberStatusEGttl{color:var(--C12)}
.MemberStatusJPttl{color:var(--C11)}
.MemberStatusData{color:var(--C4); background:var(--C11); padding:0 .5em}
.MemberBtnArea{display:flex}
.NoItem{padding:100rem 0;background:var(--C18);color:var(--C9)}
.MemberBtn{line-height:1}
.BannerPush{background:var(--C11); text-align:center; font-weight:bold; color:var(--C4); position:relative}
.Gt{position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; text-align:center; height:100%; font-weight:bold}
@media(max-width:789px){
    #FreePassArea{height:180rem; background-size:50rem}
    #FreePassA{width:700rem}
    #FreePassB{width:750rem}
	.ReguBnrArea{margin:20rem auto 0; width: 100%; text-align: center}
	.ReguBnrs{display: block;padding: 0}
	.ReguBnr{width: 600rem; padding: 0;margin-bottom:10rem; margin-right: 0;display: inline-block}
	.ReguBnr2{width: 340rem; padding: 0; margin-right: 0rem;display: inline-block}
	.ReguBnr2:nth-child(odd){margin-right: 20rem;}
	.ReguBnr3{width: 506rem; padding: 0; margin-right: 0rem;display: inline-block}

    #ItemArea{margin: 0rem auto 40rem; padding: 0}
    .ItemAreaUl{padding:35rem 35rem 0}
    .ItemAreaLi{padding-bottom:45rem; display:block}
	.ItemAreaLiImg{width: 100%}
    .ItemBtnArea{padding:40rem 0}
    .BannerA{display:block; width:700rem;margin:0 auto 20rem;}
	.MemberBnrArea{margin: 30rem auto 30rem; width: 710rem}
	.MemberBnr{width: 600rem; margin: 0 auto 30rem; display: block}
	.PointBuyBnr{width: 600rem; margin: 0 auto; display: block}
    #BannerArea{margin:20rem auto 0; width: 100%;}
    .TopTtl{padding-top:70rem}
    #BookArea{padding-bottom:70rem}
    #BookTxt{font-size:34rem; padding-top:10rem}
    #BookCover{width:530rem; margin:50rem auto 0}
    .BookBtn{width:530rem; margin-top:20rem}
    .MemberStatusBox{border:2rem solid var(--C2)}
    .MemberStatusLi{width:600rem; margin:0 auto; font-size:38rem}
    .MemberStatusLi:not(:first-child){margin-top:30rem}
    .MemberStatus{padding-top:60rem}
    .MemberBtnArea{width:630rem; margin:0 auto; flex-wrap:wrap; justify-content:space-between; padding:55rem}
    .MemberBtn{width:306rem; height:90rem; font-size:36rem; min-height:90rem; box-sizing: border-box; margin:0}
    .MemberBtn:first-child{margin-bottom:18rem}
    .ItemBtnArea .Btn5{width:600rem}
    .ItemBtnArea .Btn5,
    .BookBtn{min-height:100rem; font-size:42rem; border:6rem solid; border-image: var(--C21)}
    .Gt{width:74rem; font-size:32rem}
}

@media(min-width:790px){
    #FreePassArea{height:160rem;}
    #FreePassA{width:700rem; height:120rem}
    #FreePassB{width:750rem; height:120rem}
	.ReguBnrArea{margin:20rem auto 0; width: 1060rem; text-align: center}
	.ReguBnrs{display: block;padding: 0}
	.ReguBnr,.ReguBnr2,.ReguBnr3{width: 506rem; padding: 0;margin-right: 0;display: inline-block}
	.ReguBnr:nth-child(odd){margin-right: 40rem}
	.ReguBnr2:nth-child(odd){margin-right: 40rem}
	.ReguBnr3:nth-child(odd){margin-right: 40rem}
    #ItemArea{margin: 0rem auto 30rem; padding: 0; width: 1060rem}
    .ItemAreaUl{padding:30rem 0 0 30rem; display:flex; flex-wrap:wrap}
    .ItemAreaLi{flex:0 0 312rem; padding:0 31rem 31rem 0}
    .ItemBtnArea{padding:30rem 0 45rem}
    #BannerArea{display:flex; justify-content:center; padding:0rem}
    .BannerA{display:block;}
    .BannerA:not(:nth-child(3n)){margin-right:45rem}
	.MemberBnrArea{margin: 0 auto; width: 1060rem; height: 140rem; text-align: center}
	.MemberBnr{width: 510rem; margin: 0; display: inline-block; float: left}
	.PointBuyBnr{width: 510rem; display: inline-block;  float: right}
    .TopTtl{padding-top:20rem}
    #BookArea{position:relative; height:620rem}
    #BookCover{width:240rem; position:absolute; top:260rem; left:calc(50% - 295rem)}
    #BookTxt{position:absolute; left:calc(50% - 10rem); top:330rem; font-size:20rem}
    .BookBtn{position:absolute; left:calc(50% - 10rem); top:430rem}
    .MemberStatusBox{border:2rem solid var(--C11)}
    .MemberStatus{display:flex; margin:auto 0; padding:30rem 40rem 10rem; flex-wrap:wrap; width:900rem; margin:0 auto; border-bottom:2rem solid var(--C6); box-sizing:border-box; justify-content:center}
    .MemberStatusLi{width:240rem; padding-bottom:30rem}
    .MemberStatusLi:not(:nth-of-type(3n)):not(:last-child){padding-right:19rem}
    .MemberBtnArea{width:820rem; margin:30rem auto 0; padding-bottom:50rem}
    .MemberBtn{flex:0 0 150rem; height:36rem; min-height:36rem; padding:0; font-size:16rem; background:var(--C18); border-radius:18rem}
    
    .ItemBtnArea .Btn5,
    .BookBtn{min-height:50rem; font-size:21rem; width:300rem; border:4rem solid; border-image: var(--C21)}
    .Gt{width:30rem; font-family:"メイリオ", Meiryo,-apple-system, BlinkMacSystemFont,'Helvetica Neue', 'sans-serif'; font-size:32rem}
}

.disabled-btn{
    pointer-events:none;
    cursor:default;
}

.red-btn, 
.red-btn:visited, 
.red-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;
    
    background: linear-gradient(to bottom, 
        #300000 0%,   
        #7a0700 35%,  
        #b80f02 50%,  
        #6b0300 65%,   
        #240000 100%   
    ) !important; 
    
    border: 2px solid #ffffff; 
    box-shadow: 
        0 0 0 2px #3d0300,
        inset 0 0 0 1px #3d0300,       
        inset 0 0 4px 2px rgba(255, 255, 255, 0.45); 
    box-sizing: border-box;
    transition: all 0.3s ease;
    opacity: 1 !important; 
    filter: none !important; 
}

.red-btn span {
    color: #ffffff !important; 
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8.5);
    white-space: nowrap; 
}

.red-btn:hover,
.red-btn:active {
    background: linear-gradient(to bottom, 
        #4d0200 0%, 
        #9c0d02 35%, 
        #db1a0d 50%,  
        #8a0800 65%, 
        #3b0100 100%
    ) !important;
    transform: translateY(-1px);
    opacity: 1 !important; 
    box-shadow: 
        0 0 0 2px #3d0300,                  
        inset 0 0 0 1px #3d0300,              
        inset 0 0 6px 3px rgba(255, 255, 255, 0.65),
        0 4px 12px rgba(184, 15, 2, 0.25); 
}

.red-btn:active {
    transform: translateY(1px);
}

.black-btn, 
.black-btn:visited, 
.black-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;
    
    background: linear-gradient(to bottom, 
        #121212 0%,    
        #2e2e2e 35%,  
        #595959 50%,  
        #242424 65%,   
        #0a0a0a 100%  
    ) !important; 
    
    border: 2px solid #ffffff; 
    box-shadow: 
        0 0 0 2px #212121,             
        inset 0 0 0 1px #212121,      
        inset 0 0 4px 2px rgba(255, 255, 255, 0.45); 
    box-sizing: border-box;
    transition: all 0.3s ease;
    opacity: 1 !important; 
    filter: none !important; 
}

.black-btn span {
    color: #ffffff !important; 
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap; 
}

.black-btn:hover,
.black-btn:active {
    background: linear-gradient(to bottom, 
        #212121 0%, 
        #424242 35%, 
        #757575 50%,  
        #383838 65%, 
        #141414 100%
    ) !important;
    transform: translateY(-1px);
    opacity: 1 !important; 
    box-shadow: 
        0 0 0 2px #212121,                  
        inset 0 0 0 1px #212121,              
        inset 0 0 6px 3px rgba(255, 255, 255, 0.65),
        0 4px 12px rgba(255, 255, 255, 0.15); 
}
.black-btn:active {
    transform: translateY(1px);
}

.purple-btn,
.purple-btn:visited,
.purple-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;
    background: linear-gradient(to bottom,
        #240052 0%,
        #31006f 15%,
        #3e0087 35%,
        #5200b0 50%,
        #3e0087 65%,
        #28005c 85%,
        #1b0044 100%
    ) !important;

    border: 2px solid #f6f4ff;

    box-shadow:
        0 0 0 2px #160033,
        inset 0 0 0 1px #6b39c4,
        inset 0 1px 8px rgba(255,255,255,.40);

    box-sizing: border-box;
    transition: all .25s ease;

    opacity: 1 !important;
    filter: none !important;
}

.purple-btn span {
    color: #ffffff !important;
    font-weight: bold;
    white-space: nowrap;

    text-shadow:
        0 1px 1px rgba(0,0,0,.9),
        0 2px 4px rgba(0,0,0,.6);
}

.purple-btn:hover,
.purple-btn:active {
    background: linear-gradient(to bottom,
        #330075 0%,
        #420092 15%,
        #5600bf 35%,
        #6a00e6 50%,
        #5600bf 65%,
        #3d0088 85%,
        #240054 100%
    ) !important;

    transform: translateY(-1px);

    box-shadow:
        0 0 0 2px #160033,
        inset 0 0 0 1px #8d57e8,
        inset 0 1px 10px rgba(255,255,255,.55),
        0 4px 12px rgba(62,0,135,.35);

    opacity: 1 !important;
}

.purple-btn:active {
    transform: translateY(1px);
}

.grey-btn,
.grey-btn:visited,
.grey-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;

    background: linear-gradient(
        to bottom,
        #b5b5b5 0%,
        #9a9a9a 50%,
        #7a7a7a 100%
    ) !important;

    border: 2px solid #dcdcdc;

    box-shadow:
        0 0 0 2px #666666,
        inset 0 1px 2px rgba(255,255,255,.25);

    box-sizing: border-box;
    transition: all 0.3s ease;
    opacity: 1 !important;
    filter: none !important;
}

.grey-btn span {
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    white-space: nowrap;
}

.grey-btn:hover,
.grey-btn:active {
    background: linear-gradient(
        to bottom,
        #c5c5c5 0%,
        #ababab 50%,
        #8a8a8a 100%
    ) !important;

    transform: translateY(-1px);

    box-shadow:
        0 0 0 2px #777777,
        inset 0 1px 3px rgba(255,255,255,.35),
        0 3px 8px rgba(0,0,0,.15);

    opacity: 1 !important;
}

.grey-btn:active {
    transform: translateY(1px);
}


@media(max-width:789px){
	.red-btn,
    .red-btn:visited {
        height: 40px;  
        padding: 0 4px;   
        border-radius: 11px; 
        border: 1px solid #ffffff; 
        box-shadow: 
            0 0 0 1px #3d0300,         
            inset 0 0 0 1px #3d0300,         
            inset 0 0 3px 1px rgba(255, 255, 255, 0.6); 
        opacity: 1 !important;
    }
    .red-btn span {
        font-size: clamp(14px, 4.0vw, 18px);
        letter-spacing: 0px; 
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); 
    }
    .red-btn:hover,
    .red-btn:active {
        background: linear-gradient(to bottom, 
            #4d0200 0%, #9c0d02 35%, #db1a0d 50%, #8a0800 65%, #3b0100 100%
        ) !important;
        opacity: 1 !important;
        box-shadow: 
            0 0 0 1px #3d0300,
            inset 0 0 0 1px #3d0300,
            inset 0 0 4px 2px rgba(255, 255, 255, 0.7);
    }
    .black-btn,
    .black-btn:visited {
        height: 40px;  
        padding: 0 4px;   
        border-radius: 11px; 
        border: 1px solid #ffffff; 
        box-shadow: 
            0 0 0 1px #212121,         
            inset 0 0 0 1px #212121,         
            inset 0 0 3px 1px rgba(255, 255, 255, 0.6); 
        opacity: 1 !important;
    }
    .black-btn span {
        font-size: clamp(14px, 4.0vw, 18px);
        letter-spacing: 0px; 
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); 
    }
    .black-btn:hover,
    .black-btn:active {
        background: linear-gradient(to bottom, 
            #212121 0%, #424242 35%, #757575 50%, #383838 65%, #141414 100%
        ) !important;
        opacity: 1 !important;
        box-shadow: 
            0 0 0 1px #212121,
            inset 0 0 0 1px #212121,
            inset 0 0 4px 2px rgba(255, 255, 255, 0.7);
    }
    .purple-btn,
    .purple-btn:visited {

        height: 40px;
        padding: 0 4px;

        border-radius: 11px;

        border: 1px solid #f6f4ff;

        box-shadow:
            0 0 0 1px #160033,
            inset 0 0 0 1px #6b39c4,
            inset 0 1px 4px rgba(255,255,255,.45);

        opacity: 1 !important;
    }

    .purple-btn span {
        font-size: clamp(14px,4vw,18px);
        letter-spacing: 0;

        text-shadow:
            0 1px 2px rgba(0,0,0,.85);
    }

    .purple-btn:hover,
    .purple-btn:active {
        background: linear-gradient(to bottom,
            #330075 0%,
            #420092 15%,
            #5600bf 35%,
            #6a00e6 50%,
            #5600bf 65%,
            #3d0088 85%,
            #240054 100%
        ) !important;

        box-shadow:
            0 0 0 1px #160033,
            inset 0 0 0 1px #8d57e8,
            inset 0 1px 5px rgba(255,255,255,.65);

        opacity: 1 !important;
    }
    
    .grey-btn,
    .grey-btn:visited{
        height:40px;
        padding:0 4px;

        border-radius:11px;
        border:1px solid #dcdcdc;

        box-shadow:
            0 0 0 1px #666666,
            inset 0 1px 2px rgba(255,255,255,.25);
    }

    .grey-btn span{
        font-size:clamp(14px,4vw,18px);
        letter-spacing:0;
        text-shadow:0 1px 2px rgba(0,0,0,.5);
    }
}



@media(min-width:790px){
	.red-btn {
        height: 70px;     
        padding: 0 20px;
    }
    .red-btn span {
        font-size: 24px;   
        letter-spacing: 2px; 
    }    
	.black-btn {
        height: 70px;     
        padding: 0 20px;
    }
    .black-btn span {
        font-size: 24px;   
        letter-spacing: 2px; 
    }    
    .purple-btn{
        height: 70px;
        padding: 0 20px;
    }

    .purple-btn span{
        font-size: 24px;
        letter-spacing: 2px;
    }
    .grey-btn{
        height:70px;
        padding:0 20px;
    }

    .grey-btn span{
        font-size:24px;
        letter-spacing:2px;
    }
}