@charset "UTF-8";
html {
  font-size: 62.5%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  font-family: Helvetica, ArialMT, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
  background: url("/lock/matsuda16/assets/img/background.svg") repeat;
  font-size: 1.3em;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

p, h1, h2, h3 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

ul {
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px;
}

a {
  text-decoration: none;
}

.hide_pc {
  display: none;
}
@media screen and (max-width: 768px) {
  .hide_pc {
    display: block;
  }
}

.hide_sp {
  display: block;
}
@media screen and (max-width: 768px) {
  .hide_sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .hide_ssp {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .hide_ssp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .hide_ssp {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .hide_ssp {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .hide_ssp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .hide_sssp {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .hide_sssp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .hide_sssp {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .hide_sssp {
    display: block;
  }
}
@media screen and (max-width: 375px) {
  .hide_sssp {
    display: block;
  }
}

.l-header {
  height: 44px;
  position: relative;
  z-index: 8;
  padding-top: 20px;
  max-width: 1024px;
  margin: 0 auto;
}

.wrapper {
  position: relative;
  max-width: 1024px;
  display: flex;
  margin: 0 auto;
  color: #4D3EFF;
}

.countdown-column {
  width: 77.6%;
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .countdown-column {
    width: 100%;
    padding-top: 0;
  }
}

/*TOPページ*/
.accordion-area__box {
  margin: 4px 0;
}
@media screen and (max-width: 768px) {
  .accordion-area__box {
    margin: 6px 0;
  }
}
.accordion-area__topicsbox {
  margin: 4px 0 10px;
}
@media screen and (max-width: 768px) {
  .accordion-area__topicsbox {
    margin: 4px 0 14px;
  }
}

.side-column {
  width: 22.4%;
  padding-top: 20px;
  padding-left: 15px;
}
.side-column__cm {
  margin: 0 auto;
  top: -10px;
  position: relative;
}
.side-column__cm img {
  width: 100%;
  height: auto;
}
.side-column__youtube {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .side-column__youtube {
    width: 82%;
    padding-top: 10px;
  }
}
.side-column__youtube img {
  width: 100%;
  height: auto;
}
.side-column__ranking {
  width: 100%;
  background-color: #FFFA88;
  border: 2px solid #4D3EFF;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;
}
.side-column__ranking__date {
  font-size: 2.4em;
  text-align: center;
  font-weight: 900;
}
.side-column__ranking__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 98%;
}
.side-column__ranking__title {
  font-size: 0.7em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 4px 0;
}
.side-column__ranking__inner {
  padding: 80px 10px 10px;
}
.side-column__ranking::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/ranking-logo.svg") no-repeat;
  background-size: contain;
  height: 130px;
  width: 82%;
  z-index: 10;
}
.side-column__ranking__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-column__ranking ul {
  padding: 0;
  list-style: none;
}
.side-column__ranking li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.side-column__ranking__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__ranking__01 {
    font-size: 1.6rem;
    padding: 20px 0;
  }
}
.side-column__ranking__01 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__ranking__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__ranking__02 {
    font-size: 1.6rem;
    padding: 16px 0;
  }
}
.side-column__ranking__02 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__ranking__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__ranking__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__ranking__03 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive {
  margin: 0 auto;
  width: 100%;
  margin-top: -10px;
  font-weight: bold;
  position: relative;
}
.side-column__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__02 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive__title {
  font-size: 3em;
  text-align: center;
  font-weight: 900;
}
.side-column__archive__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 100%;
}
.side-column__archive__title {
  font-size: 0.8em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 4px 0;
  margin: 4px 0;
  width: 100%;
}
.side-column__archive h3 {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
.side-column__archive__ranking {
  font-size: 2.4rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease;
}
.side-column__archive__date {
  font-size: 2.6rem;
  font-weight: bold;
  color: #4D3EFF;
  background-color: #FFFA88;
  border: 1px solid #4D3EFF;
  text-align: center;
  padding: 10px 0;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  transition: all 0.5s ease;
}
.side-column__archive__box {
  display: none; /*はじめは非表示*/
  background-color: #FFFA88;
  padding: 0 10px 10px;
  border: 1px solid #4D3EFF;
}
.side-column__archive__ranking {
  height: 63px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #4D3EFF;
  border: 1px solid #4D3EFF;
  text-align: center;
  padding: 10px 0 10px 22px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s ease;
}
.side-column__archive__btn {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  background: #ffffff;
  display: block;
  width: 12%;
  height: 64px;
  border: 1px solid #4D3EFF;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .side-column__archive__btn {
    height: 102%;
    width: 7%;
  }
}
.side-column__archive__btn::before, .side-column__archive__btn::after {
  display: block;
  content: "";
  background-color: #4D3EFF;
  position: absolute;
  width: 13px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.side-column__archive__btn::before {
  top: 50%;
  left: 23%;
  transform: rotate(0deg);
}
.side-column__archive__btn::after {
  top: 50%;
  left: 23%;
  transform: rotate(90deg);
}
.side-column__archive__btn .close::before {
  transform: rotate(45deg);
}
.side-column__archive__btn .close::after {
  transform: rotate(45deg);
}
.side-column__archive__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-column__archive ul {
  list-style: none;
  text-align: center;
}
.side-column__archive li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.side-column__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__02 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .side-column__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.side-column__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.side-column__questionnaire {
  width: 100%;
  background-color: #851FE6;
  border: 2px solid #4D3EFF;
  font-size: 2.4rem;
  font-weight: bold;
  position: relative;
  color: #ffffff;
  text-align: center;
  margin: 30px 0 14px 0;
  padding-top: 34px;
}
.side-column__questionnaire__inner {
  padding: 30px 6px 20px;
}
.side-column__questionnaire::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/x-title-sp.png") no-repeat;
  background-size: contain;
  height: 80px;
  width: 90%;
  z-index: 10;
}
.side-column__questionnaire__button {
  background-color: #ffffff;
  border: 2px solid #000000;
  margin-top: 52px;
  display: block;
  border-radius: 30px;
  padding: 13px 4px;
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 3;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 866px) {
  .side-column__questionnaire__button {
    font-size: 1rem;
  }
}
@media screen and (max-width: 866px) {
  .side-column__questionnaire__button img {
    width: 10px;
    height: 10px;
  }
}
.side-column__questionnaire__button::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/jasra.svg") no-repeat;
  background-size: contain;
  height: 70px;
  width: 44px;
  z-index: 10;
}
.side-column__questionnaire__button a {
  color: #000000;
  text-decoration: none;
}
.side-column__questionnaire__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-column__questionnaire__text {
  width: 93%;
  font-size: 1.4rem;
}

