@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: #fff;
  --color-yellow: #fff200;
  --color-text-black: #242424;
  --color-bg-green: #8dc540;
  --color-brown: #200c00;
  --color-bg-blue:#29388b;
  --content-max-width: calc(750 * var(--rpxClamp));
  --side-margin:calc(13 * var(--rpxClamp));
  --inner-padding:calc(25 * var(--rpxClamp));
}
@media screen and (max-width: 600px) {
  :root {
    --content-max-width: 100vw;
  }
}
:root .ranking1 {
  --color-bg: #fff200;
}
:root .ranking2 {
  --color-bg: #0ab2ff;
}
:root .ranking3 {
  --color-bg: #91d425;
}

/* -----------------------------
@map PC用全体レイアウト
----------------------------- */
#inner-spy {
  min-height: 100vh;
  background-color: var(--color-bg) !important;
  transition: 500ms background-color;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}
@media screen and (min-width: 601px) {
  #inner-spy {
    background-position: center top 50px !important;
    background-attachment: fixed;
    background-repeat: repeat;
  }
}
@media screen and (max-width: 600px) {
  #inner-spy .pc-bg {
    display: none;
  }
}
#inner-spy .left {
  grid-row: 1;
  grid-column: 1;
  background-position: right top;
}
#inner-spy .right {
  grid-row: 1;
  grid-column: 3;
  background-position: left top;
}
#inner-spy > .content {
  grid-row: 1;
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_renga_repeat.jpg);
  background-size: 100% auto;
  background-position: 0 0;
  background-repeat: repeat;
  width: var(--content-max-width);
  max-width: 100vw;
  grid-column: 2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  padding: 0 var(--side-margin);
}

/* @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 .section-6rentan > .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 rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:root {
  --beacon-height: calc(56 * var(--rpxClamp));
}

@keyframes beacon {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 0% calc(var(--beacon-height) * -1);
  }
  50% {
    background-position: 0% calc(var(--beacon-height) * -2);
  }
  75% {
    background-position: 0% calc(var(--beacon-height) * -3);
  }
}
/* -----------------------------
@note 暗転
----------------------------- */
@keyframes anten-close {
  0% {
    background-size: 10000%;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    background-size: 100%;
    opacity: 1;
    background-color: #000 !important;
  }
}
@keyframes anten-open {
  0% {
    background-size: 100%;
    opacity: 1;
    background-color: #000 !important;
  }
  99% {
    opacity: 1;
  }
  100% {
    background-size: 10000%;
    opacity: 0;
  }
}
@keyframes anten-close-cover {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anten-open-cover {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
:root {
  --anten-duration: 1200ms;
}

.transition-wrap {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  opacity: 1 !important;
}
html[data-scene=transition-close] .transition-wrap {
  --this-animation: anten-close var(--anten-duration) ease-in-out normal;
  --this-animation-state: running;
  --this-cover-animation-state: running;
  --this-cover-animation: anten-close-cover var(--anten-duration) ease-in-out normal;
}
html[data-scene=transition-open] .transition-wrap {
  --this-open-animation: anten-open var(--anten-duration) ease-in-out normal;
  --this-open-animation-state: running;
  --this-cover-animation: anten-open-cover var(--anten-duration) ease-in-out normal;
  --this-cover-animation-state: running;
}
html[data-scene=transition-open-end] .transition-wrap {
  display: none;
}
html[data-scene=transition-open-end] .transition-wrap .inner-close {
  display: none;
}
html[data-scene=transition-open-end] .transition-wrap .inner-open {
  display: none;
}
html[data-scene=transition-open-end] .transition-wrap .inner-cover {
  display: none;
}
.transition-wrap .inner-close {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 1.3%, rgb(0, 0, 0) 1.5%) !important;
  opacity: 0;
  animation: var(--this-animation, none);
  animation-play-state: var(--this-animation-state, paused);
  animation-fill-mode: forwards;
  width: 200vw;
  height: 200vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: background-size;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.transition-wrap .inner-open {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 1.3%, rgb(0, 0, 0) 1.5%) !important;
  opacity: 0;
  animation: var(--this-open-animation, none);
  animation-play-state: var(--this-open-animation-state, paused);
  animation-fill-mode: forwards;
  width: 200vw;
  height: 200vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: background-size;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.transition-wrap .inner-cover {
  position: absolute;
  animation: var(--this-cover-animation, anten-close-cover var(--anten-duration) linear normal);
  animation-play-state: var(--this-cover-animation-state, paused);
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000 !important;
}

/* -----------------------------
@note スパイ一覧
----------------------------- */
/*
@note - - 初回表示
*/
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-0.5deg);
  }
  30% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#member-list li {
  -webkit-mask-image: linear-gradient(-40deg, transparent 49%, black 50%);
          mask-image: linear-gradient(-40deg, transparent 49%, black 50%);
  -webkit-mask-size: 100% max(300%, 100vh);
          mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: var(--fadein-mask-position, center 100%);
          mask-position: var(--fadein-mask-position, center 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: 1500ms cubic-bezier(0.78, -0.01, 0.25, 1);
  transition-delay: var(--this-delay, 0s);
  transform-origin: center 0;
  animation-play-state: var(--drift-state, paused);
}
#member-list li.on {
  --fadein-mask-position: center 0%;
  animation: var(--spy-list-animation, none);
}

