@charset "utf-8";

/* 6）投票
========================================================= */


.voteAbout { font-size: 4rem; font-weight: 700; text-align: center; margin-top: 50px; line-height: 1.31; }
.voteAbout span { font-size: 0.75em; display: inline-block; text-align: center; background: linear-gradient(to top,#ff0 0px,#ff0 15px,#fff 15px); }
.voteAboutTxt { font-size: 0.75em; }
.voteLead { text-align: center; margin-top: 50px; font-size: 2rem; font-weight: 700; }
.voteLead span { font-size: 0.75em; }
.voteAnchor { display: flex; flex-wrap: wrap; gap: 80px; justify-content: center; margin-top: 30px; }
a.voteAnchorBtn { position: relative; font-size: 3.2rem; font-weight: 700; padding: 5px 10px; }
a.voteAnchorBtn::after { position: absolute; content: ""; inset: 0 -.75em 0 auto; margin: auto 0; height: .75em; aspect-ratio: cos(30deg); clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: #DB6E00; transform: rotate(90deg); }

.voteContent { margin-top: 50px; }
.voteCate + .voteCate { margin-top: 50px; }
.voteCateTitle { color: #ff8e00; font-weight: 700; font-size: 2.4rem; border-radius: 10px; }
.voteCateList { display: flex; flex-wrap: wrap; gap: 30px 20px; margin-top: 20px; opacity: 0; animation: slideList .5s forwards .15s;} 
.voteCateItem { inline-size: calc((100% - 80px) / 5); }
.voteCateImg { position: relative; aspect-ratio: 1/1; min-width: 0; background: #ccc; cursor: pointer; overflow: hidden; }
.voteCateImg::before { position: absolute; content: ""; inset: 0 auto 0 0; width: 100%; aspect-ratio: 1/1; min-width: 0; background: rgba(0,0,0,.75); z-index: 20; opacity: 0; }
.voteCateImg::after  { position: absolute; content: "詳細を\A見る"; white-space: pre-wrap; inset: 0 auto 0 0; width: 100%; aspect-ratio: 1/1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.8rem; text-align: center; line-height: 1.31; z-index: 21; opacity: 0; }
.voteCateNum { display: flex; font-size: 1.3rem; align-items: baseline; background: #53b332; border-radius: 5px; justify-content: center; color: #fff; margin-top: 10px; font-weight: 700; line-height: 1; padding-block: 4px; }
.voteCateNumTxt { font-size: 1.7em; margin-left: 3px; font-weight: 700; }
.voteCateEx { margin-top: 10px; }
.voteCateInfoTxt { position: relative; margin-top: 5px; font-weight: 700; font-size: 1.6rem; line-height: 1.31; }
.voteCateInfoName { position: relative; font-size: 1.4rem; }
.voteCateInfoName::after { content: "さん"; }

@keyframes slideList{
	0%   { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn{
	0%   { transform: rotate(0deg); }
	33%   { transform: rotate(15deg); }
	66%   { transform: rotate(-15deg); }
	100% { transform: rotate(0deg); }
}
@media (hover: hover) {
	a.voteAnchorBtn { transition: .15s; }
	.voteCateImg img { position: relative; transition: .15s; z-index: 10; }
	.voteCateImg::before,
	.voteCateImg::after { transition: .15s; }
	a.voteAnchorBtn:hover { transform: translateY(5px); }
	.voteCateImg:hover img { transform: rotate(5deg); scale: 1.1; }
	.voteCateImg:hover::before,
	.voteCateImg:hover::after { opacity: 1; }
}

@media (max-width: 767px) {
	.voteAbout { font-size: 2.8rem; margin-top: 30px; }
	.voteAbout span { background: linear-gradient(to top,#ff0 0px,#ff0 10px,#fff 10px); }
	.voteCateTitle { font-size: 2rem; }
	.voteLead { margin-top: 30px; font-size: 1.7rem; }
	.voteAnchor { gap: 60px; margin-top: 20px; }
	a.voteAnchorBtn { font-size: 2.4rem; }
	.voteCateItem { inline-size: calc((100% - 40px) / 3); }
}
@media (max-width: 500px) {
	.voteLead { text-align: left; }
	.voteCateItem {	inline-size: calc((100% - 20px) / 2); }
	.voteCateImg::before { width: 60%; height: 24px; content: "詳細を見る"; inset: auto 0 15px; opacity: 1;border-radius: 5px; margin: 0 auto; color: #fff; text-align: center; font-weight: 700; font-size: 1.3rem; }
	.voteCateImg::after { display: none; }
}

.modal { position: fixed; background: rgba(227, 224, 200, 0.8); width: 100%; height: 100lvh; top: 0; z-index: 20000; }
.modalArea { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; padding: 0 15px; }
.modalAreaWrap { position: relative; margin-top: -1vh; max-width: 780px; width: 100%;  }
.modalAreaInner { position: relative; z-index: 2; max-height: 724px; border-radius: 20px; }

.modalEx { background: #fff; padding: 50px 40px; max-height: 724px; height: calc(75lvh - 120px); overflow-y: scroll; border-radius: 20px 20px 0 0; border-top: 5px solid #d4d4d4; border-left: 5px solid #d4d4d4; border-right: 5px solid #d4d4d4; }
.modalTitle { display: flex; flex-wrap: wrap; font-size: 2rem; }
.modalName { display: flex; flex-wrap: wrap; font-size: 2rem; margin-top: 10px; }

.modalBatch { font-weight: 700; line-height: 1.31; }
.modalTitleTxt,
.modalNameTxt { line-height: 1.31; }
.modalBatch::after { content: "："; }
.modalImg { margin-inline: auto; margin-top: 20px; }
.modalImg--l { max-width: 710px; width: 100%; padding-block: 100px; }
.modalImg--m { max-width: 500px; width: 80%; }
.modalImg--s { max-width: 320px; width: 55%; }
.modalLable { font-weight: 700; font-size: 2.4rem; width: 100%; }
.modalLetter { margin-top: 30px; }
.modalLetterTxt { margin-top: 10px; }
.modalBtn { width: 100%; margin: 0 auto; text-align: center; }
.modalBtnArea { position: relative; background: #ff8e00; border-radius: 0 0 20px 20px; cursor: pointer; text-align: center; color: #fff; font-weight: 700; font-size: 3.2rem; padding: 10px 15px 10px 0px; transition: .5s; }
.modalBtnArea::after { opacity: 0; }

.modalBtnAreaDf::after,
.modalBtnAreaAc::after { position: absolute; content: ""; background: url(../../images/icon_vote_iine.webp) no-repeat center/contain; inset: 0 -4.5em 0 0; margin: auto; width: 1em; aspect-ratio: 400/375; min-width: 0; animation: slideIn .5s forwards ease-in-out; }
.modalBtnCount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; }
.modalBtnAreaDf { display: block; }
.modalBtnAreaAc { display: none; }
.modalBtnAreaOf { display: none; }
.modalBtnArea.active { cursor: none; pointer-events: none; background: #53b332; }
.modalBtnArea.active .modalBtnAreaDf { display: none; }
.modalBtnArea.active .modalBtnAreaAc { display: block; }
.modalBtnArea.off { cursor: none; pointer-events: none; background: #ccc; color: #000; }
.modalBtnArea.off .modalBtnAreaDf { display: none; }
.modalBtnArea.off .modalBtnAreaAc { display: none; }
.modalBtnArea.off .modalBtnAreaOf { display: block; }

.modalClose { position: absolute; content: ""; inset: -30px 10px auto auto; width: 60px; border-radius: 100%; min-width: 0; aspect-ratio: 1; background: #222; cursor: pointer; z-index: 100; }
.modalClose::before { position: absolute; content: ""; inset: 0; margin: auto; width: 50%; height: 5px; border-radius: 3px; background: #fff; }
.modalBg::after { position: absolute; content: ""; inset: 0 auto auto 0; height: 100%; width: 100%; z-index: 1; cursor: pointer; }

@media (max-width: 767px) {
	.modalAreaWrap { margin-top: 40px; }
	.modalEx { padding: 30px 20px; height: calc(72lvh - 90px); }
	.modalTitle { font-size: 1.6rem; }
	.modalName { font-size: 1.6rem; margin-top: 7px; }
	.modalImg--l { padding-block: 30px; }
	.modalImg--s { width: 50%; }
	.modalBtnArea { font-size: 2.2rem; padding: 5px 15px 5px 0px; }
	.modalLable { font-size: 1.8rem; margin-top: 15px; }
	.modalLetterTxt { margin-top: 5px; }
}
@media (max-width: 480px) {
	.modalClose { inset: -20px 10px auto auto; width: 45px; }
}

.modal { opacity: 0; pointer-events: none; transition: .2s; }
.modalList { opacity: 0; }
.modalList.oth { display: none; }
.modalAreaInner { z-index: 30; }

.modal.active { opacity: 1; pointer-events: all; }
.modalList.on { opacity: 1; display: block; animation: modalItemMove .2s forwards; }


@keyframes modalItemMove{
	0%   { opacity: 0; }
	100% { opacity: 1; }
}