html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,abbr,address,cite,code,del,dfn,em,img,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,menu,nav,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  line-height: 1.5;
}
  
ul,ol {
    list-style: none;
}

img.protect {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  pointer-events: none;
  user-select: none;
}

.font-small {
  font-size: calc(28 * var(--rpxClamp));
}

a {
  color: #ff00a0;
}

@charset "UTF-8";
/* @note カスタム変数 */
:root {
  --rpx: 0.6px;
  --rpxClamp: clamp(0px, var(--rpx), 1.4px);
}
@media screen and (max-width: 600px) {
  :root {
    --rpx: 0.1333333333vw;
  }
}

:root {
  --color-bg: #fff200;
  --color-text-black: #242424;
  --color-bg-green: #8dc540;
  --color-bg-brown: #987d45;
  --color-bg-blue:#29388b;
  --content-max-width: calc(750 * var(--rpxClamp));
  --side-margin:calc(40 * var(--rpxClamp));
}
@media screen and (max-width: 600px) {
  :root {
    --content-max-width: 100vw;
  }
}
:root .ranking2 {
  --color-bg: #0ab2ff;
}
:root .ranking3 {
  --color-bg: #91d425;
}

/* -----------------------------
@map PC用全体レイアウト
----------------------------- */
#naniwa-ae {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  background-image: url(../img/bg.jpg);
}
@media screen and (min-width: 601px) {
  #naniwa-ae {
    background-size: 100% 100%;
  }
}
#naniwa-ae > .content {
  grid-row: 1;
  background: #fff;
  max-width: 100vw;
  grid-column: 2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 600px) {
  #naniwa-ae > .content {
    width: var(--content-max-width);
  }
}

/* @note base.cssのリセット */
html {
  visibility: hidden;
}
html.loaded {
  visibility: visible;
}

.program .ktvglobal-container .commoncontents.ga-cn-header {
  display: none;
}
.program .ktvglobal-container .ga-cn-container * {
  padding: 0;
  background: none;
}
.program .ktvglobal-container .ga-cn-container * .image {
  padding: 0;
}
.program .ktvglobal-container .block-wrapper.maincontents {
  padding: 0;
}
.program .ktvglobal-container .container-innerwrapper {
  max-width: 100% !important;
}
.program .ktvglobal-container .heading-4-wrapper, .program .ktvglobal-container .heading-4 {
  margin: 0;
}
.program .ktvglobal-container .naniwaae > .c_text-block {
  padding: 0;
}
.program .ktvglobal-container .c_list-block .list {
  border: none;
  padding: 0;
}
.program .ktvglobal-container .c_list-block .list li {
  padding: 0;
  border: none;
  list-style: none;
}
.program .ktvglobal-container .heading-3-wrapper {
  margin: 0;
}
.program .ktvglobal-container .heading-3-wrapper.oadate,
.program .ktvglobal-container .mainvisual + .social-btn {
  display: none;
}
.program .ktvglobal-container li {
  list-style: none;
}
.program .ktvglobal-container i {
  font-style: normal;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  30%, 60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3%);
  }
}
@keyframes slideup-bounce {
  0% {
    transform: translateY(0%);
  }
  12% {
    transform: translateY(-10.89%);
  }
  24% {
    transform: translateY(-43.56%);
  }
  36% {
    transform: translateY(-98.01%);
  }
  54% {
    transform: translateY(-75.02%);
  }
  74% {
    transform: translateY(-98.37%);
  }
  82% {
    transform: translateY(-93.75%);
  }
  92% {
    transform: translateY(-99.34%);
  }
  96% {
    transform: translateY(-98.46%);
  }
  100% {
    transform: translateY(-100%);
  }
}
/* -----------------------------
@note 全般
----------------------------- */
div,
img {
  -webkit-tap-highlight-color: transparent;
}

.img {
  text-align: center;
}
.img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.h2-header {
  padding: 0 var(--side-margin) !important;
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: calc(32 * var(--rpxClamp));
  font-weight: bold;
  text-align: center;
}

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