#spy-list.inview-0 {
  --spy-list-animation: drift var(--drift-duration, 5000ms) ease-in-out 0s infinite alternate;
  --drift-state: running;
  will-change: mask-position;
}

/*
@note - - リード文
*/
@keyframes blink_message {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.choice-lead {
  animation: blink_message 1000ms infinite;
  animation-play-state: var(--blink-state, paused);
}
.choice-lead.inview-0 {
  --blink-state: running;
}

/* -----------------------------
@note 確認画面カード
----------------------------- */
.confirm-block {
  overflow: hidden;
}

:root {
  --card-duration: 1200ms;
  --card-easing: cubic-bezier(0, 0.82, 0.58, 1);
}

@keyframes card-ura {
  0% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 360deg);
    filter: brightness(1);
  }
  51% {
    transform: rotate3d(0, 1, 0, 360deg);
    filter: brightness(2);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
    filter: brightness(1);
  }
}
@keyframes card-omote {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
}
html[data-scene=transition-open-end] {
  --card-animation-state: running;
  --card-will-change: transform;
}

html[data-scene=card--open-end] {
  --card-animation-state: paused;
  --card-will-change: none;
}

.card {
  perspective: 2000px;
  overflow: hidden;
}
.card .ura {
  animation: card-ura var(--card-duration) var(--card-easing) normal;
  animation-play-state: var(--card-animation-state, paused);
  backface-visibility: hidden;
  position: relative;
  z-index: 1;
  will-change: var(--card-will-change, none);
}
.card .omote {
  animation: card-omote var(--card-duration) var(--card-easing) normal;
  animation-play-state: var(--card-animation-state, paused);
  will-change: var(--card-will-change, none);
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/card-1.jpg) !important;
  border: 3px solid #000;
  background-size: cover !important;
}
@media screen and (max-width: 600px) {
  .card .omote {
    border: 2px solid #000;
  }
}
.card .omote:before {
  content: "";
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/SPY_text_black_3x.png) !important;
  background-size: calc(130 * var(--rpxClamp)) auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* -----------------------------
@note 全般
----------------------------- */
div,
img {
  -webkit-tap-highlight-color: transparent;
}

.img img {
  max-width: 100%;
  height: auto;
}

#section-spy > .c_text-block {
  padding: 0 !important;
}

#inner-spy {
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_pc.jpg);
  background-size: 100% auto;
  background-repeat: repeat-y !important;
  overflow: hidden;
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
  #inner-spy {
    background-attachment: scroll !important;
    background-size: calc(1920 * var(--rpxClamp)) auto !important;
    background-repeat: repeat-y !important;
  }
}
@media screen and (max-width: 600px) {
  #inner-spy {
    background: none !important;
  }
}

/*
@note - - 見出し
*/
.header {
  margin-top: var(--header-margin-top, calc(50 * var(--rpxClamp))) !important;
}
.header img {
  width: 100%;
  height: auto;
}

/*
@note - - ボタン
*/
.button-wrap {
  max-width: calc(622 * var(--rpxClamp));
  margin: 0 auto !important;
  display: flex;
  justify-content: center;
}

