@charset "UTF-8";
 

/* ///////////////////////////////////////////投票/////////////////////////////////////////// */



.vote_block {
    width: 100%;
    margin: clamp(2rem, calc(0rem + 8vw), 6rem) auto;
    /* padding: 1rem; */
    position: relative;
}

.heading {
    margin: 0 auto clamp( 1rem, calc( 0.5rem + 2vw ), 2rem ) auto;
    text-align: center;
    padding: 0rem 1rem;
}

.heading p {
  font-size: clamp( 20px, calc( 18px + 0.5vw ), 24px );
  font-weight: 500;
  color: #ebebeb;
}

.heading_asterisk_block {
    text-align: center;
    display: inline-grid;
    margin-top: 1rem;
}

p.heading_asterisk {
    font-size: clamp( 14px, calc( 12px + 0.5vw ), 18px );
    padding-left: 1em;
    text-indent: -1em;
    text-align: left;
    display: inline-block;
}


.vote_block h2 {
font-size: clamp(40px, calc(32px + 2vw), 56px);
    margin-bottom: 1rem;
    text-shadow: 2px 3px 0 #630500, 4px 3px #630500, 1px -1px #630500, -1px 1px #630500, -1px -1px #630500;
    color: #e4c566;
     position: relative;
  padding: 0 65px;
}

.vote_block h2:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #e2c76e;
}

.vote_block h2 span {
  position: relative;
  padding: 0 clamp( 1rem, calc( 0.5rem + 2vw ), 2rem );
  background: #eb0b00;
}

.vote_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 2rem 1rem 0rem 1rem;
}

.card_inner_flex {
  display: flex;
  gap: 0.5rem;
  text-align: left;
  justify-content: center;
  align-items: flex-start;
}

.card_inner_flex_left {
  width: 25%;
}

.card_inner_flex_right {
  width: 75%;
}

.card_block {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* background-color: #1c1c1c;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
    text-align: center;
	display: block;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 0px rgb(40 0 0 / 30%); */
}