/* -----------------------------
@note Display01
----------------------------- */
#display-01 .head {
  background-image: url(../img/lead_bg.jpg);
  background-size: cover;
  padding-bottom: calc(54 * var(--rpxClamp));
}
.mv #mv_img { 
  max-width: 100%;
  height: auto;
}
.head .mv {
  margin-bottom: calc(16 * var(--rpxClamp));
}
.lead_img img {
  max-width: 92%;
}
#display-01 .vote {
  background: url(../img/date_bg.jpg) no-repeat left 0 top 25px;
  margin-top: calc(-42 * var(--rpxClamp));
}
@media screen and (max-width: 600px) {
  #display-01 .vote {
    background: url(../img/date_bg.jpg) no-repeat left 0 top 20px;
  }
}
.date_img {
  margin-bottom: calc(54 * var(--rpxClamp));
}
.date_img img {
  max-width: 85.6%;
}
#display-01 .movie_contents {
  background-image: url(../img/main_bg.jpg);
  padding: calc(80 * var(--rpxClamp)) calc(30 * var(--rpxClamp));
}
.movie_contents .movie-wrap .movie_box {
  padding-bottom: calc(30 * var(--rpxClamp));
}
.movie_contents .movie-wrap .movie {
  background-image: url(../img/team_bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(690 * var(--rpxClamp));
  height: calc(266 * var(--rpxClamp));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(12 * var(--rpxClamp));
  padding: calc(35 * var(--rpxClamp));
  margin-bottom: calc(73 * var(--rpxClamp));
  font-weight: bold;
  text-align: left;
}
.movie_contents .movie-wrap .movie:last-child {
  margin-bottom: 0;
}
.movie_contents .movie-wrap .movie .team {
  display: flex;
  align-items: center;
  padding-bottom: calc(20 * var(--rpxClamp));
  border-bottom: calc(4 * var(--rpxClamp)) solid #3e3e3e;
  width: 100%;
}
.movie_contents .movie-wrap .movie .team img {
  width: calc(90 * var(--rpxClamp));
  height: calc(90 * var(--rpxClamp));
  margin: 0 calc(-8 * var(--rpxClamp)) 0 0;
}
.movie_contents .movie-wrap .movie .team-name {
  font-size: calc(36 * var(--rpxClamp));
  line-height: 1;
  letter-spacing: -0.05rem;
  padding-left: 0.5em;
  margin-right: calc(-34 * var(--rpxClamp));
}
.movie_contents .movie-wrap .movie .team-ttl {
  font-size: calc(33 * var(--rpxClamp));
  display: inline-block;
  text-indent: -1em;
  padding-left: 0.5em;
  line-height: 1.1;
}
.movie_contents .movie-wrap .movie .team-name .produce {
  font-size: calc(26 * var(--rpxClamp));
}
.movie_contents .movie-wrap .movie .team-member {
  font-size: calc(23 * var(--rpxClamp));
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: calc(15 * var(--rpxClamp));
}
.movie_contents .movie-wrap .movie .rokemember {
  line-height: 1;
  color: #fff;
  background-color: #000;
  padding: calc(6 * var(--rpxClamp)) calc(6 * var(--rpxClamp)) calc(8 * var(--rpxClamp));
  border-radius: calc(10 * var(--rpxClamp));
  white-space: nowrap;
}
.movie_contents .movie-wrap .movie .member-name {
  line-height: 1.25;
}

/*
@note - - 確認画面
*/
.confirm-block {
  background-image: url(../img/vote_bg.jpg);
}
.confirm-block .lead-text {
  text-align: center;
  margin: calc(20 * var(--rpxClamp)) 0 calc(30 * var(--rpxClamp));
}
.confirm-block .lead-text img {
  height: calc(31 * var(--rpxClamp));
  width: auto;
}
.confirm-block p,
.choice-block p {
  padding: calc(39 * var(--rpxClamp)) 0 !important;
  text-align: center;
  color: #000;
  font-size: calc(34 * var(--rpxClamp));
  font-weight: bold;
}
.confirm-block .ientry-desc {
  padding: calc(30 * var(--rpxClamp)) !important;
  border-radius: calc(20 * var(--rpxClamp));
  background: #fff !important;
  margin: 0 var(--side-margin);
  margin-top: var(--side-margin);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(20 * var(--rpxClamp));
}
.confirm-block .ientry-desc .img {
  width: calc(274 * var(--rpxClamp));
}
.confirm-block .ientry-desc .txt {
  font-size: calc(25 * var(--rpxClamp));
  line-height: 1.6;
}
.confirm-block .submit-button-wrap + p {
  margin: 0.5em 0;
}
.confirm-block .submit-button-wrap .cancel {
  margin-top: 0 !important;
}

.confirm-block .btn_submit {
  margin: 0 calc(30 * var(--rpxClamp)) !important;
}
.confirm-block .btn_cancel {
  padding: calc(45 * var(--rpxClamp)) calc(75 * var(--rpxClamp)) calc(100 * var(--rpxClamp)) !important;
}

/*
@note - - 完了画面
*/
.complete-block {
  text-align: center;
  background-image: url(../img/vote_bg.jpg) !important;
}
.complete-block .complete-message {
  width: 100%;
  padding: calc(36 * var(--rpxClamp)) calc(86 * var(--rpxClamp)) calc(36 * var(--rpxClamp)) calc(96 * var(--rpxClamp)) !important;
}
.complete-block .img {
  margin: 0 auto;
}
.complete-block p {
  text-align: center;
  color: #000;
  font-size: calc(28 * var(--rpxClamp));
  font-weight: 600;
  padding: calc(41 * var(--rpxClamp)) 0 calc(60 * var(--rpxClamp)) !important;
}

/* -----------------------------
@note Display02
----------------------------- */
/*
@note - - 応募方法
*/

.step-grp {
  --this-img-size: calc(300 * var(--rpxClamp));
  padding: 0 calc(20 * var(--rpxClamp)) !important;
}
.step-grp li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(40 * var(--rpxClamp)) calc(50 * var(--rpxClamp));
}
.step-grp li img {
  width: var(--this-img-size);
  height: auto;
}
.step-grp li .txt {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-top: calc(47 * var(--rpxClamp));
}
.step-grp li .txt .header {
  background: #fff;
  height: calc(51 * var(--rpxClamp));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: calc(10 * var(--rpxClamp));
}
.step-grp li .txt .header .yubi {
  position: absolute;
  bottom: 0;
  left: -12%;
  width: calc(71 * var(--rpxClamp));
  height: auto;
}
.step-grp li .txt .header .step {
  height: calc(35 * var(--rpxClamp));
  width: auto;
}
.step-grp li .txt p {
  font-size: calc(24 * var(--rpxClamp));
  font-weight: 500;
  color: var(--this-text-color) !important;
  line-height: 1.4;
  margin-top: 1.2em;
}
.step-grp li .button-wrap {
  grid-column: span 2;
  padding: 0 !important;
  position: relative;
}
.step-grp li .button-wrap.follow-x {
  margin-bottom: calc(-15 * var(--rpxClamp));
}
.step-grp li .button-wrap.follow-x .follow{
  display: inline-block;
  line-height: 0;
}