/*
@note - - ページ下部イラスト
*/
.footer-img {
  height: calc(220 * var(--rpxClamp));
  text-align: center;
  margin-top: calc(-70 * var(--rpxClamp));
}
.footer-img img {
  height: 100% !important;
  width: auto;
}

/* -----------------------------
@note MV
----------------------------- */
#mv {
  box-sizing: content-box;
  width: calc(100% + var(--side-margin) * 2);
  margin-left: calc(var(--side-margin) * -1);
}

/* -----------------------------
@note Display01
----------------------------- */
:root {
  --display-01-before-pos-y: calc(-72 * var(--rpxClamp));
}

#display-01 {
  overflow: hidden;
  position: relative;
  margin-top: calc(25 * var(--rpxClamp)) !important;
  background-image: var(--display01-bg, url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_inner_01.png));
  background-size: 100% 100%;
  padding: 0 var(--inner-padding) calc(50 * var(--rpxClamp)) !important;
  margin-bottom: var(--diplay-01-mb, 0);
}
@media screen and (max-width: 600px) {
  #display-01 {
    --this-bottom-offset:calc(36 * var(--rpxClamp));
  }
}
#display-01 > * {
  position: relative;
  z-index: 1;
}

.message {
  display: flex;
  margin: calc(30 * var(--rpxClamp)) 0 calc(40 * var(--rpxClamp)) 0;
}
.message img {
  display: block;
  margin: 0 auto;
}

/*
@note - - スパイ一覧
*/
#spy-list {
  margin-top: calc(20 * var(--rpxClamp));
  position: relative;
  padding-top: 165.46%;
}
#spy-list #spy-list-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
#spy-list .scope-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}
#spy-list .scope {
  width: var(--this-w, 29.2%);
  height: var(--this-h, 25%);
  top: var(--this-pos-y, 100%);
  left: var(--this-pos-x, 3%);
  pointer-events: none;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 600ms cubic-bezier(0, 1.3, 0.57, 0.95), top 1000ms cubic-bezier(0, 1.3, 0.57, 0.95), opacity 400ms ease-in-out;
  will-change: top, left;
  opacity: 0;
}
#spy-list .scope img {
  max-width: 1000px;
  max-height: 1000px;
}

.tap-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tap-area li {
  width: var(--this-w, 29.2%);
  height: var(--this-h, 25%);
  position: absolute;
  z-index: 1;
  top: var(--this-pos-y, 30.5%);
  left: var(--this-pos-x, 3%);
  box-shadow: 3px 3px 4px rgba(118, 98, 50, 0.3019607843);
}
.tap-area li a {
  display: block;
  width: 100%;
  height: 100%;
}
.tap-area .person01 {
  --this-w: 32.8%;
  --this-h: 28.1%;
  --this-pos-y: 0%;
  --this-pos-x: 12.6%;
}
.tap-area .person02 {
  --this-w: 32.8%;
  --this-h: 28.1%;
  --this-pos-y: 0%;
  --this-pos-x: 54%;
}
.tap-area .person04 {
  --this-pos-x: 35.5%;
}
.tap-area .person05 {
  --this-pos-x: 67.7%;
}
.tap-area .person06 {
  --this-pos-y: 58.3%;
}
.tap-area .person07 {
  --this-pos-y: 58.3%;
  --this-pos-x: 67.7%;
}

/*
@note - - ページリード文
*/
.lead {
  margin-top: calc(16 * var(--rpxClamp));
  margin-bottom: calc(22 * var(--rpxClamp));
}
.lead img {
  margin: 0 auto;
  display: block;
}

.ranking-notice-text {
  display: var(--ranking-notice-text-display, none);
}
.ranking-notice-text dl {
  font-size: 15px;
  background: rgba(255, 255, 255, 0.3843137255) !important;
  padding: 0.4em !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  font-weight: bold;
  margin: 0.5em;
  line-height: 1.4;
  white-space: nowrap;
}
.ranking-notice-text dl span {
  background: #fff !important;
  height: auto;
  font-size: 0.9em;
  padding: 0.25em !important;
  line-height: 1;
  font-weight: bold;
}

