@charset "UTF-8";
.sp-only {display:block;}
@media(min-width:768px){.sp-only{display:none;}}
.vote-main { text-align: center; padding: 5%; }
.vote-main img { display: inline-block; }
@media (min-width: 768px) { .vote-main { padding: 40px 20px; } }
.vote-main__btn { padding-top: 5%; text-align: center; }
@media (min-width: 768px) { .vote-main__btn { padding-top: 40px; } }
.vote-h2 { text-align: center; margin-bottom: 40px; font-weight: bold; font-size: 28px; line-height: 1.2; }
@media (min-width: 768px) { .vote-h2 { font-size: 44px; } }
.vote-present > div { margin-bottom: 5%; padding: 3%; }
@media (min-width: 768px) { .vote-present { display: flex; justify-content: space-between; margin-bottom: 60px; flex-wrap: wrap; }
  .vote-present > div { padding: 0; margin-left: 40px; margin-bottom: 40px; }
  .vote-present > div:nth-child(2n+1) { margin-left: 0; } }
.vote .c-vote { background: #fff; border-radius: 20px; position:relative;padding:40px 0 }
.vote .c-vote__head { background: #e60012; display:inline-block;position:absolute;left:50%;transform:translateX(-50%);top:-30px;white-space:nowrap;text-align:center;line-height:1.4;padding: 2px 20px; color: #fff; }
@media (min-width: 768px) { .vote .c-vote__head { top:-10px; font-size:1.8rem; } }
.vote .c-vote__lede {text-align:center;font-size:1.4rem;}
.vote .c-vote__entry { background: url(); border: none; padding: 5%; }
@media (min-width: 768px) { .vote .c-vote__entry { padding: 0 10px; } }
.vote .c-vote__entry__item { padding: 20px 10px 20px; border-top: dotted 1px #ddd; }
.vote .c-vote__entry__item:first-child { border-top: none; }
.vote .c-vote__entry__item:nth-child(even) { background: #f9f9f9; }
.vote .c-vote__entry__item .image { width:100%;margin-bottom:10px; }
.vote .c-vote__entry__item .image picture { display: flex; justify-content: center; }
@media (min-width: 768px) { .vote .c-vote__entry__item .image {width:150px;margin-bottom:0;} }
.vote .c-vote__entry__item .name { font-size: 1.8rem; }
.vote .c-vote__entry__item .name__num { background: #000; border-radius: 100px; color: #fff; padding: 0 10px; }
.vote .c-vote__entry__item .name__sld { font-size: 1.4rem; font-weight: normal; }
.vote .c-vote__entry__item .name__sld em { font-style: normal; }
.vote .c-vote__entry__item .name__sld img { vertical-align: text-top; }
.vote .c-vote__entry__item .graph { padding: 10px 0; }
.vote .c-vote__entry__item .btn { text-align: center; }
.vote .c-vote__entry__item .btn .c-roundButton { width: 40%; }
@media (min-width: 768px) { .vote .c-vote__entry__item .btn .c-roundButton { width: auto; } }
@media (min-width: 768px) { .vote .c-vote__entry__item { display: flex; min-height: 130px; }
  .vote .c-vote__entry__item > div { display: table-cell; vertical-align: middle; }
  .vote .c-vote__entry__item .name { width: 250px; }
  .vote .c-vote__entry__item .btn { width: 150px; text-align: center; }
  .vote .c-vote__entry__item .btn .c-roundButton { width: 100%; }
  .vote .c-vote__entry__item .graph { width: 190px; padding: 0 20px; } }
.vote .c-vote .c-vote__graph__inner { background: #e3e3e3; overflow: hidden; }
.vote .c-vote .c-vote__graph__inner, .vote .c-vote .c-vote__graph__bar { border: none; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset; }
@media (min-width: 768px) { .vote .c-vote .c-vote__graph__inner, .vote .c-vote .c-vote__graph__bar { height: 34px; } }
.vote .c-vote .c-vote__graph__bar { background: #aa8733; }
.vote .c-vote .vs { padding-top: 5%; }
@media (min-width: 768px) { .vote .c-vote .vs { padding-top: 30px; } }
.vote .c-vote__vs { display: flex; flex-wrap: wrap; width: 100%; }
@media (min-width: 768px) { .vote .c-vote__vs { margin-bottom: 40px; } }
.vote .c-vote__vs__inner { padding: 5%; color: #fff; text-align: center; }
.vote .c-vote__vs__inner .c-vote__label { font-size: 4.6rem; background: none; margin-bottom: 0; line-height: 1.2; }
.vote .c-vote__vs__a { background: #c05639; display: flex; justify-content: center; align-items: center; }
.vote .c-vote__vs__b { background: #53a595; display: flex; justify-content: center; align-items: center; }
.vote .c-vote__title { font-size: 1.8rem; font-weight: bold; margin-bottom: 20px; }
.vote .c-vote__label { font-weight: bold; font-family: roboto,sans-serif; line-height: 1.4; background: #000; color: #fff; padding: 0 18px; border-radius: 100px; display: inline-block; margin-bottom: 10px; }
.vote .c-vote__label.-a { background: #c05639; }
.vote .c-vote__label.-b { background: #53a595; }
.vote .c-vote__btn { position: relative; }
.vote .c-vote__btn:after { content: ""; display: block; width: 80%; height: 1px; background: #ddd; position: absolute; left: 50%; top: 50%; margin-left: -40%; }
@media (min-width: 768px) { .vote .c-vote__btn:after { height: 80%; width: 1px; top: 0; margin-left: 0; } }
.vote .c-vote__btn .c-roundButton { width: 40%; margin-bottom: 5px; padding: 8px 16px; margin-bottom: 5px; }
@media (min-width: 768px) { .vote .c-vote__btn { padding-bottom: 60px; } }
.vote .c-vote__btn > div { padding: 10% 0; }
@media (min-width: 768px) { .vote .c-vote__btn { display: flex; flex-wrap: wrap; }
  .vote .c-vote__btn > div { width: 50%; text-align: center; padding: 0; } }
.vote .c-vote__btn .c-roundButton + p { color: #e60012; }

.inlineframe { height: 300px; overflow-y: auto; border: solid 1px #888; background: #fff; padding: 20px; }

/* 景品 */
.present_head { position: relative; text-align: center; z-index: 1; margin-top: -50px; margin-bottom: 20px; }

.present_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; position: relative; }

.present_item { width: calc((100% - 40px)); text-align: center; margin-left: 40px; margin-top: 20px; }

.present_item:nth-child(-n+2) { margin-top: 0; }

.present_item:nth-child(2n + 1) { margin-left: 0; }

.present_item img { width: auto; }

.present_tit { color: #aa8733; font-size: 30px; font-weight: bold; line-height: 1.2; margin-bottom: 20px; }

.present_schedule { background: #f1f1f1; padding: 20px; border-radius: 100px; text-align: center; font-size: 18px; }

.present_schedule dt { background: #e60012; padding: 4px 20px; border-radius: 100px; font-weight: bold; color: #fff; margin-right: 10px; display: inline-block; }

.present_schedule dd { margin-right: 30px; display: inline-block; }

.present_schedule dd:last-child { margin-right: 0; }

.modal { background: rgba(0, 0, 0, 0.7); position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 100; top: 0; left: 0; }

.modal .p-talk__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.modal .present_item { padding: 20px; cursor: pointer; border-radius: 10px; }

.modal .present_item:hover { background: #ffedee; }

.present_item.-active { background: #ffedee; position: relative; }

.present_item.-active img { opacity: 0.7; }

.present_item.-active:after { content: url(./images/check.svg); width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.modal__inner { max-width: 800px; min-width: 800px; min-height: 550px; padding: 40px; position: relative; display: flex; justify-content: center; align-items: center; }

.modal__head { text-align: center; font-weight: bold; font-size: 2.4rem; margin-bottom: 20px; }

.modal__tit { font-weight: bold; font-size: 1.6rem; line-height: 1.4; margin-bottom: 20px; }

.c-roundButton.-inactive { border-color: #888; background-color: #888; pointer-events: none; }

.ura .present_wrap:before { display: none; }

.ura .present_item { width: 80%; margin: 0 auto; }

.ura .present_item:hover { background: #fff; }

.ura .selected__tit { font-weight: bold; background: #e60012; color: #fff; padding: 2px; text-align: center; margin-bottom: 10px; border-radius: 6px; }

.ura .modal__tit { margin-bottom: 0; }

.c-vote .btn .c-roundButton.-disabled { color: #9f7c7f; }

.p-talk__card { padding: 20px 20px 20px; }

.modal__inner .scroll { max-height: 70vh; overflow-y: auto; }

@media (max-width: 768px) { .present_tit { font-size: 22px; }
  .present_item { width: calc((100% - 16px)); margin: 20px 0 0 16px; }
  .p-talk__card { padding: 0 5px 20px 20px !important; }
  .modal .present_item { padding: 10px; }
  .modal .present_item:hover { background: #fff; }
  .modal .present_item.-active { background: #ffedee; }
  .modal__inner { min-width: 0; width: 90%; padding: 5%; height: 80vh; min-height: 0; }
  .modal__inner .scroll { padding-right: 20px; }
  .modal__head { font-size: 2.0rem; }
  .present_schedule { border-radius: 10px; }
  .present_schedule dt { display: block; margin-top: 10px; } }