/*
  /rakurakucloud/jidootai/asset/css/page/p-demo-customer-response-history.css
  顧客対応履歴デモページ用CSS
*/
@property --stage-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --stage-w {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.p-demo-customer-response-history {
  margin: 0;
  overflow-y: hidden;
}
.p-demo-customer-response-history .l-common-main {
  height: 100svh;
  padding: 105px 0 0 0;
  display: flex;
  flex-direction: column;
  @media screen and (max-width: 1199px) {
    padding: inherit;
  }
}
.p-demo-customer-response-history-main {
  flex: 1 1 auto;
  position: relative;
  container-type: size;
  --stage-base-height: 975px;
  /* 画像比(1280:925)から求めた、等倍表示となる基準幅 */
  --stage-base-width: 1349px;
  --img-w: min(100cqw, calc(100cqh * 1280 / 925));
  --img-h: calc(var(--img-w) * 925 / 1280);
  --img-offset-y: 0px;
  overflow: hidden;
  background: linear-gradient(rgba(50, 50, 50, 0.5), rgba(50, 50, 50, 0.5)), url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-01.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: var(--gray-01);
}
@media screen and (max-height: 800px) {
  .p-demo-customer-response-history-main,
  .p-demo-customer-response-history.is-active .p-demo-customer-response-history-main {
    --img-w: min(100cqw, calc(100cqh * 1280 / 925 * 1.5));
    --img-offset-y: calc((var(--img-h) - 100cqh) / 2);
    background-position: center top;
    background-size: min(100%, calc((100svh - 105px) * 1280 / 925 * 1.5)) auto;
  }
}
.p-demo-customer-response-history-cta {
  position: fixed;
  left: 50px;
  bottom: 43px;
  z-index: var(--z-index-front);
  width: 230px;
  height: 51px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--rjidootai-cta);
  border: 3px solid var(--white);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.02em;
  border-radius: 50px;
  transition: 0.3s;
}
.p-demo-customer-response-history-cta:hover {
  background-color: var(--white);
  border-color: var(--rjidootai-cta);
  color: var(--rjidootai-cta);
}
.l-demo-step-1 {
  --stage-h: 100cqh;
  --stage-w: 100cqw;
  /* 画面高さだけでなく幅でも縮小する。幅が狭いときは背景画像も幅基準で縮むため、px指定の吹き出し・カードを同じ比率で合わせる */
  --stage-scale: min(1, tan(atan2(var(--stage-h), var(--stage-base-height))), tan(atan2(var(--stage-w), var(--stage-base-width))));
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s;
}
.l-demo-step-1.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 10;
}
.l-fv {
  max-width: 654px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.l-fv.is-close {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.l-fv__inner {
  position: relative;
  background: var(--white);
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.4s ease;
}
.m-fv-banzai {
  margin-bottom: 5px;
  text-align: center;
}
.m-fv-banzai__text {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  font-weight: bold;
  font-size: 20px;
}
.m-fv-banzai__text::before,
.m-fv-banzai__text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--black);
  transform-origin: center;
}
.m-fv-banzai__text::before {
  right: -20px;
  transform: translateY(-50%) rotate(-45deg);
}
.m-fv-banzai__text::after {
  left: -20px;
  transform: translateY(-50%) rotate(45deg);
}
.m-fv__heading {
  font-size: 40px;
  color: var(--rjidootai-primary);
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 30px 0;
  text-align: center;
}
.m-fv__figure {
  width: 70%;
  margin: 0 auto 20px;
}
.m-fv__text {
  margin: 30px 0;
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
}
.m-fv__note {
  margin: 30px 0 0 0;
  font-size: 10px;
  line-height: 1.3;
}
.m-fv__btn-button {
  position: relative;
  --btn-scale: max(var(--stage-scale, 1), tan(atan2(695px, var(--stage-base-height))));
  min-width: min(100%, calc(260px / var(--btn-scale)));
  max-width: max-content;
  width: 100%;
  padding: 0 calc(30px / var(--btn-scale));
  height: calc(56px / var(--btn-scale));
  background-color: var(--rjidootai-primary);
  color: var(--white);
  font-size: calc(20px / var(--btn-scale));
  font-weight: bold;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: 0.3s;
  margin: 0 auto 0 auto;
}
.m-fv__step {
  margin: 20px 0 0 0;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}