.step-grp li .button-wrap .cta-button {
  width: 100%;
}
.step-grp li .button-wrap iframe {
  display: none;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*
@note - - 応募方法(X投稿)
*/
.howto-block.x {
  background-image: url(../img/present_bg.jpg) !important;
  background-size: contain !important;
  --this-text-color: #fff;
  padding: calc(30 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) calc(48 * var(--rpxClamp)) !important;
}
.howto-block.x .present-text {
  margin-bottom: calc(60 * var(--rpxClamp));
}
.howto-block.x #howto-x {
  padding: 0 0 calc(30 * var(--rpxClamp)) !important;
}

.sample-box {
  font-weight: bold;
  grid-column: span 2;
  padding: calc(30 * var(--rpxClamp)) !important;
  background: #fff !important;
  border-radius: calc(10 * var(--rpxClamp));
  position: relative;
}
.sample-box:before {
  content: "▲";
  width: 100%;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(40 * var(--rpxClamp));
  text-align: center;
  line-height: 1;
  margin-top: -0.7em;
}
.sample-box p {
  font-size: calc(18 * var(--rpxClamp));
  margin-bottom: 0.5em;
}
.sample-box .note {
  font-size: calc(16 * var(--rpxClamp));
  margin-bottom: 1em;
}
.sample-box .img {
  width: 100%;
}
.sample-box .img img {
  width: 80%;
  height: auto;
}