.sp-column {
  width: 96%;
  margin: 0 auto;
}
@media screen and (max-width: 480px) {
  .sp-column {
    width: 91%;
  }
}
.sp-column__cm {
  padding-top: 20px;
  width: 81.2%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .sp-column__cm {
    padding-top: 8px;
  }
}
.sp-column__cm a {
  display: block;
  line-height: 0;
}
.sp-column__cm img {
  width: 100%;
  height: auto;
}
.sp-column__youtube {
  padding-top: 8px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .sp-column__youtube {
    width: 81.2%;
  }
}
.sp-column__youtube img {
  width: 100%;
  height: auto;
}
.sp-column__top-button {
  margin: auto;
  width: 30%;
  background-color: #4D3EFF;
  margin-top: 40px;
  display: block;
  border-radius: 30px;
  padding: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sp-column__top-button {
    width: 80%;
    margin-top: 30px;
  }
}
.sp-column__top-button a {
  color: #ffffff;
}
.sp-column__ranking {
  margin: 0 auto;
  width: 91.5%;
  background-color: #FFFA88;
  border: 2px solid #4D3EFF;
  font-weight: bold;
  position: relative;
  z-index: 30;
}
.sp-column__ranking__date {
  font-size: 3em;
  text-align: center;
  font-weight: 900;
}
.sp-column__ranking__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 98%;
}
.sp-column__ranking__title {
  font-size: 0.8em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 4px 0;
}
.sp-column__ranking__inner {
  padding: 30px 10px 10px;
}
@media screen and (max-width: 768px) {
  .sp-column__ranking__inner {
    padding: 30px 14px 10px;
  }
}
.sp-column__ranking__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-column__ranking ul {
  padding: 0;
  list-style: none;
  font-size: 1em;
}
.sp-column__ranking li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.sp-column__ranking__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__ranking__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__ranking__01 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__ranking__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__ranking__02 {
    font-size: 1.6rem;
    padding: 20px 0;
  }
}
.sp-column__ranking__02 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__ranking__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__ranking__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__ranking__03 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive {
  margin: 0 auto;
  width: 91.5%;
  margin-top: 8px;
  font-weight: bold;
  position: relative;
}
.sp-column__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__01 {
    font-size: 1.6rem;
  }
}
.sp-column__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__02 {
    font-size: 1.6rem;
    padding: 20px 0;
  }
}
.sp-column__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive__title {
  font-size: 3em;
  text-align: center;
  font-weight: 900;
}
.sp-column__archive__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 100%;
}
.sp-column__archive__title {
  font-size: 0.8em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 4px 0;
  width: 100%;
  margin-bottom: 6px;
}
.sp-column__archive h3 {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
.sp-column__archive__ranking {
  font-size: 2.4rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  transition: all 0.5s ease;
}
.sp-column__archive__date {
  font-size: 2.6rem;
  font-weight: bold;
  color: #4D3EFF;
  background-color: #FFFA88;
  border: 1px solid #4D3EFF;
  text-align: center;
  padding: 7px 0;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  transition: all 0.5s ease;
}
.sp-column__archive__box {
  display: none; /*はじめは非表示*/
  background-color: #FFFA88;
  padding: 0 10px 10px;
  border: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__box {
    padding: 0 30px;
  }
}
.sp-column__archive__ranking {
  background-color: #4D3EFF;
  height: 70px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
}
.sp-column__archive__btn {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  background: #ffffff;
  display: block;
  width: 12%;
  height: 70px;
  border: 1px solid #4D3EFF;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.sp-column__archive__btn::before, .sp-column__archive__btn::after {
  display: block;
  content: "";
  background-color: #4D3EFF;
  position: absolute;
  width: 15px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sp-column__archive__btn::before {
  top: 50%;
  left: 23%;
  transform: rotate(0deg);
}
.sp-column__archive__btn::after {
  top: 50%;
  left: 23%;
  transform: rotate(90deg);
}
.sp-column__archive__btn .close::before {
  transform: rotate(45deg);
}
.sp-column__archive__btn .close::after {
  transform: rotate(45deg);
}
.sp-column__archive__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-column__archive ul {
  list-style: none;
  text-align: center;
}
.sp-column__archive li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.sp-column__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__02 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .sp-column__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.sp-column__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.sp-column__questionnaire {
  width: 100%;
  background-color: #851FE6;
  border: 2px solid #4D3EFF;
  font-size: 2.4rem;
  font-weight: bold;
  position: relative;
  color: #ffffff;
  text-align: center;
  margin-top: 30px;
  padding-top: 34px;
}
.sp-column__questionnaire__inner {
  padding: 30px 10px 20px;
}
.sp-column__questionnaire::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/x-title-sp.png") no-repeat;
  background-size: contain;
  height: 80px;
  width: 90%;
  z-index: 10;
}
.sp-column__questionnaire__button {
  background-color: #ffffff;
  border: 2px solid #000000;
  margin-top: 48px;
  display: block;
  border-radius: 30px;
  padding: 14px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  width: 100%;
}
.sp-column__questionnaire__button a {
  color: #000000;
  text-decoration: none;
}
.sp-column__questionnaire__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-column__questionnaire__text {
  width: 90%;
  text-align: center;
}

/*TOPページ*/
/*アーカイブページ*/
.countdown-archive {
  width: 93%;
  margin: 0 auto;
  margin-top: 70px;
  /*&__ranking-top {
   @media screen and (min-width: 768px) {
   &::before {
     content: "";
     display: inline-block;
     position: absolute;
     bottom: -3px;
     right: -280px;
     background: url(../img/matsuda-slide.png) no-repeat;
     background-size: contain;
     height: 310px;
     width: 310px;
     z-index: 30;
   }
  }
  }*/
}
@media screen and (max-width: 768px) {
  .countdown-archive {
    width: 92%;
    margin-top: 40px;
  }
}
.countdown-archive__list {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.countdown-archive__list::after {
  content: "";
  display: block;
  width: 32.5%;
}
.countdown-archive__logo {
  width: 38%;
  position: relative;
  top: 0;
  left: -7px;
}
@media screen and (max-width: 768px) {
  .countdown-archive__logo {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    left: 0;
  }
}
.countdown-archive__countdown {
  width: 100%;
  margin: 0 auto;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown-archive__countdown {
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  .countdown-archive__countdown {
    width: 90%;
  }
}
.countdown-archive__cm {
  padding-top: 20px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .countdown-archive__cm {
    padding-top: 8px;
  }
}
.countdown-archive__cm img {
  width: 100%;
  height: auto;
}
.countdown-archive__youtube {
  padding-top: 8px;
  width: 100%;
  margin: 0 auto;
}
.countdown-archive__youtube img {
  width: 100%;
  height: auto;
}
.countdown-archive__message {
  text-align: center;
  color: #4D3EFF;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .countdown-archive__message {
    font-size: 1.6rem;
  }
}
.countdown-archive__ranking-top, .countdown-archive__ranking {
  display: flex;
  margin-left: 4%;
  width: 72%;
  background-color: #FFFA88;
  border: 2px solid #4D3EFF;
  font-weight: bold;
  position: relative;
  z-index: 30;
  border: 2px solid #4D3EFF;
  font-weight: bold;
  position: relative;
  z-index: 30;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top, .countdown-archive__ranking {
    flex-direction: column;
    width: 82%;
    margin: auto;
  }
}
.countdown-archive__ranking-top__date, .countdown-archive__ranking__date {
  font-size: 2.8rem;
  text-align: center;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__date, .countdown-archive__ranking__date {
    font-size: 3.6rem;
    padding: 6px 0;
  }
}
.countdown-archive__ranking-top__text, .countdown-archive__ranking__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.5;
  color: #4D3EFF;
  width: 100%;
}
.countdown-archive__ranking-top__title, .countdown-archive__ranking__title {
  font-size: 0.9rem;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__title, .countdown-archive__ranking__title {
    font-size: 1.2rem;
    padding: 2px 0;
    width: 94%;
    margin: 0 auto;
  }
}
.countdown-archive__ranking-top__inner, .countdown-archive__ranking__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px 10px;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__inner, .countdown-archive__ranking__inner {
    padding: 14px 14px 10px;
  }
}
.countdown-archive__ranking-top ul, .countdown-archive__ranking ul {
  padding: 0;
  list-style: none;
  font-size: 1em;
}
.countdown-archive__ranking-top li:nth-child(2), .countdown-archive__ranking li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.countdown-archive__ranking-top__01, .countdown-archive__ranking__01 {
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__01, .countdown-archive__ranking__01 {
    font-size: 1.6rem;
    /*margin: 16px 0;*/
  }
}
.countdown-archive__ranking-top__01 img, .countdown-archive__ranking__01 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__ranking-top__02, .countdown-archive__ranking__02 {
  padding: 10px 0 6px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  border-top: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__02, .countdown-archive__ranking__02 {
    font-size: 1.6rem;
    padding-top: 16px;
  }
}
.countdown-archive__ranking-top__02 img, .countdown-archive__ranking__02 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__ranking-top__03, .countdown-archive__ranking__03 {
  padding: 10px 0 6px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  border-top: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__03, .countdown-archive__ranking__03 {
    font-size: 1.6rem;
    padding-top: 16px;
  }
}
.countdown-archive__ranking-top__03 img, .countdown-archive__ranking__03 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__ranking-top {
  width: 93%;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top {
    width: 92%;
    padding-bottom: 0;
  }
}
.countdown-archive__ranking-top__inner {
  width: 60%;
  padding: 14px 10px 0 0;
}
@media screen and (max-width: 768px) {
  .countdown-archive__ranking-top__inner {
    width: 100%;
    padding: 14px 10px 10px;
  }
}
.countdown-archive__yellow, .countdown-archive__blue, .countdown-archive__pink {
  width: 32.5%;
  border: 2px solid #4D3EFF;
  font-weight: bold;
  position: relative;
  z-index: 30;
}
@media screen and (max-width: 768px) {
  .countdown-archive__yellow, .countdown-archive__blue, .countdown-archive__pink {
    width: 100%;
    margin: 0 auto;
  }
}
.countdown-archive__yellow__date, .countdown-archive__blue__date, .countdown-archive__pink__date {
  font-size: 2.6em;
  text-align: center;
  font-weight: 900;
  line-height: 1.4;
}
.countdown-archive__yellow__text, .countdown-archive__blue__text, .countdown-archive__pink__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 98%;
}
.countdown-archive__yellow__title, .countdown-archive__blue__title, .countdown-archive__pink__title {
  font-size: 0.8em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 0;
}
.countdown-archive__yellow__inner, .countdown-archive__blue__inner, .countdown-archive__pink__inner {
  padding: 20px 14px 14px;
}
@media screen and (max-width: 768px) {
  .countdown-archive__yellow__inner, .countdown-archive__blue__inner, .countdown-archive__pink__inner {
    padding: 30px 14px 10px;
  }
}
.countdown-archive__yellow__inner, .countdown-archive__blue__inner, .countdown-archive__pink__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.countdown-archive__yellow ul, .countdown-archive__blue ul, .countdown-archive__pink ul {
  padding: 0;
  list-style: none;
  font-size: 1em;
}
.countdown-archive__yellow li:nth-child(2), .countdown-archive__blue li:nth-child(2), .countdown-archive__pink li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.countdown-archive__yellow__01, .countdown-archive__blue__01, .countdown-archive__pink__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  line-height: 1.4;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__yellow__01, .countdown-archive__blue__01, .countdown-archive__pink__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__yellow__01 img, .countdown-archive__blue__01 img, .countdown-archive__pink__01 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__yellow__02, .countdown-archive__blue__02, .countdown-archive__pink__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .countdown-archive__yellow__02, .countdown-archive__blue__02, .countdown-archive__pink__02 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__yellow__02 img, .countdown-archive__blue__02 img, .countdown-archive__pink__02 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__yellow__03, .countdown-archive__blue__03, .countdown-archive__pink__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  line-height: 1.4;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__yellow__03, .countdown-archive__blue__03, .countdown-archive__pink__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__yellow__03 img, .countdown-archive__blue__03 img, .countdown-archive__pink__03 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__yellow, .countdown-archive__blue, .countdown-archive__pink {
  margin-top: 10px;
}
.countdown-archive__yellow {
  background-color: #FFFA88;
}
.countdown-archive__blue {
  background-color: #8ae9ed;
}
.countdown-archive__pink {
  background-color: #FFCAC7;
}
.countdown-archive__archive {
  margin: 0 auto;
  width: 56%;
  margin: 0 auto;
  font-weight: bold;
  position: relative;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive {
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive img {
    width: 96%;
  }
}
.countdown-archive__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__01 {
    font-size: 1.6rem;
    padding: 20px 0;
  }
}
.countdown-archive__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__02 {
    font-size: 1.6rem;
    padding: 20px 0;
  }
}
.countdown-archive__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__archive__title {
  font-size: 3em;
  text-align: center;
  font-weight: 900;
}
.countdown-archive__archive__text {
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #4D3EFF;
  width: 97%;
}
.countdown-archive__archive__title {
  font-size: 0.8em;
  background-color: #4D3EFF;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 4px 0;
  width: 100%;
  margin: 0 auto;
}
.countdown-archive__archive h3 {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
.countdown-archive__archive__ranking {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  transition: all 0.5s ease;
}
.countdown-archive__archive__date {
  font-size: 3rem;
  font-weight: bold;
  color: #4D3EFF;
  background-color: #FFFA88;
  border: 1px solid #4D3EFF;
  text-align: center;
  padding: 10px 0;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  transition: all 0.5s ease;
}
.countdown-archive__archive__box {
  display: none; /*はじめは非表示*/
  background-color: #FFFA88;
  padding: 0 10px 10px;
  border: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__box {
    padding: 0 30px;
  }
}
.countdown-archive__archive__ranking {
  background-color: #4D3EFF;
  height: 70px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
}
.countdown-archive__archive__btn {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  background: #ffffff;
  display: block;
  width: 12%;
  height: 70px;
  border: 1px solid #4D3EFF;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.countdown-archive__archive__btn::before, .countdown-archive__archive__btn::after {
  display: block;
  content: "";
  background-color: #4D3EFF;
  position: absolute;
  width: 15px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.countdown-archive__archive__btn::before {
  top: 50%;
  left: 23%;
  transform: rotate(0deg);
}
.countdown-archive__archive__btn::after {
  top: 50%;
  left: 23%;
  transform: rotate(90deg);
}
.countdown-archive__archive__btn .close::before {
  transform: rotate(45deg);
}
.countdown-archive__archive__btn .close::after {
  transform: rotate(45deg);
}
.countdown-archive__archive__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.countdown-archive__archive ul {
  list-style: none;
  text-align: center;
}
.countdown-archive__archive li:nth-child(2) {
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
.countdown-archive__archive__01 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__01 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__archive__01 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__archive__02 {
  padding: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__02 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__archive__02 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__archive__03 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .countdown-archive__archive__03 {
    font-size: 1.6rem;
    margin: 16px 0;
  }
}
.countdown-archive__archive__03 img {
  width: 22px;
  margin-right: 14px;
}
.countdown-archive__questionnaire {
  margin: 0 auto;
  width: 100%;
  background-color: #851FE6;
  border: 2px solid #4D3EFF;
  font-size: 2.4rem;
  font-weight: bold;
  position: relative;
  color: #ffffff;
  text-align: center;
  margin-top: 30px;
}
.countdown-archive__questionnaire__inner {
  padding: 30px 10px 20px;
}
.countdown-archive__questionnaire::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/x-title-sp.png") no-repeat;
  background-size: contain;
  height: 80px;
  width: 90%;
  z-index: 10;
}
.countdown-archive__questionnaire__button {
  background-color: #ffffff;
  border: 2px solid #000000;
  margin-top: 48px;
  display: block;
  border-radius: 30px;
  padding: 14px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  width: 100%;
}
.countdown-archive__questionnaire__button a {
  color: #000000;
  text-decoration: none;
}
.countdown-archive__questionnaire__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-archive__questionnaire__text {
  width: 90%;
}

/*CM アーカイブ*/
.cm-archive {
  width: 100%;
}
.cm-archive__wrapper {
  margin: 60px 0 40px 20px;
}
.cm-archive__list {
  width: 95%;
  border-top: 1px solid #4D3EFF;
}
.cm-archive__inner {
  width: 100%;
  padding: 20px 0;
  height: 70px;
  display: flex;
  line-height: 1;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .cm-archive__inner {
    display: block;
    justify-content: flex-start;
    height: 130px;
    padding: 20px 0 20px 10px;
  }
}
@media screen and (max-width: 480px) {
  .cm-archive__inner {
    height: 130px;
  }
}
.cm-archive__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cm-archive__title {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .cm-archive__title img {
    width: 60px;
    margin: 0;
  }
}
.cm-archive__text {
  font-weight: bold;
  font-size: 1.8rem;
  color: #ffffff;
  background-color: #4D3EFF;
  padding: 2px;
  margin-left: 30px;
}
@media screen and (max-width: 768px) {
  .cm-archive__text {
    flex-direction: column;
  }
}
.cm-archive__date {
  font-weight: bold;
  font-size: 3.6rem;
  color: #4D3EFF;
  padding: 2px;
  margin-left: 8px;
  vertical-align: top;
  display: flex;
}
.cm-archive__date span {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .cm-archive__date {
    font-size: 3rem;
  }
}

figure {
  margin: 0;
}

audio {
  width: 260px;
  height: 40px;
}
@media screen and (max-width: 768px) {
  audio {
    margin: 10px 0;
    width: 240px;
  }
}

/*CM アーカイブ*/
/*footer*/
footer {
  margin: 0 auto;
  padding: 60px 0 80px;
  background-color: #FDB1B1;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  footer {
    margin-top: 34px;
    padding: 0 0 34px;
  }
}

.copyright {
  margin-top: 50px;
  text-align: center;
  color: #4D3EFF;
  font-size: 1.2rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .copyright {
    margin-top: 30px;
    font-size: 1rem;
  }
}

.l-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1024px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .l-footer__inner {
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
}
.l-footer__sol {
  max-width: 110px;
  margin: 0 3%;
}
.l-footer__sol img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .l-footer__sol {
    max-width: 110px;
  }
}
.l-footer__jasrac {
  max-width: 120px;
  margin: 0 4%;
}
.l-footer__jasrac img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .l-footer__jasrac {
    max-width: 140px;
  }
}
.l-footer__logoinner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-footer__logo {
  width: 36%;
  padding: 0 2%;
}
@media screen and (max-width: 768px) {
  .l-footer__logo {
    padding: 20px 0;
    width: 60%;
  }
}
.l-footer__history {
  width: 62%;
  padding: 0 2%;
}
@media screen and (max-width: 768px) {
  .l-footer__history {
    width: 90%;
  }
}
.l-footer__history p {
  margin: 16px 0;
  font-weight: bold;
  font-size: 1.8rem;
  font-family: Helvetica, ArialMT, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  border-radius: 30px;
  border: 2px solid #000000;
  padding: 6px;
  text-align: center;
  width: 80%;
  margin: 24px auto;
}
@media screen and (max-width: 768px) {
  .l-footer__history p {
    font-size: 1.6rem;
    margin: 14px 0;
    margin: 24px auto;
    width: 100%;
  }
}