.p-demo-customer-response-history-unsupported {
  display: none;
}
@media screen and (max-width: 1199px) {
  .p-demo-customer-response-history-cta {
    display: none;
  }
  .p-demo-customer-response-history-unsupported {
    position: absolute;
    inset: 0;
    z-index: var(--z-index-front);
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(50, 50, 50, 0.5), rgba(50, 50, 50, 0.5)), url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-01.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--gray-01);
  }
  .p-demo-customer-response-history-unsupported__panel {
    width: calc(100% - 40px);
    max-width: 500px;
    padding: 50px 20px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .p-demo-customer-response-history-unsupported__title {
    color: var(--black);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.7;
  }
  .p-demo-customer-response-history-unsupported__text {
    margin: 10px 0 0 0;
    color: var(--black);
    font-size: 14px;
    line-height: 1.7;
  }
  .p-demo-customer-response-history-unsupported__btn {
    margin: 30px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p-demo-customer-response-history-unsupported__top,
  .p-demo-customer-response-history-unsupported__contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 224px;
    max-width: 100%;
    height: 44px;
    border: 2px solid transparent;
    border-radius: 22px;
    color: var(--white);
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
  }
  .p-demo-customer-response-history-unsupported__top {
    background-color: var(--rjidootai-primary);
    border-color: var(--rjidootai-primary);
  }
  .p-demo-customer-response-history-unsupported__contact {
    margin: 10px 0 0 0;
    background-color: var(--rjidootai-cta);
    border-color: var(--rjidootai-cta);
  }
  .p-demo-customer-response-history-unsupported__top:hover {
    background-color: var(--white);
    border-color: var(--rjidootai-primary);
    color: var(--rjidootai-primary);
  }
  .p-demo-customer-response-history-unsupported__contact:hover {
    background-color: var(--white);
    border-color: var(--rjidootai-cta);
    color: var(--rjidootai-cta);
  }
}
.p-demo-customer-response-history.is-active .p-demo-customer-response-history-main {
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-01.webp");
  background-color: var(--gray-01);
}
.p-demo-customer-response-history-stage {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100cqw, calc(100cqh * 1280 / 925));
  aspect-ratio: 1280 / 925;
  pointer-events: none;
}
@media screen and (max-height: 800px) {
  .p-demo-customer-response-history-stage {
    top: 0;
    bottom: auto;
    width: min(100cqw, calc(100cqh * 1280 / 925 * 1.5));
  }
}
.p-demo-customer-response-history-spot {
  position: absolute;
  top: 17.94595%;
  left: 16.09375%;
  width: 83.28125%;
  height: 3.56757%;
  border: 7px solid var(--rjidootai-bg-sub-01);
  border-radius: 10px;
  background-color: transparent;
  box-shadow: 0 0 0 100vmax rgba(50, 50, 50, 0.5);
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-spot.is-show {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  animation:
    demoFade 0.4s ease,
    spotBlink 1s ease-in-out infinite;
}
@keyframes demoFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spotBlink {
  0%,
  100% {
    border-color: var(--rjidootai-bg-sub-01);
  }
  50% {
    border-color: transparent;
  }
}
.p-demo-customer-response-history-reveal {
  position: absolute;
  inset: 0;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-01.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inset(9.83784% 74.21875% 87.13514% 18.04688% round 10px);
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-reveal.is-show {
  display: block;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-callout {
  position: absolute;
  top: 23.78378%;
  left: 56%;
  /* 高さが低いときは相対縮小するが、ブラウザ高さ約800px相当（コンテナ高さ695px＝ヘッダー105pxオフセット後）で下限を設け、文字が小さくなり読めなくなるのを防ぐ */
  --callout-scale: max(var(--stage-scale, 1), tan(atan2(695px, var(--stage-base-height))));
  transform: translateX(-50%) scale(var(--callout-scale, 1));
  transform-origin: top center;
  z-index: var(--z-index-front);
  width: 600px;
  max-width: calc(100% - 40px);
  padding: 24px 30px;
  background-color: var(--black);
  border-radius: 10px;
  pointer-events: auto;
  display: none;
}
.p-demo-customer-response-history-callout.is-show {
  display: block;
  width: 541px;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-callout::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 30px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 20px solid var(--black);
}
.p-demo-customer-response-history-callout__text {
  color: var(--white);
  /* 枠の縮小(--callout-scale)を相殺し、視覚上のフォントサイズを常に16pxで固定する */
  font-size: calc(16px / var(--callout-scale, 1));
  line-height: 1.6;
}
.p-demo-customer-response-history-callout__btn {
  margin: 30px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 15px;
}
.p-demo-customer-response-history-callout__step {
  margin: 10px 0 0;
  color: var(--white);
  /* 枠の縮小(--callout-scale)を相殺し、視覚上のフォントサイズを常に12pxで固定する */
  font-size: calc(12px / var(--callout-scale, 1));
  line-height: 1.3;
  text-align: right;
}
.p-demo-customer-response-history-callout__back {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 44px;
  background-color: transparent;
  border: 1px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  font-size: calc(16px / var(--callout-scale, 1));
  font-weight: bold;
  transition: 0.3s;
}
.p-demo-customer-response-history-callout__back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  transform: translateY(-50%) rotate(225deg);
}
.p-demo-customer-response-history-callout__back:hover {
  opacity: 0.8;
}
.p-demo-customer-response-history-balloon {
  position: absolute;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.p-demo-customer-response-history-balloon--01 {
  top: 22.37838%;
  left: 18.20313%;
  width: 10.6%;
}
.p-demo-customer-response-history-balloon--01.is-show {
  animation: demoFade 0.4s ease forwards;
}
.p-demo-customer-response-history-screen2 {
  position: absolute;
  inset: 0;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-02.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.p-demo-customer-response-history.is-screen2 .p-demo-customer-response-history-screen2 {
  opacity: 1;
}
@media screen and (max-height: 800px) {
  .p-demo-customer-response-history-screen2 {
    background-position: center top;
    background-size: min(100%, calc((100svh - 105px) * 1280 / 925 * 1.5)) auto;
  }
}
.p-demo-customer-response-history-dim2 {
  /* 画像上端から150px相当を上端に、右側の素抜きエリアを左へ50px寄せ、右へ40px広げ、下端を200px分縮める */
  position: absolute;
  top: 16.21622%;
  left: 46.09375%;
  right: 0.78125%;
  bottom: 21.62162%;
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(50, 50, 50, 0.5);
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-dim2.is-show {
  display: block;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-callout__text + .p-demo-customer-response-history-callout__text {
  margin: 16px 0 0;
}
.p-demo-customer-response-history-callout--02 {
  top: 20%;
  left: auto;
  right: 58%;
  transform: scale(var(--callout-scale, 1));
  transform-origin: top right;
}
.p-demo-customer-response-history-callout--02::before {
  top: 50%;
  left: auto;
  right: -20px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--black);
  border-right: 0;
}
.p-demo-customer-response-history-callout__next {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 44px;
  background-color: var(--white);
  border-radius: 4px;
  color: var(--rjidootai-primary);
  font-size: calc(16px / var(--callout-scale, 1));
  font-weight: bold;
  transition: 0.3s;
}
.p-demo-customer-response-history-callout__next::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rjidootai-primary);
  border-top: 2px solid var(--rjidootai-primary);
  transform: translateY(-50%) rotate(45deg);
}
.p-demo-customer-response-history-callout__next:hover {
  opacity: 0.8;
}
.p-demo-customer-response-history-frame2 {
  /* 素抜きエリアの上から125px・左から27pxの位置に出す40×31のハイライト枠 */
  position: absolute;
  top: 29.72973%;
  left: 48.20313%;
  width: 3.125%;
  height: 3.35135%;
  border: 4px solid var(--rjidootai-bg-sub-01);
  border-radius: 10px;
  background-color: transparent;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-frame2.is-show {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  animation:
    demoFade 0.4s ease,
    spotBlink 1s ease-in-out infinite;
}
.p-demo-customer-response-history-balloon--02 {
  top: 26.86486%;
  left: 51.79688%;
  width: 18.75%;
}
.p-demo-customer-response-history-balloon--02.is-show {
  animation: demoFade 0.4s ease forwards;
}
.p-demo-customer-response-history-callout--03 {
  top: 20%;
  left: auto;
  right: 58%;
  transform: scale(var(--callout-scale, 1));
  transform-origin: top right;
}
.p-demo-customer-response-history-callout--03::before {
  top: 50%;
  left: auto;
  right: -20px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--black);
  border-right: 0;
}
.p-demo-customer-response-history-screen3 {
  /* 画面内に必ず収まるよう、表示領域（コンテナ）基準で中央に配置する */
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: hidden;
  width: min(85.9375cqw, calc(85.9375cqh * 1280 / 925));
  aspect-ratio: 1600 / 974;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-03.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-screen3.is-show {
  display: block;
  animation: demoFade 0.6s ease forwards;
}
.p-demo-customer-response-history-callout--04 {
  /* 顧客情報ウィンドウの中、下端から50px相当の位置に出す */
  top: auto;
  bottom: 7.46%;
  left: 50%;
  transform-origin: bottom center;
}
.p-demo-customer-response-history-dim3 {
  /* 顧客情報ウィンドウの背面に敷く全面グレーアウト */
  position: absolute;
  inset: 0;
  background-color: rgba(50, 50, 50, 0.5);
  box-shadow: 0 0 0 100vmax rgba(50, 50, 50, 0.5);
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-dim3.is-show {
  display: block;
  animation: demoFade 0.6s ease;
}
@media screen and (max-height: 800px) {
  .p-demo-customer-response-history-screen3 {
    /* 画面が低いときは表示領域いっぱいまで拡大する（ウィンドウ自身の比率で収める） */
    width: min(95cqw, calc(92cqh * 1600 / 974));
  }
}
.p-demo-customer-response-history-dim4 {
  /* 顧客情報ウィンドウの上から220px・左から990pxの位置に、170×480の素抜きを残すグレーアウト */
  position: absolute;
  top: 22.58727%;
  left: 61.875%;
  width: 10.625%;
  height: 49.28131%;
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(50, 50, 50, 0.5);
  pointer-events: none;
  display: none;
  transition:
    top 0.4s ease,
    left 0.4s ease,
    width 0.4s ease,
    height 0.4s ease;
}
.p-demo-customer-response-history-dim4.is-show {
  display: block;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-dim4.is-move {
  /* callout5の「次へ」後：ウィンドウの上から250px・左から20pxの位置へ、1145×100の横長の素抜きに変形する */
  top: 25.66735%;
  left: 1.25%;
  width: 71.5625%;
  height: 10.26694%;
}
.p-demo-customer-response-history-callout--05 {
  top: 31%;
  left: auto;
  right: 40.875%;
  transform: scale(var(--callout-scale, 1));
  transform-origin: top right;
}
.p-demo-customer-response-history-callout--05::before {
  top: 50%;
  left: auto;
  right: -20px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--black);
  border-right: 0;
}
.p-demo-customer-response-history-callout--06 {
  /* 横長に変形した素抜きの下に、中央を合わせて出す */
  top: 40.0411%;
  left: 37.03125%;
}
.p-demo-customer-response-history-callout--06.is-show {
  /* 素抜きが変形してから1秒後に表示する */
  animation: demoFade 0.4s ease 1s both;
}
.p-demo-customer-response-history-screen4 {
  position: absolute;
  inset: 0;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-04.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-screen4.is-show {
  /* 素抜きが変形してから1秒後、吹き出しと同じタイミングで差し替える */
  display: block;
  animation: demoFade 0.4s ease 1s both;
}
.p-demo-customer-response-history-frame3 {
  /* 画像内の上から740px・左から10pxの位置に出す124×70の点滅枠。枠内は背景画像を見せてグレーアウトを抜く */
  position: absolute;
  top: 75.97536%;
  left: 0.625%;
  width: 7.75%;
  height: 7.18686%;
  border: 4px solid var(--rjidootai-bg-sub-01);
  border-radius: 10px;
  background-color: transparent;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-04.webp");
  background-repeat: no-repeat;
  background-origin: border-box;
  background-size: 1290.32258% 1391.42857%;
  background-position: 0.67751% 81.85839%;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-frame3.is-show {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  animation:
    demoFade 0.4s ease,
    spotBlink 1s ease-in-out infinite;
}
.p-demo-customer-response-history-balloon--03 {
  top: 75.25667%;
  left: 8.75%;
  width: 15%;
}
.p-demo-customer-response-history-balloon--03.is-show {
  animation: demoFade 0.4s ease forwards;
}
.p-demo-customer-response-history-callout--07 {
  top: 79.56879%;
  left: 26.25%;
  transform: translateY(-50%) scale(var(--callout-scale, 1));
  transform-origin: left center;
}
.p-demo-customer-response-history-callout--07::before {
  top: 50%;
  left: -20px;
  right: auto;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid var(--black);
  border-left: 0;
}
.p-demo-customer-response-history-screen5 {
  /* bg-04 を表示していた枠と同じ範囲。中身（bg-05）は縦に長いため、この枠内でスクロールする */
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-screen5.is-show {
  display: block;
  pointer-events: auto;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-screen5__inner {
  width: 100%;
  aspect-ratio: 1920 / 2099;
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/figure-customer-response-history-bg-05.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.p-demo-customer-response-history-scroll {
  /* スクロール領域の左右中央・下から100px相当の位置に固定して出すガイド */
  position: absolute;
  left: 50%;
  bottom: 10.26694%;
  width: 15%;
  aspect-ratio: 240 / 132;
  transform: translateX(-50%);
  background-image: url("/rakurakucloud/jidootai/demo/customer-response-history/asset/image/illust-scroll.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  display: none;
}
.p-demo-customer-response-history-scroll.is-show {
  display: block;
  animation: demoFade 0.4s ease;
}
.p-demo-customer-response-history-scroll__arrow {
  /* ガイドの中の左右中央・中央より下に置き、上下にふわふわ動かす */
  position: absolute;
  top: 54.54545%;
  left: 50%;
  width: 13.33333%;
  height: auto;
  animation: scrollArrowFloat 1.6s ease-in-out infinite;
}
@keyframes scrollArrowFloat {
  0%,
  100% {
    transform: translate(-50%, -4px);
  }
  50% {
    transform: translate(-50%, 2px);
  }
}
.p-demo-customer-response-history-callout--08 {
  /* 本文一括表示の画面の中央に重ねて出す */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--callout-scale, 1));
  transform-origin: center center;
}
.p-demo-customer-response-history-callout--08::before {
  top: auto;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 20px solid var(--black);
  border-bottom: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.p-demo-customer-response-history-callout__complete {
  margin: 0 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background-color: var(--white);
  border-radius: 22px;
  color: var(--rjidootai-primary);
  font-size: calc(16px / var(--callout-scale, 1));
  font-weight: bold;
  transition: 0.3s;
}
.p-demo-customer-response-history-callout__complete:hover {
  opacity: 0.8;
}
.l-demo-step-2 {
  --stage-h: 100cqh;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s;
  background-color: rgba(50, 50, 50, 0.5);
}
.l-demo-step-2.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.l-last {
  max-width: 654px;
  width: calc(100% - 40px);
  position: absolute;
  top: 50%;
  left: 50%;
  --l-last-base-height: 720px;
  --l-last-scale: min(1, tan(atan2(var(--stage-h), var(--l-last-base-height))));
  transform: translate(-50%, -50%) scale(var(--l-last-scale, 1));
}
.l-last__inner {
  background: #fff;
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.1);
  height: 100%;
}
.m-last {
  height: 100%;
}
.m-last__heading {
  font-size: 40px;
  color: var(--rjidootai-primary);
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 20px 0;
  text-align: center;
}
.m-last__text {
  text-align: center;
  font-size: 18px;
  line-height: 1.7;
}
.m-last__logo {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 30px auto;
}
.m-last__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-last__download {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 304px;
  max-width: 100%;
  height: 44px;
  background-color: var(--rjidootai-cta);
  border: 2px solid var(--rjidootai-cta);
  border-radius: 22px;
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s;
}
.m-last__download::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  transform: translateY(-50%) rotate(45deg);
}
.m-last__download:hover {
  background-color: var(--white);
  border-color: var(--rjidootai-cta);
  color: var(--rjidootai-cta);
}
.m-last__download:hover::after {
  border-right-color: var(--rjidootai-cta);
  border-top-color: var(--rjidootai-cta);
}
.m-last__back {
  margin: 20px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0 6px;
  background-color: transparent;
  border: 0;
  color: var(--rjidootai-primary);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.m-last__back:hover {
  opacity: 0.8;
}
.m-last__back-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--rjidootai-primary);
}
.m-last__back-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  transform: translate(-60%, -50%) rotate(45deg);
}
.p-demo-customer-response-history-spot,
.p-demo-customer-response-history-frame2,
.p-demo-customer-response-history-frame3 {
  /* ボタン要素として使うためのリセット（見た目は枠のみ） */
  padding: 0;
  font: inherit;
}
.p-demo-customer-response-history-spot:focus-visible,
.p-demo-customer-response-history-frame2:focus-visible,
.p-demo-customer-response-history-frame3:focus-visible {
  outline: 3px solid var(--rjidootai-primary);
  outline-offset: 3px;
}
.p-demo-customer-response-history-screen5:focus-visible {
  outline: 3px solid var(--rjidootai-primary);
  outline-offset: -3px;
}