@charset "UTF-8";
/* -------------レスポンシブ--------------- */
/* 961以上→ only_p */
/* 960以下→ un_ts */
/* 960~416→ only_t */
/* 769以上→　ov_tab */
/* 768以下→ un_tab */
/* 421以上→ ov_s */
/* 420以下→ only_s */


@media screen and (min-width: 961px) {
  .only_t {
      display: none!important;
  }

  .only_s {
      display: none!important;
  }

  .un_ts {
      display: none!important;
  }
}

@media screen and (max-width: 960px) {
  .only_p {
      display: none!important;
  }

  .only_t {
      display: block!important;
  }

  .only_s {
      display: none!important;
  }

  .un_ts {
      display: block!important;
  }
}

@media screen and (min-width: 769px) {
  .ov_tab {
    display: block!important;
  }

  .un_tab {
    display: none!important;
  }
}

@media screen and (max-width: 768px) {
  .ov_tab {
    display: none!important;
  }

  .un_tab {
    display: block!important;
  }
}

@media screen and (min-width: 421px) {
  .ov_s {
      display: block!important;
  }
}

@media screen and (max-width: 420px) {
  .only_p {
      display: none!important;
  }

  .only_t {
      display: none!important;
  }
  .only_s {
      display: block!important;
  }

  .ov_s {
      display: none!important;
  }
}

main{
	overflow:hidden;
  max-width: 1920px;
  margin: 0 auto;
}
/* 共通パーツ */
.inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* 共通パーツ */
#candidates {
  display: block;
  flex-wrap: wrap;
}

.candidate {
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 600px) {
  #selectedCandidate {
    width: 100%;
  }
}
.selected {
  border-color: blue;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.disabled button {
  display: none;
}

#selected {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#selected #selectedMale {
  width: 48%;
}
#selected #selectedFemale {
  width: 48%;
}

#vote:disabled {
  background-color: #ccc;
}

button {
  margin-top: 0;
}

.candidate_box {
  display: grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px;
	
}
@media screen and (max-width: 768px) {
	.candidate_box {
  display: grid;
	grid-template-columns:1fr 1fr;
	gap:3%;
	
}
}

.candidate {
  width: 100%;
  overflow: hidden;
	border-radius:5px;
	position:relative;
}

.candidate_p {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  background: #fff;
	position:relative;
}
@media screen and (max-width: 768px) {
	.candidate_p {
	  padding: 10px 15px;
	}
}

.art_votelost {
  background: #cc2944;
}

.candidate button.disabled {
  background-color: #ccc;
  color: #666;
}

.candidate.disabled {
  opacity: 0.5;
  /* 半透明にする */
  pointer-events: none;
  /* クリック不可にする */
}

.label_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
	position:relative;
	z-index:100;
}
.label_flex label {
  border-radius: 5px;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.2rem;
}
.label_flex label img {
  width: 100%;
}

.label_flex input {
  /* border: none;
  margin: 0;
  padding: 3px;
  width: 20px;
  height: 20px;
  margin-left: 5px; */
  position: absolute;
  top: 0;
  left: 0;
}
.label_flex img {
  width: 100%;
}

input[type=checkbox] {
  opacity: 0;
	margin-right:-30px;
}

.select_box {
	position:relative;
  display: flex;
}

#maleImage,
#femaleImage {
  width: 60px;
	border-radius:5px;
}
@media screen and (max-width: 768px) {
	#maleImage,
#femaleImage {
  width: 40%;
	}
}


.candidate img{
	width:100%;
}

.candidate_box{
	position:relative;
}
.candidate_tab{
  position: absolute;
  top: -30px;
  bottom: 0;
  left: 5%;
  color: #fff;
  background-color: #fff;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 10px 10px 0 0;
	font-size:clamp(14px, 2vw, 16px);
	letter-spacing:0.2rem;
}
.candidate_tab.is-active {
  top: -30px;
  bottom: 0;
  left: 5%;
  color: #fff;
  background-color: #000;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 10px 10px 0 0;
	font-size:clamp(14px, 2vw, 16px);
	letter-spacing:0.2rem;
}
@media screen and (max-width: 768px) {
  .candidate_tab.is-active {
    top: auto;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #000;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 2px solid #fff;
    border-radius: 20px;
    font-size:clamp(14px, 2vw, 16px);
    letter-spacing:0.2rem;
  }
}