.card {
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  border-radius: 10px;

  background-color: #1c1c1c;
  background-image: linear-gradient(135deg, #222222 25%, transparent 25%), linear-gradient(225deg, #222222 25%, transparent 25%), linear-gradient(315deg, #222222 25%, transparent 25%), linear-gradient(45deg, #222222 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: -10px 0, -10px 0, 0 0, 0 0;
  box-shadow: 0px 5px 15px 0px rgb(40 0 0 / 30%);
}

.card_2 {
  background-color: #333333;
  background-image: linear-gradient(135deg, #272727 25%, transparent 25%), linear-gradient(225deg, #272727 25%, transparent 25%), linear-gradient(315deg, #272727 25%, transparent 25%), linear-gradient(45deg, #272727 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: -10px 0, -10px 0, 0 0, 0 0;
  box-shadow: 0px 5px 15px 0px rgb(40 0 0 / 30%);
}

.card img {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 0rem auto;
  border-radius: 3px;
}

.card h2 {
  font-size: 20px;
  text-align: left;
	display: inline-block;
  margin-bottom: 0.3rem;
}

.card h3 {
  font-size: 20px;
  text-align: left;
	display: inline-block;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.card h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.card p {
  font-size: 14px;
  font-weight: 500;
  color: #cfcfcf;
}

p.number {
    font-size: 14px;
    font-weight: 800;
    position: relative;
    padding: 0rem 0.3rem;
    border-radius: 2px;
    background-color: #e4c566;
    color: #1c1c1c;
    width: 70px;
    margin-bottom: 0.5rem;
    text-align: center;
    /* margin: 0 auto 0.5rem auto; */
}

span.entry_name {
  font-size: 16px;
  font-weight: 500;
}

.card audio {
  width: 100%;
  max-width: 100%;
    margin-top: 1rem;
}

.button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: 1rem 0.5rem;
    border: none;
    border-radius: 0px 0px 10px 10px;
    color: #1c1c1c;
font-weight: 800;
    font-size: 22px;
    background-image: linear-gradient(139deg, #e4c566, #ffec92 50%, #c0912a);
}

.button-2:hover {

  background-image: linear-gradient(139deg, #ffec92 50%);
}

.vote_btn_area {
  position: relative;
}

.vote_btn_area_sticky {
bottom: 0px;
    font-size: 16px;
    display: block;
    position: -webkit-sticky;
    position: sticky;
    z-index: 800;
    padding: clamp( 1rem, calc( 0.5rem + 2vw ), 2rem ) 1rem clamp( 1.5rem, calc( 1rem + 2vw ), 2.5rem ) 1rem;
    border-top: 4px solid #000000;
    background: radial-gradient(#292929 15%, transparent 16%) 0 0, radial-gradient(#292929 15%, transparent 16%) 5px 5px, radial-gradient(#292929 15%, transparent 20%) 0 1px, radial-gradient(#292929 15%, transparent 20%) 5px 6px;
    background-color: #141414;
    background-size: 10px 10px;
}


 .vote_btn_area button,.vote_btn_apply_area button {
    width: 100%;
    max-width: clamp( 250px, calc( 75px + 43.75vw ), 600px );
    position: relative;
    padding: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
    font-size: clamp( 22px, calc( 17px + 1.25vw ), 32px );
    font-weight: 900;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    color: #d62119;
    font-feature-settings: "palt";
    border: solid 2px #9e7200;
    }

  .vote_btn-container {
    text-align: center;
    margin: 0 auto;
    }

  .vote_btn-effect-9 {
     background-image: linear-gradient(139deg, #e4c566, #ffec92 50%, #c0912a);
     box-shadow: 0 5px 0 #bc8600;
    }

  .vote_btn-effect-9:hover {   
    transform: translateY(3px);
    text-decoration: none;
    box-shadow: 0 2px 0 #aaaaaa;
    animation: pulse 1.1s infinite;
     }

    @keyframes pulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(182, 131, 89); }
      70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(155, 89, 182, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); }
    }

.vote_btn_p_small {
  display: block;
  transform: skewX(-25deg); 
}


.vote_btn_apply_area {
    padding: clamp( 3rem, calc( 2rem + 4vw ), 5rem ) 1rem 0rem 1rem;
} 






/* .vote_btn_area {
  padding: 4rem 1rem;
}

 .vote_btn_area button,.vote_btn_apply_area button {
    width: 100%;
    max-width: 600px;
    position: relative;
    padding: 1rem;
    font-size: clamp( 24px, calc( 20px + 1vw ), 32px );
    font-weight: 900;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
    overflow: hidden;
    color: #d62119;
    font-feature-settings: "palt";
    border: solid 2px #9e7200;
    }

  .vote_btn-container {
    text-align: center;
    margin: 0 auto;
    }

  .btn-effect-9 {
     background-image: linear-gradient(139deg, #e4c566, #ffec92 50%, #c0912a);
     box-shadow: 0 5px 0 #bc8600;
    }

  .btn-effect-9:hover {   
    transform: translateY(3px);
    text-decoration: none;
    box-shadow: 0 2px 0 #aaaaaa;
    animation: pulse 1.1s infinite;
     }

    @keyframes pulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(182, 131, 89); }
      70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(155, 89, 182, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); }
    }

.vote_btn_p_small {
  display: block;
  transform: skewX(-25deg); 
}


.vote_btn_apply_area {
    padding: clamp( 3rem, calc( 2rem + 4vw ), 5rem ) 1rem 0rem 1rem;
}  */




@media screen and (max-width: 1299px) {

.vote_grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

}



@media screen and (max-width: 768px) {

.vote_btn_area_sticky {
  bottom: 47px;
}

.vote_grid {
  gap: 0.5rem;
}

}


@media screen and (max-width: 720px) {
  
.vote_btn_area_sticky {
  bottom: 41px;
}

}

@media screen and (max-width: 500px) {

.card_inner_flex_left {
  width: 30%;
}

.card_inner_flex_right {
    width: 70%;
}

.vote_btn_area_sticky {
  bottom: 40px;
}

}

@media screen and (max-width: 460px) {

.vote_btn_area_sticky {
  bottom: 56px;
}

}