/*
@note - - - - 矢印アニメーション
*/
:root {
  --delay-base: 100ms;
  --duraiton: 1000ms;
  --delay: 0ms;
}

.arrow-down {
  grid-column: span 2;
  margin: calc(-10 * var(--rpxClamp)) 0 calc(45 * var(--rpxClamp));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.arrow-down img {
  width: calc(70 * var(--rpxClamp)) !important;
}

.button-wrap {
  padding: calc(60 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) !important;
}

.cta-button {
  cursor: pointer;
}

/*
@note - - 順位選択
*/
#display-02 .choice-block {
  background-image: url(../img/vote_bg.jpg);
}
.lead {
  padding: calc(36 * var(--rpxClamp)) calc(66 * var(--rpxClamp)) !important;
}
.choice-block .lead img {
  width: 100%;
  height: auto;
}
.reset-button-wrap {
  padding: calc(60 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) calc(120 * var(--rpxClamp)) !important;
}

/*
@note - - - UI
*/
.choice-result-display {
  height: calc(492 * var(--rpxClamp));
  padding: 0 calc(30 * var(--rpxClamp)) !important;
  display: grid;
  gap: calc(10 * var(--rpxClamp));
  grid-template-columns: repeat(4, 1fr);
  --this-bg-color: #ccc;
}
.choice-result-display .rank {
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: 1fr calc(107 * var(--rpxClamp));
  cursor: pointer;
}
.choice-result-display .rank.selected {
  cursor: auto;
  position: relative;
  overflow: hidden;
}
.choice-result-display .rank1 {
  background: url(../img/choice01.jpg) !important;
  background-size: cover !important;
  border: calc(4 * var(--rpxClamp)) solid #8c0021;
}
.choice-result-display .rank2 {
  background: url(../img/choice02.jpg) !important;
  background-size: cover !important;
  border: calc(4 * var(--rpxClamp)) solid #004c88;
}
.choice-result-display .rank3 {
  background: url(../img/choice03.jpg) !important;
  background-size: cover !important;
  border: calc(4 * var(--rpxClamp)) solid #e83418;
}
.choice-result-display .rank4 {
  background: url(../img/choice04.jpg) !important;
  background-size: cover !important;
  border: calc(4 * var(--rpxClamp)) solid #248d32;
}
.choice-result-display .rank .pic-wrap {
  position: relative;
  height: 100%;
}
.choice-result-display .rank .pic-wrap .img {
  position: absolute;
}
.choice-result-display .rank .pic-wrap .choice-message {
  margin: calc(7 * var(--rpxClamp)) calc(8 * var(--rpxClamp));
  pointer-events: none;
}
.choice-result-display .rank .pic-wrap .choice .selected {
  width: calc(100% + (4 * var(--rpxClamp)));
  max-width: none;
  margin: calc(-4 * var(--rpxClamp));
}
.choice-result-display .rank .txt {
  background-color: var(--this-bg-color);
  padding: calc(12 * var(--rpxClamp)) 0 calc(11 * var(--rpxClamp));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 9999;
}
.choice-result-display .rank.selected .txt {
  padding-top: calc(8 * var(--rpxClamp));
}
.choice-result-display .rank1 .txt {
  background: url(../img/ranking01_bg.png);
  background-size: cover;
}
.choice-result-display .rank2 .txt {
  background: url(../img/ranking02_bg.png);
  background-size: cover;
}
.choice-result-display .rank3 .txt {
  background: url(../img/ranking03_bg.png);
  background-size: cover;
}
.choice-result-display .rank4 .txt {
  background: url(../img/ranking04_bg.png);
  background-size: cover;
}
.choice-result-display .rank .txt .index {
  width: calc(104 * var(--rpxClamp));
  margin: 0 auto;
}
.choice-result-display .rank.selected .txt .index {
  width: calc(84 * var(--rpxClamp));
  margin: 0 auto calc(6 * var(--rpxClamp));
}
.choice-result-display .rank .txt .name {
  font-size: calc(28 * var(--rpxClamp));
  color: #fff;
  font-weight: bolder;
  text-align: center;
  display: block;
  line-height: 1;
  margin: 0 calc(-4 * var(--rpxClamp));
}
.choice-result-display .rank.selected .txt .name {
  line-height: 0.5;
}
.choice-result-display .rank .txt .name .team-txt {
  line-height: 1.091;
  font-size: calc(20 * var(--rpxClamp));
  letter-spacing: -0.06em;
}