/*
@note - - プレゼント画像
*/
#present_text {
  opacity: 0;
  transition: 500ms 500ms;
}
#present_text.show {
  opacity: 1;
}

.present-grp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(40 * var(--rpxClamp));
}

/*
@note - - 確認画面
*/
.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 > .img {
  display: flex;
  justify-content: center;
}
.confirm-block p {
  margin: calc(58 * var(--rpxClamp)) 0 calc(44 * var(--rpxClamp));
  text-align: center;
  font-size: calc(27 * var(--rpxClamp));
  white-space: nowrap;
  color: var(--color-brown);
}
.confirm-block .ientry-desc {
  padding: calc(30 * var(--rpxClamp)) !important;
  background: #fff !important;
  margin: calc(40 * var(--rpxClamp)) var(--side-margin);
  margin-top: calc(50 * var(--rpxClamp));
  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: calc(20 * var(--rpxClamp)) !important;
}

.choice-comfirm-display {
  display: flex;
  justify-content: center;
  position: relative;
}
.choice-comfirm-display .card {
  width: calc(370 * var(--rpxClamp));
}
.choice-comfirm-display .card img {
  max-width: 100%;
  width: auto;
}
.choice-comfirm-display .illust {
  position: absolute;
  bottom: calc(-22 * var(--rpxClamp));
  left: 50%;
  margin-left: calc(156 * var(--rpxClamp));
}

.guide-to-x-present {
  margin-bottom: calc(36 * var(--rpxClamp));
}

/*
@note - - 完了画面
*/
.complete-block {
  text-align: center;
  padding-top: calc(0 * var(--rpxClamp)) !important;
}
.complete-block .complete-message {
  margin-top: calc(45 * var(--rpxClamp));
}
.complete-block .complete-img img {
  width: 100%;
  height: auto;
}
.complete-block p {
  text-align: center;
  font-size: calc(30 * var(--rpxClamp));
  margin: 1em 0;
}

.complete-message-02 {
  margin-top: calc(-100 * var(--rpxClamp));
}
.complete-message-02 .box {
  background: #fff !important;
  margin-top: calc(-187 * var(--rpxClamp));
  position: relative;
  z-index: 1;
  padding: 0 0 calc(45 * var(--rpxClamp)) 0 !important;
}
.complete-message-02 .box .label img {
  width: 100%;
}
.complete-message-02 p {
  font-size: calc(28 * var(--rpxClamp));
  white-space: nowrap;
  color: var(--color-brown);
}

/* -----------------------------
@note Display02
----------------------------- */
#display-02 {
  overflow: hidden;
  position: relative;
  margin-top: calc(25 * var(--rpxClamp)) !important;
  background-image: var(--display01-bg, url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_inner_02.png));
  background-size: 100% 100%;
  padding: 0 var(--inner-padding) calc(50 * var(--rpxClamp)) !important;
}

/*
@note - - 応募方法
*/
.step-grp {
  --this-img-size: calc(314 * var(--rpxClamp));
  padding: calc(20 * var(--rpxClamp)) !important;
  padding-bottom: 0 !important;
}
.step-grp li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(20 * var(--rpxClamp));
}
.step-grp li + li {
  margin-top: calc(20 * var(--rpxClamp));
}
.step-grp li img {
  width: var(--this-img-size);
  height: auto;
}
.step-grp li .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-grp li .txt img {
  margin-top: calc(-48 * var(--rpxClamp));
}
.step-grp li .txt p {
  font-size: calc(30 * var(--rpxClamp));
  color: var(--this-text-color) !important;
  line-height: 1.4;
  margin-top: 0.66em;
}
.step-grp li .button-wrap {
  grid-column: span 2;
  padding: 0 !important;
  margin: calc(10 * var(--rpxClamp)) 0;
  position: relative;
  cursor: pointer;
}
.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投稿)
*/
:root {
  --howto-block-padding-top: calc(138 * var(--rpxClamp));
}

.howto-block.x .present-text {
  margin-bottom: calc(60 * var(--rpxClamp));
}

