@charset "UTF-8";
/****************common********************************************/
body {
  background: #fbf7f0;
}
footer {
  margin-top: 0 !important;
  padding-top: 8vw;
  position: inherit !important;
  height: auto;
}
#contents.vote {
  width: 100% !important;
  margin: 0 !important;
  background: #fbf7f0;
  font-family: 'Hiragino Maru Gothic ProN W4', 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ';
  color: #000;
  line-height: 1.66;
  font-size: calc(100vw / (1200 / 17));
}
/****************layout********************************************/
/*****固定****/
#contents.vote .key {
  width: 100%;
  margin-bottom: calc(100vw / (1200 / 50));
  position: relative;
}
#contents.vote .key img {
  width: 100%;
  z-index: 9;
}
#contents.vote .key .keyimg {
  width: 100%;
  position: relative;
}
/********************** common **********************/
#contents.vote .co_in {
  margin: 0 auto calc(100vw / (1200 / 80));
}
#contents.vote .co_in h2 {
  width: calc(100vw / (1200 / 400));
  margin: 0 auto calc(100vw / (1200 / 20));
}
#contents.vote .inner {
  width: calc(100vw / (1200 / 900));
  margin: calc(100vw / (1200 / 20)) auto calc(100vw / (1200 / 20));
  padding: calc(100vw / (1200 / 50)) calc(100vw / (1200 / 20));
  background: #fff;
  border-radius: 10px;
  z-index: 9999;
  border: 5px solid #dadada;
}
#contents.vote .co_in p.read {
  margin-bottom: calc(100vw / (1200 / 10));
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
  font-size: calc(100vw / (1200 / 22));
}
#contents.vote .co_in p.read span {
  font-size: calc(100vw / (1200 / 27));
}
.marker-anim {
  background-image: linear-gradient(transparent 40%, #fcf282 40%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: markerAnime 1s forwards;
}

@keyframes markerAnime {
  to {
    background-size: 100% 100%;
  }
}
/********************** 01 **********************/
#contents.vote .co_01 {
  margin: 0 auto;
  padding: 0 0 calc(100vw / (1200 / 150));
  position: relative;
  overflow: hidden;
  background: url("../img/vote_c01_05.webp") no-repeat bottom;
  background-size: 100% auto;
}
#contents.vote .co_01 ul {
  width: calc(100vw / (1200 / 900));
  margin: calc(100vw / (1200 / 40)) auto 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contents.vote .co_01 ul li {
  width: 24%;
  margin-bottom: calc(100vw / (1200 / 20));
}
/********************** 02 **********************/
#contents.vote .co_02 h2 {
  width: calc(100vw / (1200 / 600));
  margin: calc(100vw / (1200 / 20)) auto;
}
.wrap {
  margin-top: calc(100vw / (1200 / -60));
}
#contents.vote .co_02 .waku {
  width: calc(100vw / (1200 / 900));
  margin: calc(100vw / (1200 / 100)) auto calc(100vw / (1200 / 15));
  padding-top: calc(100vw / (1200 / 30));
  padding-bottom: calc(100vw / (1200 / 20));
  position: relative;
  background: #e2f2f8;
  border: 3px solid #3fa0d0;
  border-radius: 10px;
  line-height: 1.4;
  text-align: center;
}
#contents.vote .co_02 .waku02 {
  background: #fdf1da;
  border: 3px solid #f3831b;
}
#contents.vote .co_02 .waku03 {
  background: #fde2e1;
  border: 3px solid #ec8ba1;
}
#contents.vote .co_02 .waku .fL {
  width: 48%;
}
#contents.vote .co_02 .waku .fL {
  width: 48%;
}
#contents.vote .co_02 .waku p {
  font-size: calc(100vw / (1200 / 15));
}
#contents.vote .co_02 .fs {
  margin: 0 auto;
  font-size: calc(100vw / (1200 / 14));
}
#contents.vote .co_02 .waku .icon {
  width: calc(100vw / (1200 / 150));
  display: inline-block;
  background: #3fa0d0;
  border-radius: 100px;
  text-align: center;
  color: #fff;
  font-size: calc(100vw / (1200 / 25));
  position: absolute;
  top: calc(100vw / (1200 / -22));
  left: calc(100vw / (1200 / 375));
  z-index: 999;
}
#contents.vote .co_02 .waku02 .icon {
  background: #f3831b;
}
#contents.vote .co_02 .waku03 .icon {
  background: #ec8ba1;
}
#contents.vote .co_02 .waku .date {
  width: calc(100vw / (1200 / 440));
  margin: 0 auto calc(100vw / (1200 / 10));
  padding: calc(100vw / (1200 / 2));
  background: #3fa0d0;
  letter-spacing: 0.04em;
  color: #fff;
  font-size: calc(100vw / (1200 / 19));
}
#contents.vote .co_02 .waku02 .date {
  background: #f3831b;
}
#contents.vote .co_02 .waku03 .date {
  background: #ec8ba1;
}
#contents.vote .co_02 .waku h3 {
  margin-bottom: calc(100vw / (1200 / 10));
  color: #cd111d;
  font-size: calc(100vw / (1200 / 26));
  font-weight: bold;
}
#contents.vote .co_02 .waku .read {
  font-size: calc(100vw / (1200 / 18));
}
#contents.vote .co_02 .waku .img {
  width: calc(100vw / (1200 / 400));
  margin: 0 auto calc(100vw / (1200 / 10));
}
#contents.vote .co_02 .waku .msg {
  width: calc(100vw / (1200 / 300));
  position: absolute;
  top: calc(100vw / (1200 / -50));
}
#contents.vote .co_02 .waku02 .msg {
  width: calc(100vw / (1200 / 360));
  position: absolute;
  top: calc(100vw / (1200 / -40));
  right: 0;
}
#contents.vote .co_02 .waku03 .msg {
  width: calc(100vw / (1200 / 380));
  position: absolute;
  top: calc(100vw / (1200 / -60));
}
#contents.vote .co_02 .btn {
  width: calc(100vw / (1200 / 300));
  margin: calc(100vw / (1200 / 25)) auto;
}
#contents.vote .co_02 .btn a {
  background: #f9cc4e;
  line-height: calc(100vw / (1200 / 50));
  height: calc(100vw / (1200 / 50));
  color: #000;
  border-radius: 100px;
  border: 2px solid #000;
}
/********************** 03 **********************/
#contents.vote .co_03 h2 {
  width: calc(100vw / (1200 / 650));
  margin: 0 auto;
}
#contents.vote .co_03 .img {
  width: calc(100vw / (1200 / 650));
  margin: 0 auto calc(100vw / (1200 / 25));
}
#contents.vote .co_03 .inner {
  padding: calc(100vw / (1200 / 15)) calc(100vw / (1200 / 25));
  border: 5px solid #dadada;
}
#contents.vote .co_03 .inner h3 {
  margin-bottom: calc(100vw / (1200 / 25));
  border-bottom: 3px solid #dadada;
  text-align: center;
  font-size: calc(100vw / (1200 / 21));
}
#contents.vote .co_03 .inner dl {
  width: calc(100vw / (1200 / 800));
  margin: 0 auto;
  line-height: 1.5;
  font-size: calc(100vw / (1200 / 16));
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
#contents.vote .co_03 .inner dl dt {
  width: calc(100vw / (1200 / 250));
  margin-bottom: calc(100vw / (1200 / 20));
  font-weight: bold;
}
#contents.vote .co_03 .inner dl dt::before {
  content: "●";
  color: #f9cc4e;
}
#contents.vote .co_03 .inner dl.pt dt::before {
  content: "●";
  color: #cd111d;
}
#contents.vote .co_03 .inner dl dd {
  width: calc(100vw / (1200 / 500));
  margin-bottom: calc(100vw / (1200 / 20));
}
#contents.vote .co_03 p.fs {
  font-size: calc(100vw / (1200 / 13));
}
/********************** 04 **********************/
#contents.vote .co_04 .inner_wp {
  width: calc(100vw / (1200 / 900));
  margin: 0 auto;
}
#contents.vote .co_04 .inner {
  width: calc(100vw / (1200 / 430));
  margin: 0 auto calc(100vw / (1200 / 20));
  padding: calc(100vw / (1200 / 20)) 0;
  background: #fff;
  text-align: center;
  box-shadow: none;
}
#contents.vote .co_04 .atn {
  margin-bottom: calc(100vw / (1200 / 25));
  text-align: center;
  font-size: calc(100vw / (1200 / 13));
}
#contents.vote .co_04 .inner.b02 {
  margin: 0 0 calc(100vw / (1200 / 50));
}
#contents.vote .co_04 .inner dl {
  width: calc(100vw / (1200 / 300));
  margin: 0 auto calc(100vw / (1200 / 25));
  display: flex;
  justify-content: space-between;
  text-align: center;
  border: 3px solid #cd111d;
  font-weight: bold;
  font-size: calc(100vw / (1200 / 20));
}
#contents.vote .co_04 .inner dt {
  width: calc(100vw / (1200 / 110));
  display: inline-block;
  background: #cd111d;
  color: #fff;
}
#contents.vote .co_04 .inner dd {
  width: calc(100vw / (1200 / 190));
  color: #cd111d;
}
#contents.vote .co_04 .inner .in ul {
  margin: calc(100vw / (1200 / 10)) calc(100vw / (1200 / 15));
  display: flex;
  justify-content: space-around;
  align-items: start;
}
#contents.vote .co_04 .inner .in ul li {
  width: calc(100vw / (1200 / 180));
  text-align: center;
  border-radius: 10px;
}
#contents.vote .co_04 .inner .in ul li a {
  display: block;
  padding: calc(100vw / (1200 / 30)) 0;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  border: 2px solid #000;
}
#contents.vote .co_04 .inner .in ul li:nth-child(1) {
  background: #fdf5e7;
}
#contents.vote .co_04 .inner .in ul li:nth-child(2) {
  background: #fdf5e7;
}
#contents.vote .co_04 .inner .btn {
  margin-top: calc(100vw / (1200 / 25));
  margin-bottom: calc(100vw / (1200 / 13));
  width: calc(100vw / (1200 / 300)) !important;
  font-size: calc(100vw / (1200 / 17)) !important;
}
#contents.vote .co_04 .inner .btn a {
  height: calc(100vw / (1200 / 45));
  line-height: calc(100vw / (1200 / 40));
  border: 3px solid #e83432;
  border-radius: 100px;
  color: #e83432;
  position: relative;
}
#contents.vote .co_04 .inner .btn a::after {
  content: "▼";
  font-size: calc(100vw / (1200 / 13)) !important;
  position: absolute;
  right: calc(100vw / (1200 / 15));
  top: calc(100vw / (1200 / 1));
  color: #e83432;
}
/********************** oubo**********************/
#contents.vote .oubo.co_in {
  margin: 0 auto calc(100vw / (1200 / 10));
  color: #000;
}
#contents.vote .oubo .inner {
  margin: 0 auto calc(100vw / (1200 / 50));
  padding: calc(100vw / (1200 / 60)) calc(100vw / (1200 / 20)) calc(100vw / (1200 / 50));
}
#contents.vote .oubo .read {
  font-size: calc(100vw / (1200 / 16)) !important;
  font-weight: normal !important;
}
#contents.vote .oubo .read span {
  font-size: calc(100vw / (1200 / 16)) !important;
  font-weight: bold !important;
}
#contents.vote .btnarea ul.atn {
  width: calc(100vw / (1200 / 330));
  margin: 0 auto calc(100vw / (1200 / 50));
  font-size: calc(100vw / (1200 / 15));
}
#contents.vote .oubo .inner p {
  color: #000;
}
#contents.vote .btnarea ul.atn li {
  margin-bottom: 1em;
  padding-left: 1.5em;
  position: relative;
  font-weight: normal;
}
#contents.vote .btnarea ul.atn li::before {
  content: "※";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}