/* -----------------------------
@note Display03
----------------------------- */
/*
@note - - 応募要項
*/
#display-03 .youkou {
  padding: calc(39 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) calc(28 * var(--rpxClamp));
}

#display-03 .youkou .h2-header {
  margin-bottom: calc(42 * var(--rpxClamp));
}
.youkou .h2-header::before,
.youkou .h2-header::after {
  content: "";
  width: calc(39 * var(--rpxClamp));
  height: calc(52 * var(--rpxClamp));
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.youkou .h2-header::before {
  background-image: url(../img/chuui_left.png);
  top: 0;
  left: calc(98 * var(--rpxClamp));;
}
.youkou .h2-header::after {
  background-image: url(../img/chuui_right.png);
  top: 0;
  right: calc(98 * var(--rpxClamp));
}

#display-03 .chuuijikou {
  background: url(../img/chuui_bg.jpg);
  background-size: cover;
}
#display-03 .ouboyoukou {
  background: url(../img/youkou_bg.jpg);
  background-size: cover;
}

.youkou-text {
  border-radius: calc(10 * var(--rpxClamp));
  background: #fff !important;
  padding: calc(44 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) !important;
  padding-right: calc(27 * var(--rpxClamp)) !important;
  font-size: calc(22 * var(--rpxClamp));
  font-weight: 500;
  height: calc(540 * var(--rpxClamp));
}
.youkou-text .inner {
  overflow: auto;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-right: calc(calc(21 * var(--rpxClamp))) !important;
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
}
.youkou-text .inner::-webkit-scrollbar {
  width: calc(12 * var(--rpxClamp));
}
.youkou-text .inner::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.youkou-text .inner::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 4px;
}
.youkou-text ul li {
  display: grid;
  grid-template-columns: 1em 1fr;
  margin-bottom: calc(8 * var(--rpxClamp));
  
}
.youkou-text ul li:before {
  content: "・";
}