.sample-box {
  grid-column: span 2;
  padding: calc(40 * var(--rpxClamp)) !important;
  background: #174a93 !important;
  border-radius: calc(5 * var(--rpxClamp));
  position: relative;
  margin-top: calc(15 * var(--rpxClamp));
}
.sample-box:before {
  content: "▲";
  width: 100%;
  color: #174a93;
  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(20 * var(--rpxClamp));
  color: #fff;
}
.sample-box .note {
  font-size: calc(16 * var(--rpxClamp));
  margin-bottom: 0.5em;
}
.sample-box .img {
  width: 100%;
}
.sample-box .img img {
  width: 100%;
  height: auto;
}

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

.arrow-down {
  height: calc(64 * var(--rpxClamp));
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --this-bg: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/arrow_down_single.png);
}
.arrow-down i {
  width: calc(60 * var(--rpxClamp));
  height: calc(25 * var(--rpxClamp));
  background-image: var(--this-bg) !important;
  display: block;
  background-size: 100% 100% !important;
  position: relative;
  animation: blink var(--duraiton) steps(1) var(--delay) infinite;
}
.arrow-down i + i {
  --delay: calc(var(--delay-base)*1);
}
.arrow-down i + i + i {
  --delay: calc(var(--delay-base)*2);
}

.button-wrap {
  padding: 0 var(--side-margin) !important;
}

.cta-button {
  transition: 300ms cubic-bezier(0, 0.74, 0.04, 1.46);
  display: block;
  cursor: pointer;
}
.cta-button:hover, .cta-button.ontouch {
  transform: scale(1.025);
}
.cta-button:active {
  transition: 0;
  transform: scale(1);
}
.cta-button.cancel, .cta-button.reset {
  margin: calc(30 * var(--rpxClamp)) auto 0 auto;
  width: calc(549 * var(--rpxClamp));
}
.cta-button.cancel img, .cta-button.reset img {
  max-width: 100%;
  height: auto;
}

/*
@note - - 順位選択
*/
.choice-block {
  background-color: var(--color-bg-green) !important;
  padding-bottom: calc(60 * var(--rpxClamp)) !important;
}
.choice-block .lead {
  height: calc(28 * var(--rpxClamp));
  width: auto;
  margin: calc(20 * var(--rpxClamp)) 0 calc(30 * var(--rpxClamp));
  text-align: center;
}
.choice-block .lead img {
  height: 100%;
  width: auto;
}

/*
@note - - - UI
*/
.choice-result-display {
  background: var(--color-text-black) !important;
  height: calc(404 * var(--rpxClamp));
  padding: calc(10 * var(--rpxClamp)) !important;
  display: grid;
  gap: calc(10 * var(--rpxClamp));
  grid-template-columns: repeat(6, 1fr);
  --this-bg-color: #ccc;
}
.choice-result-display .rank {
  background: var(--color-bg-green) !important;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: 1fr calc(85 * var(--rpxClamp));
  cursor: pointer;
}
.choice-result-display .rank:hover {
  background-color: var(--this-bg-color) !important;
}
.choice-result-display .rank[data-rank="1"] {
  --this-bg-color: #f12f95;
}
.choice-result-display .rank[data-rank="2"] {
  --this-bg-color: #17b4fc;
}
.choice-result-display .rank[data-rank="3"] {
  --this-bg-color: #d8253b;
}
.choice-result-display .rank[data-rank="4"] {
  --this-bg-color: #185ce7;
}
.choice-result-display .rank[data-rank="5"] {
  --this-bg-color: #ff8000;
}
.choice-result-display .rank[data-rank="6"] {
  --this-bg-color: #11990e;
}
.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 {
  width: calc(93 * var(--rpxClamp));
  inset: calc(40 * var(--rpxClamp)) 0 0 0;
  margin: auto !important;
  pointer-events: none;
  animation: bounce 300ms ease-out alternate-reverse infinite;
}
.choice-result-display .rank .pic-wrap .choice {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.choice-result-display .rank .pic-wrap .choice img {
  position: relative;
  top: 100%;
}
.choice-result-display .rank .pic-wrap .choice img.selected {
  transition: 0s;
  animation: slideup-bounce 500ms linear 300ms forwards;
}
.choice-result-display .rank .pic-wrap .uma {
  bottom: 0;
  left: 0;
  height: calc(102 * var(--rpxClamp));
  pointer-events: none;
  -moz-text-align-last: left;
       text-align-last: left;
}
.choice-result-display .rank .pic-wrap .uma img {
  width: auto;
  height: 100%;
  max-width: 1000px;
}
.choice-result-display .rank .pic-wrap:before {
  content: "";
  width: calc(63 * var(--rpxClamp));
  height: calc(129 * var(--rpxClamp));
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2024/02/choice_empty_img.png);
  background-size: cover;
  position: absolute;
  bottom: calc(9 * var(--rpxClamp));
  left: calc(19 * var(--rpxClamp));
}
.choice-result-display .rank .txt {
  background-color: var(--this-bg-color);
  padding: calc(10 * var(--rpxClamp)) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.choice-result-display .rank .txt .index {
  background: #fff;
  line-height: calc(30 * var(--rpxClamp));
  display: block;
  text-align: center;
  font-size: calc(22 * var(--rpxClamp));
  font-weight: bold;
  margin: 0 calc(10 * var(--rpxClamp));
}
.choice-result-display .rank .txt .name {
  font-size: calc(28 * var(--rpxClamp));
  color: #fff;
  font-weight: bold;
  text-align: center;
  display: block;
  line-height: 1;
  white-space: nowrap;
}
.choice-result-display .rank .txt .name.longname {
  transform: scale(0.7, 1);
  margin: 0 -1em;
}

/* -----------------------------
@note Display03
----------------------------- */
#display-03 {
  overflow: hidden;
  position: relative;
  margin-top: calc(50 * var(--rpxClamp)) !important;
  background-image: var(--display01-bg, url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_inner_03.png));
  background-size: 100% 100%;
  padding: 0 var(--inner-padding) calc(50 * var(--rpxClamp)) !important;
  --header-margin-top: calc(32 * var(--rpxClamp));
}

