@charset "UTF-8";
/* 基本設定 */
:root {
  --viewport-width: 390;
  --base-unit: 100vw;
}
@media screen and (min-width:961px), print {
  :root {
    --viewport-width: 1;
    --base-unit: 1px;
  }
}

body {
  margin: 0;
  padding: 0;
}

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

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

.pc-only {
  display: none !important;
}
@media screen and (min-width:961px), print {
  .pc-only {
    display: block !important;
  }
}

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

.ds-dondora2024marker {
  background: linear-gradient(transparent 70%, yellow 70%);
}

/* ドンドラ設定 */
.ds-dondora2024 {
  box-sizing: border-box;
  max-width: 780px;
  margin: 0 auto;
  padding: calc(20 / var(--viewport-width) * var(--base-unit));
  font-size: calc(14 / var(--viewport-width) * var(--base-unit));
  background: #FBBC04;
  line-height: 1.5;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "YuGothic", "proxima-nova", Helvetica, Arial, "Meiryo", "メイリオ", "ＭＳ ゴシック";
}
@media screen and (min-width:961px), print {
  .ds-dondora2024 {
    font-size: 20px;
  }
}
.ds-dondora2024 * {
  margin: 0;
  padding: 0;
}
.ds-dondora2024 ul {
  list-style-type: none;
}
.ds-dondora2024 img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.ds-dondora2024 b {
  font-weight: bold;
}
.ds-dondora2024_marker {
  background: linear-gradient(transparent 55%, yellow 55%);
}
.ds-dondora2024_box_inner {
  padding: calc(20 / var(--viewport-width) * var(--base-unit));
  background: #fff;
  border-radius: 0 0 calc(10 / var(--viewport-width) * var(--base-unit)) calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_box_inner > * {
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_box_inner > *:first-child {
  margin-top: 0;
}
.ds-dondora2024_box_inner h3 {
  margin-top: calc(30 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_box_x, .ds-dondora2024_box_questionnaire {
  padding: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_box_x h3, .ds-dondora2024_box_questionnaire h3 {
  margin-top: 0;
}
.ds-dondora2024_box_x {
  background: #FFF5D9;
}
.ds-dondora2024_mv .ds-dondora2024_box_inner {
  padding: 0 0 calc(20 / var(--viewport-width) * var(--base-unit)) 0;
}
.ds-dondora2024_voice .ds-dondora2024_box_inner {
  padding: 0;
}
.ds-dondora2024_manga {
  padding-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_fukidashi {
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_h2 {
  margin-top: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_img {
  border-radius: calc(5 / var(--viewport-width) * var(--base-unit));
  overflow: hidden;
}
.ds-dondora2024_x_list li {
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_questionnaire_list li {
  position: relative;
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
  padding-left: calc(40 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_questionnaire_list li:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: calc(29 / var(--viewport-width) * var(--base-unit));
  height: calc(29 / var(--viewport-width) * var(--base-unit));
  background-image: url("../img/icon_voicce01.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.ds-dondora2024_questionnaire_list li div {
  position: relative;
  background: #FFF5D9;
  border-radius: calc(18 / var(--viewport-width) * var(--base-unit));
  padding: calc(10 / var(--viewport-width) * var(--base-unit));
  font-weight: bold;
}
.ds-dondora2024_questionnaire_list li div:before {
  position: absolute;
  right: calc(100% - (6 / var(--viewport-width) * var(--base-unit)));
  top: calc(3 / var(--viewport-width) * var(--base-unit));
  content: "";
  display: block;
  width: calc(15 / var(--viewport-width) * var(--base-unit));
  height: calc(10 / var(--viewport-width) * var(--base-unit));
  background: #FFF5D9;
  -webkit-mask-image: url("../img/fukidashi.svg");
          mask-image: url("../img/fukidashi.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ds-dondora2024_questionnaire_list li:nth-child(2n+2) {
  padding-left: 0;
  padding-right: calc(40 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_questionnaire_list li:nth-child(2n+2):before {
  left: auto;
  right: 0;
  background-image: url("../img/icon_voicce02.svg");
}
.ds-dondora2024_questionnaire_list li:nth-child(2n+2) div {
  background: #E7F9FA;
}
.ds-dondora2024_questionnaire_list li:nth-child(2n+2) div:before {
  right: auto;
  left: calc(100% - (6 / var(--viewport-width) * var(--base-unit)));
  background: #E7F9FA;
}
.ds-dondora2024_character_list li:nth-child(1) {
  margin-top: calc(0 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(2) {
  margin-top: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(3) {
  margin-top: calc(-20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(4) {
  margin-top: calc(0 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(5) {
  margin-top: calc(17 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(6) {
  margin-top: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(7) {
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(8) {
  margin-top: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(9) {
  margin-top: calc(10 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(10) {
  margin-top: calc(15 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_list li:nth-child(11) {
  margin-top: calc(20 / var(--viewport-width) * var(--base-unit));
}
.ds-dondora2024_character_copy {
  margin-top: calc(30 / var(--viewport-width) * var(--base-unit));
  font-size: calc(10 / var(--viewport-width) * var(--base-unit));
  text-align: center;
}
@media screen and (min-width:961px), print {
  .ds-dondora2024_character_copy {
    font-size: 16px;
  }
}