/*
@note 選択モーダルウィンドウ
*/
#display-04 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.85);
}
#display-04 * {
  pointer-events: none;
}
.is-modal #display-04 {
  opacity: 1;
  pointer-events: auto;
  padding: 5vh 0;
}
.is-modal #display-04 * {
  pointer-events: auto;
}
.is-modal #display-04 #decide-button {
  pointer-events: none;
}
.is-modal #display-04 #decide-button img {
  pointer-events: none;
}
@media screen and (min-width: 601px) {
  #display-04 .inner {
    /* background: rgba(0, 0, 0, 0.5); */
    padding: calc(130 * var(--rpxClamp)) calc(30 * var(--rpxClamp));
  }
}
@media screen and (max-width: 600px) {
  #display-04 .inner {
    min-height: auto;
  }
}
#display-04 .inner {
  padding: calc(105 * var(--rpxClamp)) calc(30 * var(--rpxClamp)) 0;
  position: relative;
  max-width: var(--content-max-width);
  transition: 500ms ease-in-out;
  overflow-y: auto;
  height: 100%;
}
#display-04 .btn-close {
  position: absolute;
  z-index: 1;
  right: calc(30 * var(--rpxClamp));
  top: calc(30 * var(--rpxClamp));
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  #display-04 .btn-close {
    right: calc(40 * var(--rpxClamp));
    top: calc(20 * var(--rpxClamp));
  }
}
#display-04 .btn-close img {
  width: calc(51 * var(--rpxClamp));
  height: auto;
}
#display-04 .header .img {
  margin: 0 calc(26 * var(--rpxClamp));
}
#display-04 .header p {
  color: #fff;
  margin: calc(80 * var(--rpxClamp)) 0 calc(40 * var(--rpxClamp));
  text-align: center;
  font-size: calc(30 * var(--rpxClamp));
  font-weight: bold;
  /* white-space: nowrap; */
}
@media screen and (max-width: 600px) {
  #display-04 .header p {
    margin: calc(30 * var(--rpxClamp)) 0 calc(25 * var(--rpxClamp));
    font-size: calc(28 * var(--rpxClamp));
  }
}
#display-04 #decide-button {
  position: relative;
  pointer-events: none;
}
.is-modal #display-04 #decide-button.enabled {
  display: block;
  pointer-events: auto;
}
.is-modal #display-04 #decide-button.enabled img {
  pointer-events: auto;
}
#display-04 #decide-button.enabled img + img {
  display: none;
}
#display-04 #decide-button img + img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
@note - - 選択リスト
*/
.choice-radio-list {
  display: grid;
  gap: calc(26 * var(--rpxClamp)) calc(40 * var(--rpxClamp));
  grid-template-columns: repeat(2, 1fr);
  margin: 0 calc(30 * var(--rpxClamp)) calc(50 * var(--rpxClamp));
  --this-choice-border: hidden;
  --this-disabled: hidden;
}
@media screen and (max-width: 600px) {
  .choice-radio-list {
    gap: calc(20 * var(--rpxClamp)) calc(40 * var(--rpxClamp));
    margin: 0 calc(70 * var(--rpxClamp)) calc(30 * var(--rpxClamp));
  }
}
.choice-radio-list input[type=radio] {
  display: none;
}
.choice-radio-list input:checked + .img {
  --this-choice-border: visible;
}
.choice-radio-list input:disabled + .img {
  --this-disabled: visible;
}
.choice-radio-list > div .img {
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.choice-radio-list > div .img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/choice_disable.png);
  background-color: #2d0037;
  opacity: 0.7;
  background-size: cover;
  visibility: var(--this-disabled);
  cursor: not-allowed;
}
.choice-radio-list > div .img:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 96%;
  height: 96%;
  border-radius: 100%;
  border: calc(10 * var(--rpxClamp)) solid #a70027;
  visibility: var(--this-choice-border);
}
.choice-radio-list > div .name {
  line-height: 1.2;
  color: #fff;
  text-align: center;
  font-size: calc(30 * var(--rpxClamp));
  font-weight: bold;
  margin-top: calc(16 * var(--rpxClamp));
}
@media screen and (max-width: 600px) {
  .choice-radio-list > div .name {
    font-size: calc(26 * var(--rpxClamp));
}
}

/*
@note 画像遷移
*/
/*
@note - - 初期状態
*/
*[data-display] {
  display: none;
}

*[data-display=start],
*[data-display="start,choice"] {
  display: block;
}

/*
@note - - 順位予想
*/
.is-modal .pagetop {
  pointer-events: none;
}

div[data-state=start] #display-04 {
  display: none;
}

div[data-state=choice] #display-01 {
  --this-bottom-gap:calc(50 * var(--rpxClamp));
}
div[data-state=choice] #display-03 {
  display: none;
}

.test-btn {
  text-align: center;
  margin-top: 1em;
  color: #d8253b;
  font-weight: bold;
}

/*
@note CLOSING 
*/
.closing-text {
  display: none;
}

.closing-message {
  display: none;
}