/*
@note - - 応募要項
*/
.youkou-text {
  border-radius: calc(5 * var(--rpxClamp));
  background: #fff !important;
  padding: calc(24 * var(--rpxClamp)) !important;
  padding-right: calc(16 * var(--rpxClamp)) !important;
  font-size: calc(24 * var(--rpxClamp)) !important;
  font-weight: 500 !important;
  height: calc(685 * var(--rpxClamp));
  margin: calc(16 * var(--rpxClamp));
}
.youkou-text .inner {
  overflow: auto;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-right: calc(calc(16 * var(--rpxClamp)) - 8px) !important;
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
}
.youkou-text .inner::-webkit-scrollbar {
  width: 8px;
}
.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;
}
.youkou-text ul li:before {
  content: "・";
}

/* -----------------------------
@note Display04
----------------------------- */
#display-04 {
  position: relative;
  margin-top: calc(50 * var(--rpxClamp)) !important;
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_X_present-scaled.jpg);
  background-size: cover;
  padding: calc(80 * var(--rpxClamp)) var(--inner-padding) calc(90 * var(--rpxClamp)) !important;
  --header-margin-top: calc(32 * var(--rpxClamp));
  width: calc(100% + var(--side-margin) * 2);
  margin-left: calc(var(--side-margin) * -1);
}
#display-04 .x-lead-img {
  display: flex;
  justify-content: center;
}
#display-04 .paper-01,
#display-04 .paper-02 {
  overflow: hidden;
  background-image: var(--this-bg, url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/X_present_bg_01.png));
  background-size: 100% 100%;
  margin-top: calc(50 * var(--rpxClamp)) !important;
  padding: 0 calc(20 * var(--rpxClamp)) !important;
}
#display-04 .paper-01 {
  padding-bottom: calc(90 * var(--rpxClamp)) !important;
}
#display-04 .paper-02 {
  background-image: var(--this-bg, url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/X_present_bg_02.png));
}

/* -----------------------------
@note リアルタイム予想
----------------------------- */
body:has(.footer-btn) .l-footer-body {
  padding-bottom: var(--this-padding-bottom, calc(180 * var(--rpxClamp))) !important;
}

.is-modal {
  --beacon-anime-state: paused;
}