.candidate_card {
    position: relative; /* 親要素を相対位置にする */
    width: 100%;
    max-width: 300px; /* カードの最大幅を設定 */
    margin: 0 auto;
    text-align: center; /* テキストやボタンを中央揃え */
    background-color: #fff; /* カードの背景色 */
    border-radius: 8px; /* カードの角を丸く */
    overflow: hidden;
}

.profile_modal {
    display: none; /* 初期状態では非表示 */
    position: absolute;
	top:0;
    width: 100%;
	height:100%;
    padding: 20px;
  background-color: rgb(0 0 0 / .7);
	z-index:100;
	
}

@media screen and (max-width: 768px) {
	.profile_modal{
		padding:0;
	}
}
	
/* モーダルが表示されるときのスタイル */
.profile_modal.show_modal {
    display: block; /* show_modal クラスが付与されたら表示する */
}


/* モーダル内のコンテンツ */
.profile_content {
  padding-top: 10px;
  border-radius: 10px;
  text-align: center;
	color:#fff;
}
@media screen and (max-width: 768px) {
  .profile_content {
    padding-top: 20%;
  }
}
.candidate_tab, .close_profile {
  cursor: pointer;
  padding: 10px 20px;
  color:#000;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  text-decoration: none;
  display: flex;
	justify-content:center;
	align-items:center;
	z-index:1000;
	font-weight:bold;
}


.profile_content h2{
	  font-size: 14px;
}
.profile_content h3{
  font-size: 12px;
	letter-spacing:0.2rem;
	margin: 0 0 20px; 
}
.profile_content p{
	  font-size: clamp(10px, 3vw, 14px);
	margin-bottom:6%;
	letter-spacing:0.1rem;
	}
@media screen and (max-width: 768px) {
	.profile_content p{
    letter-spacing:0.1rem;
	}
	
}

.profile_content .sns_flex{
	display:flex;
	justify-content:center;
align-items:center;
}
.profile_content .sns_flex a{
margin-right:10px;	
}
.profile_content .sns_flex a:last-child{
margin-right:0;
}

.candidate_p p{
	font-weight:bold;
	letter-spacing:0.2rem;
}

.modal_open .candidate_tab{
	color:#cc2944;
	border-radius:5px;
}

/**/
@media screen and (max-width: 768px) {
.candidate{
    transition:0.3s ease-in-out;
	overflow: visible;
}

.modal_open{
overflow: visible;
}
.no1.modal_open .profile_modal,
.no3.modal_open .profile_modal,
.no5.modal_open .profile_modal{
    transform: translatex(104%);

}
.no2.modal_open .profile_modal,
.no4.modal_open .profile_modal,
.no6.modal_open .profile_modal{
    transform: translatex(-104%);

}
.no2.modal_open_sub,
.no4.modal_open_sub,
.no6.modal_open_sub{
    transform: translatex(102%);
}
.no1.modal_open_sub,
.no3.modal_open_sub,
.no5.modal_open_sub{
    transform: translatex(-102%);
}
	
	.candidate_p{
		border-radius:0 0 5px 5px;
	}
}

@media screen and (max-width: 768px) {
	.candidate_p{
		display:block;
		
	}
	.candidate_p p{
		text-align:center;
		margin-bottom:10px;
	}
	.label_flex{
		justify-content:center;
	}
}


button:focus {
    outline: none; /* フォーカス時の青い枠などをリセット */
}

/* ボタンにフェードと拡大のアニメーションを追加 */
#voteImage {
    transition: opacity 0.5s ease-in-out; /* 透明度のアニメーション */
    opacity: 1;
}

/* ボタンが無効なときの状態 */
#voteImage.disabled {
    opacity: 0.5;
}

/* ボタンがアクティブになったときのアニメーション */
@keyframes growShrink {
    0% {
        transform: scale(1); /* 通常の大きさ */
    }
    50% {
        transform: scale(1.1); /* 少し大きくなる */
    }
    100% {
        transform: scale(1); /* 元に戻る */
    }
}

/* アニメーションのトリガー */
#voteImage.active {
    animation: growShrink 0.5s ease-in-out; /* 0.5秒間の拡大・縮小アニメーション */
}




/* チェックボックスを非表示にする *//*# sourceMappingURL=style.css.map */