@charset "UTF-8";

/****************************
色設定
****************************/
:root {
  --primary-color:  #0b318f;
  --second-color:   #e60020;
  --accent-color:   #FFEA5E;
  --text-color:     #333;
  --white-color:    #fff;
  --black-color:    #000;
  --lightgray-color:#f4f4f4;
}

/**** 追従バナー ****/
@media screen and (min-width: 640px){
#footerbanner.rzf-fixed-banner a img {height: inherit;}
}
@media screen and (max-width: 640px){
#footerbanner.rzf-fixed-banner {
width: inherit;
max-width: 78%;
}
#footerbanner.rzf-fixed-banner a {width: 100%;}
}

#footerbanner.rzf-fixed-banner a {display: flex;}
#footerbanner.rzf-fixed-banner a:hover {
filter: none;
cursor: pointer;
opacity: 1!important;
}
#footerbanner.rzf-fixed-banner a.bnr_btn {
width: 25px;
height: 25px;
top: -16px;
right: -25px;
border-radius: 50%;
}

#footerbanner.rzf-fixed-banner .rzf-bticket-btn {
width: 100%;
max-width: 400px;
min-width: 280px;
margin: 0 auto 0.5em 0 !important;
padding: 0;
box-sizing: border-box;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a{
display: flex;
justify-content: center;
align-items: center;
gap: 0.7em;
position: relative;
margin: 0 auto;
padding: 0.8em 50px 0.8em 15px;
background-color: var(--black-color);
clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 100%, 0% 10px);
z-index: 100;
text-align: left!important;
font-size: 1.1em;
font-weight: 600;
line-height: 1.3;
text-decoration:none!important;
z-index: 0;
color: #fff!important;

background-image: linear-gradient(45deg, var(--primary-color) 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: 0.8s ease-in-out!important;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__text {
font-size: 1.2em;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__img {
flex-basis: 6em;
line-height: 1;
margin-top: 2px;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__img img {
width: 100%;
margin: 0!important;
clip-path: inherit;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a::after {
position: absolute;
/*right: 30px;*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
display: flex;
align-items: center;
font-size: 1.3em;
color: var(--white-color);
top: 50%;
bottom: 50%;
right: 15px;
/*transition: 0.3s;*/
transition: 0.2s ease-in 0.4s!important;
}

#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover {
opacity: 1!important;
color: var(--white-color)!important;
/*background-color: var(--primary-color);*/
background-position: 0;
}
/*#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover .rzf-bticket-btn__text {
opacity: 0.8!important;
}*/
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover .rzf-bticket-btn__img img {
opacity: 1!important;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover::after {
right: 10px;
/*color: var(--primary-color);*/
}

@media screen and (max-width: 767px) {
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__text {
font-size: 1em;
}
}
@media screen and (max-width: 600px) {
#footerbanner.rzf-fixed-banner .rzf-bticket-btn{padding: 0 0.2em;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a {padding: 0.8em 35px 0.8em 8px; font-size: 0.9em;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a::after {right: 10px;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover::after {right: 6px;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__img {flex-basis: auto;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn__img img {max-width: 80px !important;}
}
@media screen and (max-width: 450px) {
#footerbanner.rzf-fixed-banner .rzf-bticket-btn {
margin: 0 auto 0.3em 0 !important;
min-width: 265px;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a {gap: 0.5em; padding: 0.5em 35px 0.5em 8px;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a .rzf-bticket-btn__text {
font-size: 0.9em;
}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a::after {right: 10px;}
#footerbanner.rzf-fixed-banner .rzf-bticket-btn a:hover::after {right: 3px;}
}