.footer-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  justify-content: center;
}
.footer-btn .btn-wrap {
  position: relative;
}
.footer-btn .btn-wrap:before {
  content: "";
  width: calc(93 * var(--rpxClamp));
  height: calc(56 * var(--rpxClamp));
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/banner_realtime_beacon_spritesheet.png);
  position: absolute;
  top: calc(17 * var(--rpxClamp));
  left: calc(120 * var(--rpxClamp));
  margin: auto;
  background-size: 100% auto;
  animation: beacon 1500ms steps(1) infinite;
  animation-play-state: var(--beacon-anime-state, running);
}
.footer-btn .js-showModal {
  cursor: pointer;
}
.footer-btn .js-showModal:hover {
  filter: brightness(1.2);
}

/*
@note - モーダル
*/
html.is-modal {
  --modal-op: 1;
  --modal-pe: auto;
  --bar-will-change: width;
  --modal-pos-y: 0%;
}
html.is-modal .l-header-body-wrapper {
  top: -118px !important;
}

#display-05 {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: var(--modal-op, 0);
  pointer-events: var(--modal-pe, none);
  transition: 500ms;
}
#display-05 .scroll-wrap {
  max-height: 100%;
  overflow: auto;
  transform: var(--modal-pos-y, translateY(-100%));
  transition: 1000ms cubic-bezier(0, 1.18, 0.58, 1);
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
  position: relative;
  z-index: 1;
}
#display-05 .btn-close {
  width: calc(50 * var(--rpxClamp));
  position: absolute;
  top: calc(-10 * var(--rpxClamp));
  right: 0;
  transform: translateY(-100%);
  cursor: pointer;
}
#display-05 .btn-close img {
  width: 100% !important;
  height: auto !important;
}
#display-05 .inner {
  position: relative;
  margin-top: calc(100 * var(--rpxClamp));
  margin-bottom: calc(30 * var(--rpxClamp));
  width: calc(733 * var(--rpxClamp));
  padding: calc(50 * var(--rpxClamp)) calc(36 * var(--rpxClamp)) calc(70 * var(--rpxClamp));
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/bg_realtime_paper.png);
  background-size: 100% 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#display-05 .header {
  margin-top: 0 !important;
  margin-bottom: calc(36 * var(--rpxClamp));
}
#display-05 p {
  text-align: center;
  color: var(--color-brown);
  width: 100%;
  position: relative;
}
#display-05 p .img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.modal-close-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  z-index: 0;
}

/*
@note - - グラフ
*/
#graf-display {
  width: 100%;
  margin: calc(40 * var(--rpxClamp)) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  border-top: 2px solid var(--color-brown);
  gap: calc(20 * var(--rpxClamp)) 0;
  color: var(--color-brown);
  font-weight: bold;
  padding-top: calc(20 * var(--rpxClamp));
}
#graf-display dl {
  width: 100%;
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  max-height: calc(64 * var(--rpxClamp));
  min-height: 0;
}
#graf-display dl dt {
  position: relative;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: calc(26 * var(--rpxClamp));
  padding-right: calc(20 * var(--rpxClamp));
  min-height: 0;
}
#graf-display dl dt span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#graf-display dl dt span b {
  line-height: 1.5;
  display: inline;
  background: linear-gradient(var(--color-brown) 0%, var(--color-brown) 100%);
  color: #fff;
  padding: 0.2em 0.5em;
}
#graf-display dl dt:after {
  content: "";
  width: 2px;
  height: calc(100% + calc(60 * var(--rpxClamp)));
  background: var(--color-brown);
  position: absolute;
  right: 0;
  top: calc(-40 * var(--rpxClamp));
}
#graf-display dl dd {
  max-width: calc(100% - 3em);
  display: flex;
  line-height: 1;
  align-items: center;
  font-size: calc(36 * var(--rpxClamp));
  gap: calc(10 * var(--rpxClamp));
}
#graf-display dl dd .bar {
  background: #de0000;
  width: 100%;
  height: calc(64 * var(--rpxClamp));
  transition: 500ms;
  will-change: var(--bar-will-change, none);
}

/*
@note - - ボタン
*/
.btn-row {
  margin-top: calc(40 * var(--rpxClamp));
}