.archivelogo {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  width: 96%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .archivelogo {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .archivelogo__logo {
    width: 25%;
    text-align: center;
    padding: 10px 0;
  }
}
.archivelogo img {
  max-width: 70px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .archivelogo img {
    max-width: 56px;
  }
}

@media screen and (max-width: 768px) {
  .archivelogo-sp {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .archivelogo-sp__logo {
    width: 33%;
    text-align: center;
    padding: 10px 0;
  }
}
.archivelogo-sp img {
  max-width: 78px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .archivelogo-sp img {
    width: 100%;
  }
}

.footer-history {
  width: 60%;
  display: flex;
  align-items: center;
}

/*footer*/
/*もっと見る*/
.more-list li {
  list-style: none;
}

.more-btn {
  padding-top: 20px;
  margin: 0 auto;
  width: 50px;
  text-align: center;
}

.more-btn02 {
  padding-top: 20px;
  margin: 0 auto;
  width: 50px;
  text-align: center;
  margin-bottom: 60px;
}

.more-btn:hover {
  cursor: pointer;
}

/*もっと見る*/
/*アーカイブ&CMページ*/
.countdown {
  /*ループframe*/
  /*ループframe*/
}
.countdown__inner {
  height: 100%;
}
@media screen and (max-width: 768px) {
  .countdown__mail {
    margin: 30px 0;
  }
}
.countdown__fv-episode {
  height: 320px;
}
@media screen and (max-width: 768px) {
  .countdown__fv-episode {
    height: 350px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__fv-episode {
    height: 320px;
  }
}
.countdown__fv {
  height: 448px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .countdown__fv {
    height: 444px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__fv {
    height: 300px;
  }
}
.countdown__fv-cm {
  height: 278px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .countdown__fv-cm {
    height: 334px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__fv-cm {
    height: 260px;
  }
}
.countdown__fv-mail {
  height: 330px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .countdown__fv-mail {
    height: 334px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__fv-mail {
    height: 300px;
  }
}
@media screen and (max-width: 360px) {
  .countdown__fv-mail {
    right: 1%;
    height: 240px;
  }
}
.countdown__matsuda {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 40px;
  right: 33%;
  z-index: 20;
  overflow: visible;
}
@media screen and (max-width: 1023px) {
  .countdown__matsuda {
    right: 26%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__matsuda {
    top: 20px;
    right: 9%;
  }
}
@media screen and (max-width: 630px) {
  .countdown__matsuda {
    right: 1%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda {
    top: 6px;
    right: 10%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__matsuda {
    right: 6%;
  }
}
.countdown__matsuda img {
  max-width: 390px;
  height: auto;
}
@media screen and (max-width: 480px) {
  .countdown__matsuda img {
    max-width: 274px;
    height: auto;
  }
}
@media screen and (max-width: 390px) {
  .countdown__matsuda img {
    max-width: 256px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__matsuda img {
    max-width: 256px;
    height: auto;
  }
}
.countdown__matsuda-cm {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 14px;
  right: 31%;
  z-index: 20;
  overflow: visible;
}
@media screen and (max-width: 1023px) {
  .countdown__matsuda-cm {
    right: 28%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-cm {
    top: 2px;
    right: 7%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-cm {
    top: 14px;
    right: 9%;
  }
}
@media screen and (max-width: 360px) {
  .countdown__matsuda-cm {
    right: 11%;
  }
}
.countdown__matsuda-cm img {
  max-width: 339px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-cm img {
    max-width: 310px;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-cm img {
    max-width: 248px;
    height: auto;
  }
}
.countdown__matsuda-mail {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 14px;
  right: 24%;
  z-index: 20;
  overflow: visible;
}
@media screen and (max-width: 1023px) {
  .countdown__matsuda-mail {
    right: 24%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-mail {
    top: 2px;
    right: 3%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-mail {
    top: 4px;
    right: 0%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__matsuda-mail {
    top: 10px;
  }
}
.countdown__matsuda-mail img {
  max-width: 415px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-mail img {
    max-width: 440px;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-mail img {
    max-width: 380px;
    height: auto;
  }
}
@media screen and (max-width: 360px) {
  .countdown__matsuda-mail img {
    max-width: 300px;
  }
}
.countdown__matsuda-episode {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 14px;
  right: 33%;
  z-index: 3;
  overflow: visible;
}
@media screen and (max-width: 1023px) {
  .countdown__matsuda-episode {
    right: 30%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-episode {
    top: 10px;
    right: 6%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-episode {
    top: 16px;
    right: 7%;
  }
}
.countdown__matsuda-episode img {
  max-width: 370px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-episode img {
    max-width: 410px;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-episode img {
    max-width: 330px;
    height: auto;
  }
}
@media screen and (max-width: 360px) {
  .countdown__matsuda-episode img {
    max-width: 300px;
  }
}
@media screen and (max-width: 768px) {
  .countdown__sol {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: absolute;
    z-index: 50;
    text-align: right;
    right: 6%;
    bottom: 67px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__sol {
    right: 8%;
    bottom: 50px;
  }
}
.countdown__sol p {
  padding-bottom: 8px;
  margin: 0;
}
.countdown__sol img {
  max-width: 140px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__sol img {
    max-width: 76px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__sol img {
    max-width: 70px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__sol img {
    max-width: 56px;
  }
}
.countdown__jasrac {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: absolute;
  bottom: 18px;
  right: 8%;
  z-index: 50;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .countdown__jasrac {
    right: 6%;
    bottom: 5px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__jasrac {
    right: 8%;
  }
}
.countdown__jasrac p {
  padding-bottom: 8px;
  margin: 0;
}
.countdown__jasrac img {
  max-width: 140px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__jasrac img {
    max-width: 100px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__jasrac img {
    max-width: 90px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__jasrac img {
    max-width: 70px;
  }
}
.countdown__matsuda-text {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: -28px;
  z-index: 40;
  left: 8%;
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-text {
    left: 8%;
    bottom: -28px;
  }
}
@media screen and (max-width: 600px) {
  .countdown__matsuda-text {
    left: 2%;
    bottom: -20px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__matsuda-text {
    left: 0;
    bottom: -14px;
  }
}
.countdown__matsuda-text img {
  width: 86%;
  height: auto;
}
.countdown__matsuda-text img:first-child {
  padding-right: 27%;
  bottom: -18px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .countdown__matsuda-text img {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  .countdown__matsuda-text img {
    width: 83%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__matsuda-text img {
    width: 70%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__matsuda-text img {
    width: 77%;
  }
}
.countdown__cm-logo {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: -50px;
  z-index: 40;
  left: 8%;
}
@media screen and (max-width: 768px) {
  .countdown__cm-logo {
    left: 4%;
    bottom: -40px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__cm-logo {
    left: 3%;
    bottom: -60px;
  }
}
@media screen and (max-width: 600px) {
  .countdown__cm-logo {
    bottom: -10px;
  }
}
.countdown__cm-logo img {
  width: 65%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__cm-logo img {
    width: 65%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__cm-logo img {
    width: 65%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__cm-logo img {
    width: 65%;
  }
}
.countdown__episode-logo {
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -150px;
  z-index: 40;
  left: 8%;
}
@media screen and (max-width: 768px) {
  .countdown__episode-logo {
    left: 5%;
    bottom: -190px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__episode-logo {
    left: 5%;
    bottom: -190px;
  }
}
.countdown__episode-logo img {
  width: 50%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .countdown__episode-logo img {
    width: 60%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__episode-logo img {
    width: 80%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__episode-logo img {
    width: 86%;
  }
}
.countdown__about {
  margin: 0 auto;
  width: 83%;
  display: flex;
  background-color: #ffffff;
  border: 2px solid #4D3EFF;
  box-shadow: 12px 13px 0px -6px #4D3EFF;
  position: relative;
  justify-content: flex-end;
  line-height: 0;
  z-index: 30;
}
@media screen and (max-width: 768px) {
  .countdown__about {
    flex-direction: column-reverse;
    margin-top: 40px;
    flex-wrap: wrap;
    box-shadow: 10px 11px 0px -7px #4D3EFF;
  }
}
@media screen and (max-width: 480px) {
  .countdown__about {
    margin-top: 20px;
    width: 81.5%;
  }
}
.countdown__about::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -73px;
  right: 1%;
  background: url(../img/herewego.svg) no-repeat;
  background-size: contain;
  height: 154px;
  width: 50%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__about::after {
    width: 70%;
    bottom: -80px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
  }
}
@media screen and (max-width: 480px) {
  .countdown__about::after {
    margin-top: 20px;
    width: 90%;
  }
}
.countdown__about__text {
  width: 50%;
  color: #4636fe;
  font-weight: bold;
  line-height: 1.4;
  padding: 40px 25px 100px 15px;
}
@media screen and (max-width: 768px) {
  .countdown__about__text {
    width: 100%;
    padding: 30px 20px 0;
    text-align: center;
    line-height: 1.8;
    font-size: 1.4rem;
  }
}
.countdown__about__text p {
  padding-bottom: 10px;
}
.countdown__about__text p span {
  background: linear-gradient(to right, #FF903E, #E5ED23, #2AF0A4);
}
.countdown__about__text img {
  width: 100%;
  position: relative;
  right: 0;
  bottom: -2%;
}
@media screen and (max-width: 768px) {
  .countdown__about__text img {
    width: 100%;
    text-align: center;
    margin: 16px 0;
  }
}
.countdown__about__matsuda {
  width: 50%;
  position: absolute;
  left: 0px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .countdown__about__matsuda {
    width: 100%;
    position: static;
    margin: 0 auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__about__matsuda {
    width: 100%;
    position: static;
    margin: 0 auto;
  }
}
.countdown__about__matsuda img {
  width: 100%;
  height: auto;
}
.countdown__attension {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .countdown__attension {
    width: 80%;
    padding: 60px 0;
    margin: auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__attension {
    width: 60%;
    padding: 0 0 60px;
    margin: auto;
  }
  .countdown__attension img {
    width: 130%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__attension {
    padding: 0 0 40px;
  }
}
.countdown__frame {
  height: 100%;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame {
    padding-bottom: 0px;
  }
}
.countdown__frame::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/showa.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame::after {
    height: 46px;
    width: 46px;
  }
}
.countdown__frame::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/heisei.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame::before {
    height: 46px;
    width: 46px;
  }
}
.countdown__cmframe {
  height: auto;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__cmframe {
    padding-bottom: 0px;
  }
}
.countdown__cmframe::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/cm01.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__cmframe::after {
    height: 46px;
    width: 46px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__cmframe::after {
    height: 40px;
    width: 40px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__cmframe::after {
    height: 36px;
    width: 36px;
  }
}
@media screen and (max-width: 360px) {
  .countdown__cmframe::after {
    height: 43px;
    width: 43px;
  }
}
.countdown__cmframe::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/cm02.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__cmframe::before {
    height: 46px;
    width: 46px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__cmframe::before {
    height: 40px;
    width: 40px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__cmframe::before {
    height: 36px;
    width: 36px;
  }
}
@media screen and (max-width: 360px) {
  .countdown__cmframe::before {
    height: 43px;
    width: 43px;
  }
}
.countdown__episodeframe {
  height: auto;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__episodeframe {
    padding-bottom: 0px;
  }
}
.countdown__episodeframe::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/kouki01.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__episodeframe::after {
    height: 46px;
    width: 46px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__episodeframe::after {
    height: 40px;
    width: 40px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__episodeframe::after {
    height: 36px;
    width: 36px;
  }
}
@media screen and (max-width: 360px) {
  .countdown__episodeframe::after {
    height: 43px;
    width: 43px;
  }
}
.countdown__episodeframe::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/kouki02.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__episodeframe::before {
    height: 46px;
    width: 46px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__episodeframe::before {
    height: 40px;
    width: 40px;
  }
}
@media screen and (max-width: 375px) {
  .countdown__episodeframe::before {
    height: 36px;
    width: 36px;
  }
}
@media screen and (max-width: 360px) {
  .countdown__episodeframe::before {
    height: 43px;
    width: 43px;
  }
}
.countdown__frame-archive {
  height: auto;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame-archive {
    padding-bottom: 0px;
  }
}
.countdown__frame-archive::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/souko.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame-archive::after {
    height: 46px;
    width: 46px;
  }
}
.countdown__frame-archive::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/senkyoku.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame-archive::before {
    height: 46px;
    width: 46px;
  }
}
.countdown__frame-mail {
  height: auto;
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame-mail {
    padding-bottom: 0px;
  }
}
.countdown__frame-mail::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/mail-left.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame-mail::after {
    height: 46px;
    width: 46px;
  }
}
.countdown__frame-mail::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/mail-right.svg");
  background-size: contain;
  height: 70px;
  width: 70px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__frame-mail::before {
    height: 46px;
    width: 46px;
  }
}
.countdown__frame01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #FDB1B1;
  z-index: 3;
  overflow: hidden;
  text-align: center;
  border-left: 1px solid #4D3EFF;
  border-right: 1px solid #4D3EFF;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
@media screen and (max-width: 768px) {
  .countdown__frame01 {
    width: 25px;
  }
}
.countdown__frame01 img {
  display: block;
  width: 75%;
  height: 100%;
  margin: 0 auto;
}
.countdown__frame02 {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  background-color: #FDB1B1;
  z-index: 2;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame02 {
    height: 25px;
  }
}
.countdown__frame02 img {
  display: block;
  width: 2000px;
  height: 22px;
}
@media screen and (max-width: 768px) {
  .countdown__frame02 img {
    width: 1800px;
    height: auto;
  }
}
.countdown__frame03 {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background-color: #FDB1B1;
  z-index: 3;
  overflow: hidden;
  text-align: center;
  border-left: 1px solid #4D3EFF;
  border-right: 1px solid #4D3EFF;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
@media screen and (max-width: 768px) {
  .countdown__frame03 {
    width: 25px;
  }
}
.countdown__frame03 img {
  display: block;
  width: 75%;
  height: 100%;
  margin: 0 auto;
}
.countdown__frame04 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: #FDB1B1;
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame04 {
    height: 25px;
  }
}
.countdown__frame04 div:first-child {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame04 div:first-child {
    top: 4px;
    left: 20%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame04 div:first-child {
    top: 4px;
    left: 20%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame04 div:first-child {
    left: 20%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame04 div:first-child {
    left: 20%;
  }
}
.countdown__frame04 div:nth-child(2) {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame04 div:nth-child(2) {
    top: 4px;
    right: 8%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame04 div:nth-child(2) {
    top: 4px;
    right: 4%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame04 div:nth-child(2) {
    right: 4%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame04 div:nth-child(2) {
    right: 0;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame04 div:nth-child(2) {
    right: -6%;
  }
}
@media screen and (max-width: 540px) {
  .countdown__frame04 div:nth-child(2) {
    right: -20%;
  }
}
.countdown__frame04 div:nth-child(3) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame04 div:nth-child(3) {
    top: 0;
    left: 12%;
  }
}
@media screen and (max-width: 560px) {
  .countdown__frame04 div:nth-child(3) {
    top: 2px;
    left: 11%;
  }
}
@media screen and (max-width: 500px) {
  .countdown__frame04 div:nth-child(3) {
    left: 9%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame04 div:nth-child(3) {
    left: 11%;
  }
}
@media screen and (max-width: 460px) {
  .countdown__frame04 div:nth-child(3) {
    top: 3px;
    left: 10%;
    width: 64%;
  }
}
@media screen and (max-width: 390px) {
  .countdown__frame04 div:nth-child(3) {
    top: 4px;
    left: 12%;
    width: 63%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__frame04 div:nth-child(3) {
    top: 4px;
    left: 13%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame04 div:nth-child(3) {
    left: 14%;
    width: 74%;
  }
}
.countdown__frame04 div:nth-child(4) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame04 div:nth-child(4) {
    top: 0;
    right: 22%;
  }
}
@media screen and (max-width: 630px) {
  .countdown__frame04 div:nth-child(4) {
    right: 20%;
  }
}
@media screen and (max-width: 560px) {
  .countdown__frame04 div:nth-child(4) {
    top: 2px;
    right: 18%;
  }
}
@media screen and (max-width: 430px) {
  .countdown__frame04 div:nth-child(4) {
    top: 4px;
    right: 19%;
  }
}
@media screen and (max-width: 390px) {
  .countdown__frame04 div:nth-child(4) {
    right: 18%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__frame04 div:nth-child(4) {
    top: 4px;
    right: 12%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame04 div:nth-child(4) {
    right: 13%;
  }
}
.countdown__frame04 img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .countdown__frame04 img {
    width: 82%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame04 img {
    width: 78%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__frame04 img {
    width: 80%;
    height: auto;
  }
}
@media screen and (max-width: 630px) {
  .countdown__frame04 img {
    width: 80%;
  }
}
@media screen and (max-width: 560px) {
  .countdown__frame04 img {
    width: 70%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame04 img {
    width: 124%;
  }
}
@media screen and (max-width: 394px) {
  .countdown__frame04 img {
    width: 120%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame04 img {
    width: 100%;
  }
}
.countdown__frame05 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: #FDB1B1;
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
  left: -10px;
}
@media screen and (max-width: 768px) {
  .countdown__frame05 {
    height: 25px;
  }
}
.countdown__frame05 div:first-child {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  top: 2px;
  width: 100%;
}
@media screen and (max-width: 860px) {
  .countdown__frame05 div:first-child {
    left: 70%;
    transform: translate(-70%);
    -webkit-transform: translate(-70%);
  }
}
.countdown__frame05 div:nth-child(2) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame05 div:nth-child(2) {
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    top: 2px;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame05 div:nth-child(2) {
    left: 65%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame05 div:nth-child(2) {
    left: 68%;
  }
}
.countdown__frame05 img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .countdown__frame05 img {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame05 img {
    width: 76%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame05 img {
    width: 70%;
  }
}
.countdown__frame06 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: #FDB1B1;
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame06 {
    height: 25px;
  }
}
.countdown__frame06 div:first-child {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame06 div:first-child {
    top: 4px;
    left: 9%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame06 div:first-child {
    top: 4px;
    left: 8%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame06 div:first-child {
    left: 7%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame06 div:first-child {
    left: 9%;
  }
}
.countdown__frame06 div:nth-child(2) {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame06 div:nth-child(2) {
    top: 4px;
    right: 15%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame06 div:nth-child(2) {
    top: 4px;
    right: 12%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame06 div:nth-child(2) {
    right: 16%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame06 div:nth-child(2) {
    right: 14%;
  }
}
.countdown__frame06 div:nth-child(3) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame06 div:nth-child(3) {
    top: 0;
    left: -2%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame06 div:nth-child(3) {
    left: 5%;
  }
}
@media screen and (max-width: 590px) {
  .countdown__frame06 div:nth-child(3) {
    left: -90%;
  }
}
.countdown__frame06 div:nth-child(4) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame06 div:nth-child(4) {
    top: 0;
    right: 18%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame06 div:nth-child(4) {
    right: 13%;
  }
}
@media screen and (max-width: 440px) {
  .countdown__frame06 div:nth-child(4) {
    top: 1px;
    right: 14%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame06 div:nth-child(4) {
    right: 13%;
  }
}
.countdown__frame06 div:nth-child(5) {
  position: absolute;
  left: -50%;
}
@media screen and (max-width: 591px) {
  .countdown__frame06 div:nth-child(5) {
    left: -50%;
  }
}
@media screen and (max-width: 590px) {
  .countdown__frame06 div:nth-child(5) {
    left: 10%;
  }
}
@media screen and (max-width: 455px) {
  .countdown__frame06 div:nth-child(5) {
    top: 1px;
    left: 7%;
  }
}
@media screen and (max-width: 400px) {
  .countdown__frame06 div:nth-child(5) {
    left: -90%;
  }
}
.countdown__frame06 div:nth-child(6) {
  position: absolute;
  left: -50%;
}
@media screen and (max-width: 400px) {
  .countdown__frame06 div:nth-child(6) {
    left: 7%;
  }
}
@media screen and (max-width: 360px) {
  .countdown__frame06 div:nth-child(6) {
    left: -14%;
  }
}
.countdown__frame06 img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .countdown__frame06 img {
    width: 90%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame06 img {
    width: 78%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__frame06 img {
    width: 150%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame06 img {
    width: 90%;
  }
}
@media screen and (max-width: 580px) {
  .countdown__frame06 img {
    width: 90%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame06 img {
    width: 90%;
  }
}
@media screen and (max-width: 440px) {
  .countdown__frame06 img {
    width: 86%;
  }
}
@media screen and (max-width: 360px) {
  .countdown__frame06 img {
    width: 92%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame06 img {
    width: 90%;
  }
}
.countdown__frame07 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: #FDB1B1;
  border-top: 1px solid #4D3EFF;
  border-bottom: 1px solid #4D3EFF;
}
@media screen and (max-width: 768px) {
  .countdown__frame07 {
    height: 25px;
  }
}
.countdown__frame07 div:first-child {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame07 div:first-child {
    top: 4px;
    left: 12%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame07 div:first-child {
    top: 4px;
    left: 12%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame07 div:first-child {
    left: 7%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame07 div:first-child {
    left: 10%;
  }
}
.countdown__frame07 div:nth-child(2) {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .countdown__frame07 div:nth-child(2) {
    top: 4px;
    right: 12%;
  }
}
@media screen and (max-width: 1023px) {
  .countdown__frame07 div:nth-child(2) {
    top: 4px;
    right: 12%;
  }
}
@media screen and (max-width: 930px) {
  .countdown__frame07 div:nth-child(2) {
    right: 16%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame07 div:nth-child(2) {
    right: 14%;
  }
}
.countdown__frame07 div:nth-child(3) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame07 div:nth-child(3) {
    top: 0;
    left: 16%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame07 div:nth-child(3) {
    left: 23%;
  }
}
@media screen and (max-width: 590px) {
  .countdown__frame07 div:nth-child(3) {
    left: 12%;
  }
}
.countdown__frame07 div:nth-child(4) {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .countdown__frame07 div:nth-child(4) {
    top: 0;
    right: 18%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame07 div:nth-child(4) {
    right: 13%;
  }
}
@media screen and (max-width: 440px) {
  .countdown__frame07 div:nth-child(4) {
    top: 1px;
    right: 10%;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame07 div:nth-child(4) {
    right: 10%;
  }
}
.countdown__frame07 div:nth-child(5) {
  position: absolute;
  left: -50%;
}
@media screen and (max-width: 591px) {
  .countdown__frame07 div:nth-child(5) {
    left: -50%;
  }
}
@media screen and (max-width: 590px) {
  .countdown__frame07 div:nth-child(5) {
    left: 12%;
  }
}
@media screen and (max-width: 455px) {
  .countdown__frame07 div:nth-child(5) {
    top: 1px;
    left: 7%;
  }
}
@media screen and (max-width: 400px) {
  .countdown__frame07 div:nth-child(5) {
    left: -90%;
  }
}
.countdown__frame07 div:nth-child(6) {
  position: absolute;
  left: -50%;
}
@media screen and (max-width: 400px) {
  .countdown__frame07 div:nth-child(6) {
    left: 7%;
  }
}
@media screen and (max-width: 360px) {
  .countdown__frame07 div:nth-child(6) {
    left: -14%;
  }
}
.countdown__frame07 img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1023px) {
  .countdown__frame07 img {
    width: 90%;
  }
}
@media screen and (max-width: 860px) {
  .countdown__frame07 img {
    width: 78%;
  }
}
@media screen and (max-width: 768px) {
  .countdown__frame07 img {
    width: 150%;
  }
}
@media screen and (max-width: 680px) {
  .countdown__frame07 img {
    width: 110%;
  }
}
@media screen and (max-width: 580px) {
  .countdown__frame07 img {
    width: 150%;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 480px) {
  .countdown__frame07 img {
    width: 110%;
    padding-left: 18%;
  }
}
@media screen and (max-width: 440px) {
  .countdown__frame07 img {
    width: 120%;
    display: block;
    margin: 0 auto;
    padding-left: 0;
  }
}
@media screen and (max-width: 360px) {
  .countdown__frame07 img {
    width: 100%;
    padding-left: 0;
  }
}
@media screen and (max-width: 340px) {
  .countdown__frame07 img {
    width: 96%;
    padding-left: 0;
  }
}
.countdown__questionnaire {
  margin: 0 auto;
  width: 83%;
  background-color: #ffffff;
  border: 2px solid #4D3EFF;
  box-shadow: 12px 13px 0px -6px #4D3EFF;
  font-weight: bold;
  position: relative;
  margin-top: 100px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire {
    margin-top: 120px;
    width: 81.5%;
    box-shadow: 10px 11px 0px -7px #4D3EFF;
    margin-bottom: 8px;
  }
}
.countdown__questionnaire__message {
  width: 70%;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__message {
    width: 87%;
  }
}
.countdown__questionnaire__inner {
  padding: 40px 30px 20px 30px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__inner {
    padding: 60px 0 20px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__questionnaire__inner {
    padding: 40px 0;
  }
}
.countdown__questionnaire__episode {
  text-align: center;
  margin: 0 auto;
  padding-top: 60px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__episode {
    padding-top: 80px;
  }
}
@media screen and (max-width: 480px) {
  .countdown__questionnaire__episode {
    padding-top: 50px;
  }
}
.countdown__questionnaire__episode-text {
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 30px;
  width: 90%;
  background-color: #FFFA88;
  color: #4D3EFF;
  font-size: 18px;
  font-weight: bold;
}
.countdown__questionnaire__episode-text::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -23%;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/jasra-icon.svg") no-repeat;
  background-size: contain;
  width: 440px;
  height: 60px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__episode-text::before {
    width: 100%;
    bottom: -23%;
  }
}
.countdown__questionnaire__episode-title {
  color: #4D3EFF;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: 20px;
}
.countdown__questionnaire.boshu::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/boshu-title.png") no-repeat;
  background-size: contain;
  height: 70px;
  width: 80%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire.boshu::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    background: url(../img/boshu-title.png) no-repeat;
    background-size: contain;
    height: 70px;
    width: 90%;
    z-index: 10;
  }
}
@media screen and (max-width: 480px) {
  .countdown__questionnaire.boshu::before {
    top: -20px;
    width: 100%;
  }
}
.countdown__questionnaire::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background: url("../img/x-title.png") no-repeat;
  background-size: contain;
  height: 100px;
  width: 90%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    background: url(../img/x-title-sp.png) no-repeat;
    background-size: contain;
    height: 149px;
    width: 64%;
    z-index: 10;
  }
}
@media screen and (max-width: 480px) {
  .countdown__questionnaire::before {
    top: -4%;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .countdown__questionnaire::before {
    top: -11%;
    width: 80%;
  }
}
@media screen and (max-width: 375px) {
  .countdown__questionnaire::before {
    top: -12%;
    width: 90%;
  }
}
.countdown__questionnaire__button {
  background-color: #4D3EFF;
  margin-top: 16px;
  display: block;
  border-radius: 30px;
  padding: 8px;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  width: 70%;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__button {
    margin: auto;
    width: 80%;
  }
}
.countdown__questionnaire__button a {
  color: #fff;
  text-decoration: none;
}
.countdown__questionnaire__episode-button {
  background-color: #4D3EFF;
  display: block;
  border-radius: 30px;
  padding: 14px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
  width: 60%;
  margin: 20px auto 30px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__episode-button {
    width: 80%;
    margin: 20px auto 30px;
  }
}
.countdown__questionnaire__episode-button a {
  color: #fff;
  text-decoration: none;
}
.countdown__questionnaire__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__inner {
    flex-direction: column;
  }
}
.countdown__questionnaire__episode-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 50px 20px 50px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__episode-inner {
    flex-direction: column;
    padding: 50px 0 20px;
  }
}
.countdown__questionnaire__text {
  width: 94%;
  text-align: left;
  line-height: 1.8;
  font-size: 1.6rem;
}
.countdown__questionnaire__text span {
  background-color: #C5FE26;
  padding: 6px;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__text {
    text-align: center;
    line-height: 1.6;
    width: 90%;
    margin: 16px auto;
    font-size: 1.5rem;
  }
}
.countdown__questionnaire__present {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__present {
    width: 80%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .countdown__questionnaire__present {
    margin-top: 20px;
  }
}
.countdown__questionnaire__present img {
  width: 100%;
  height: auto;
}

.episode {
  width: 86%;
  margin: 0 auto;
  background-color: #fff;
  border: 2px solid #4D3EFF;
  box-shadow: 6px 6px 0 0 #4D3EFF;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .episode {
    width: 83%;
    margin: 20px auto 30px;
  }
}
.episode__head {
  color: #fff;
  background-color: #4D3EFF;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}
.episode__text {
  padding: 40px 20px;
  font-weight: bold;
}
.episode__student-name {
  font-size: 16px;
  color: #4D3EFF;
  font-weight: bold;
}
.episode__dj-name {
  font-size: 16px;
  color: #4D3EFF;
  font-weight: bold;
}
.episode__inner {
  margin-top: 8px;
  text-align: left;
}
.episode__bg01 {
  background-color: #FFF0F0;
  padding: 20px;
  border-radius: 0 15px 15px 15px;
  font-size: 1.4rem;
  line-height: 1.8;
}
.episode__bg02 {
  background-color: #FFFDD5;
  padding: 20px;
  border-radius: 15px 0 15px 15px;
  font-size: 1.4rem;
  line-height: 1.8;
}
.episode__matsuda {
  text-align: right;
  width: 100%;
  margin-top: 30px;
}

/*carousel-container*/
.carousel-container_btn {
  width: 100%;
}

.carousel {
  position: relative;
  top: 0;
  left: 0;
  padding-top: 60px;
}
@media screen and (max-width: 768px) {
  .carousel {
    padding-top: 30px;
  }
}

.carousel-bg {
  padding: 30px 44px 60px 44px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .carousel-bg {
    padding: 30px 44px 60px 44px;
  }
}
@media screen and (max-width: 480px) {
  .carousel-bg {
    padding: 30px 30px 60px 30px;
  }
}

.centered {
  display: flex;
  justify-content: center;
}

.carousel-container {
  height: auto;
}

.carouselcontainer_wrapper {
  align-items: stretch;
  height: auto;
}

.carousel-container_element {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 360px;
  height: auto;
  border-radius: 30px;
  /*overflow: hidden;*/
}

.carousel-container_element .new {
  position: absolute;
  top: -20px;
  left: -47%;
  height: 60px;
  z-index: 30;
  overflow: visible;
}
@media screen and (max-width: 768px) {
  .carousel-container_element .new {
    left: -40%;
  }
}

.carousel-container_element .new img {
  width: 23%;
  height: auto;
}

.carousel-container_image {
  position: relative;
}

.carousel-container_image img {
  transition: 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
@media screen and (max-width: 768px) {
  .carousel-container_image img {
    width: 100%;
  }
}

.carousel-container_image img.swiper-lazy-loaded {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.carousel-container_data {
  display: block;
  font-size: 14px;
  line-height: 1em;
  color: #4D3EFF;
  box-shadow: 3px 4px 0 0 #4D3EFF;
  border: 2px solid #4D3EFF;
  width: 220px;
  padding: 20px 10px;
  text-align: center;
  background: #fff;
  font-weight: 900;
  flex-grow: 1;
}
@media screen and (max-width: 480px) {
  .carousel-container_data {
    width: 280px;
  }
}

.carousel-container_date {
  margin: 0 0 0.4em 0;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .carousel-container_date {
    font-size: 16px;
  }
}

.carousel-container__name {
  font-size: 16px;
  padding: 4px;
  margin-top: 10px;
  display: inline-block;
  background-color: #C5FE26;
  font-weight: 900;
  line-height: 1.5em;
}
@media screen and (max-width: 768px) {
  .carousel-container__name {
    font-size: 16px;
  }
}

.carousel-container__title {
  font-size: 16px;
  display: inline-block;
  margin-top: 10px;
  padding: 20px 8px;
  width: 90%;
  line-height: 1.5em;
}
@media screen and (max-width: 768px) {
  .carousel-container__title {
    font-size: 16px;
  }
}

.carousel-container_scrollbar {
  position: relative;
  margin-top: 30px;
  display: block;
}

.carousel-container_scrollbar:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #4D3EFF;
}

.carousel-container_scrollbar .swiper-scrollbar-drag {
  display: block;
  box-sizing: border-box;
  height: 40px;
  display: block;
  box-sizing: border-box;
  border: 2px solid #4D2411;
  border-radius: 6px;
  background-color: #FDB1B1;
  height: 20px;
  width: 20px !important;
  border-radius: 20px;
}

.carousel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (max-width: 480px) {
  .carousel-title {
    padding-left: 4%;
  }
}
@media screen and (max-width: 375px) {
  .carousel-title {
    padding-left: 2%;
  }
}

.swiper-lazy-preloader,
.swiper-lazy-preloader:after {
  border-radius: 50%;
  width: 3em;
  height: 3em;
}

.swiper-lazy-preloader {
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2em;
  margin-left: -2em;
  text-indent: -9999em;
  border-top: 2px solid #dcdce0;
  border-right: 2px solid #dcdce0;
  border-bottom: 2px solid #dcdce0;
  border-left: 2px solid #000;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}

.archive-btn {
  background: #4D3EFF;
  font-size: 15px;
  border-radius: 40px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  margin-top: 20px;
  padding: 12px 20px;
}

.swiper-slide {
  width: 200px;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .swiper-slide {
    width: 220px;
  }
}
@media screen and (max-width: 480px) {
  .swiper-slide {
    width: 280px;
  }
}
.swiper-slide:nth-child(3n+1) .carousel-container__title {
  background-color: #8FE2E6;
}
.swiper-slide:nth-child(3n+2) .carousel-container__title {
  background-color: #FFFA88;
}
.swiper-slide:nth-child(3n+3) .carousel-container__title {
  background-color: #FECAC7;
}

/*carousel-container*/
.filter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: bold;
  color: #4D3EFF;
  direction: rtl;
  margin-top: 10px;
}

.filter-container p {
  font-size: 14px;
}

.filter-container::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #4D3EFF;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  pointer-events: none;
}

.filter-container select {
  -moz-appearance: none;
       appearance: none;
  width: 120px;
  height: 2.8em;
  padding: 0.4em calc(0.8em + 30px) 0.4em 0.8em;
  border: 1px solid #4D3EFF;
  font-weight: bold;
  border-radius: 3px;
  background-color: #fff;
  color: #4D3EFF;
  font-size: 1em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../img/arrow.svg");
  background-repeat: no-repeat;
  background-size: 10px auto; /* 画像のサイズ（幅 高さ）*/
  background-position: right 12px center; /* 画像の位置 */
}

.topics {
  background-color: #fff;
  padding: 8px;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.topics span {
  font-size: 1.3rem;
}

.topics-head {
  font-size: 1.3rem;
  padding: 6px 0;
  background: #fff;
}

.topics-btn {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  display: block;
  width: 12%;
  height: 32px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
}/*# sourceMappingURL=style.css.map */