.naniwaae .closing #shussouhyou {
  display: none;
}
.naniwaae .closing .howto-block {
  display: none;
}
.naniwaae .closing div.complete-block {
  display: block;
  padding-top: 0 !important;
}
.naniwaae .closing div.complete-block > p {
  display: none;
}
.naniwaae .closing div.complete-block .choice-result-display {
  display: none;
}
.naniwaae .closing div.complete-block .choice-result-display + p {
  display: none;
}
.naniwaae .closing div.complete-block .complete-message {
  display: none;
}
.naniwaae .closing div.complete-block .closing-message {
  display: block;
}
.naniwaae .closing div.complete-block .closing-message .img {
  margin-top: calc(50 * var(--rpxClamp));
}
.naniwaae .closing div.complete-block .closing-message .img.result {
  display: none;
}
.naniwaae .closing div.complete-block .closing-message a {
  display: block;
  width: calc(290 * var(--rpxClamp));
  margin: 0 auto;
  margin-top: calc(50 * var(--rpxClamp));
}
.naniwaae .closing div.complete-block .closing-message a img {
  width: 100%;
  height: auto;
}
.naniwaae .closing .howto-block.x {
  display: block !important;
}
.naniwaae .closing .howto-block.x > * {
  display: none;
}
.naniwaae .closing .howto-block.x .present-text {
  display: block;
}
.naniwaae .closing #youkou-grp-02 {
  display: block;
}
.naniwaae .closing #present {
  position: relative;
}
.naniwaae .closing #present .closing-text {
  content: "";
  width: calc(100% - 40 * var(--rpxClamp));
  height: calc(100% - 140 * var(--rpxClamp));
  background: rgba(255, 243, 0, 0.8);
  position: absolute;
  top: calc(90 * var(--rpxClamp));
  left: calc(20 * var(--rpxClamp));
  display: flex;
  align-items: center;
}
.naniwaae .closing #present .closing-text img {
  width: 90%;
  height: auto;
}
.naniwaae .closing .complete-block .img {
  margin-top: calc(90 * var(--rpxClamp));
}
.naniwaae .closing #youkou-grp-01,
.naniwaae .closing #youkou-grp-02 {
  margin-bottom: calc(90 * var(--rpxClamp));
}
.naniwaae .closing #youkou-grp-01 h2.h2-header,
.naniwaae .closing #youkou-grp-02 h2.h2-header {
  padding: 0 !important;
}

/*
@note at-result
*/
.naniwaae .closing.at-result .closing-message > .img {
  display: none;
}
.naniwaae .closing.at-result .img.result {
  display: block !important;
  width: auto;
  margin: 0 calc(50 * var(--rpxClamp));
}
.naniwaae .closing.at-result p {
  display: none;
}
.naniwaae .closing.at-result .cu-link-wrap {
  display: none;
}

/* モーダルウィンドウ */
#modal_overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999999;
}
@media screen and (min-width: 601px) {
  #modal_overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}
#modal_body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
}
@media screen and (max-width: 650px){
  body:not(.tablet) #modal_body {
    width: 90%;
  }
}
#movie_box{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
#modal_player{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
#btn_close{
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px;
  border: 3px solid transparent;
  border-radius: calc(10 * var(--rpxClamp));
  background:
  linear-gradient(#f03, #f03) padding-box,
  linear-gradient(135deg,#c48623 0%,#fef47d 100%) border-box;
  width: 12em;
  color:#fff;
  text-align: center;
  cursor:pointer;
}
#btn_close:after{
  content:"閉じる";
  font-size: calc(30 * var(--rpxClamp));
  font-weight: 600;
}

/* ========== スマホ ========== */
.sphone #modal_body{
  width:90%;
}
@media screen and (orientation: landscape) {
  .sphone #modal_body{
    width:60% !important;
  }
}

/*
@note footer
*/
.copyright-text {
  text-align: center;
  font-size: calc(16 * var(--rpxClamp));
  background-image: url(../img/footer_bg.jpg) !important;
  background-size: cover !important;
  padding: calc(43 * var(--rpxClamp)) !important;
}
.copyright-text a {
  color: #fff !important;
  text-decoration: none;
}