.btn-reload {
  position: relative;
  cursor: pointer;
}
.is-modal .btn-reload {
  --this-animation: rotate 3000ms 1000ms infinite;
}
.btn-reload:before {
  animation: var(--this-animation, none);
  transform-origin: center;
  content: "";
  position: absolute;
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  left: calc(32 * var(--rpxClamp));
  top: 0;
  width: calc(68 * var(--rpxClamp));
  height: 100%;
  background-image: url(https://www.ktv.jp/hanadai-chidori/wp-content/uploads/sites/144/2025/10/btn_reload_icon.png);
}

/* -----------------------------
@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=choice] {
  --ranking-notice-text-display: block;
  --diplay-01-mb: calc(100 * var(--rpxClamp));
}
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 公開前
----------------------------- */
.pre_open-row {
  padding-top: calc(30 * var(--rpxClamp)) !important;
}
.pre_open-row .cta-button {
  cursor: not-allowed;
}
.pre_open-row p {
  text-align: center;
  font-size: calc(34 * var(--rpxClamp));
  white-space: nowrap;
  line-height: 1.5;
  font-weight: bold;
}
.pre_open-row p strong {
  font-size: 1.5em;
  color: #db0000;
}
.pre_open-row .box {
  background: rgba(255, 255, 255, 0.5) !important;
  padding: calc(30 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) calc(40 * var(--rpxClamp)) calc(20 * var(--rpxClamp)) !important;
  width: calc(612 * var(--rpxClamp));
  margin: calc(32 * var(--rpxClamp)) auto 0 auto;
  font-size: calc(24 * var(--rpxClamp));
}
.pre_open-row .box p {
  text-align: justify;
  white-space: normal;
  font-weight: normal;
  font-size: calc(24 * var(--rpxClamp));
  line-height: 1.75;
}
.pre_open-row .box .label {
  background: #db0000 !important;
  display: inline-block;
  line-height: 1;
  color: #fff;
  width: calc(108 * var(--rpxClamp));
  height: calc(37 * var(--rpxClamp));
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  justify-content: center;
  margin-bottom: calc(17 * var(--rpxClamp));
}
.pre_open-row .box .marker {
  --this-color: #fff000;
  font-weight: bold;
  padding: 0.1em !important;
  background-image: linear-gradient(var(--this-color) 0%, var(--this-color) 100%);
}

/*
@note CLOSING 
*/
#inner-spy[data-state=confirm],
#inner-spy[data-state=complete],
#inner-spy.closing {
  --display-01-before-pos-y: calc(0 * var(--rpxClamp));
  --howto-block-padding-top: calc(66 * var(--rpxClamp));
}

.closing-text {
  display: none;
}

.closing-message {
  display: none;
}

.closing #shussouhyou {
  display: none;
}
.closing .howto-block {
  display: none;
}
.closing div.complete-block {
  display: block;
  padding-top: 0 !important;
}
.closing div.complete-block > p {
  display: none;
}
.closing div.complete-block .choice-result-display {
  display: none;
}
.closing div.complete-block .choice-result-display + p {
  display: none;
}
.closing div.complete-block .complete-message {
  display: none;
}
.closing div.complete-block .closing-message {
  display: block;
}
.closing div.complete-block .closing-message .img {
  margin-top: calc(50 * var(--rpxClamp));
}
.closing div.complete-block .closing-message .img.result {
  display: none;
}
.closing div.complete-block .closing-message a {
  display: block;
  width: calc(290 * var(--rpxClamp));
  margin: 0 auto;
  margin-top: calc(50 * var(--rpxClamp));
}
.closing div.complete-block .closing-message a img {
  width: 100%;
  height: auto;
}
.closing .howto-block.x {
  display: block !important;
}
.closing .howto-block.x > * {
  display: none;
}
.closing .howto-block.x .present-text {
  display: block;
}
.closing #youkou-grp-02 {
  display: block;
}
.closing #present {
  position: relative;
}
.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;
  z-index: 1;
}
.closing #present .closing-text img {
  width: 90%;
  height: auto;
}
.closing .complete-block .img {
  margin-top: calc(90 * var(--rpxClamp));
}
.closing #youkou-grp-01,
.closing #youkou-grp-02 {
  margin-bottom: calc(90 * var(--rpxClamp));
}
.closing #youkou-grp-01 h2.h2-header,
.closing #youkou-grp-02 h2.h2-header {
  padding: 0 !important;
}

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