@charset "utf-8";
/* CSS Document */

.lpBlock {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.lpBlock img {
  display: block;
  width: 100%;
}

.offer a {
  position: absolute;
  width: 88%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 23%;
  animation: dokidoki 1.5s infinite;
}

.offerBlock1 a {
  position: absolute;
  width: 95%;
  margin: 0 auto;
  bottom: 1%;
  right: 0;
  left: 0;
  animation: dokidoki 1.5s infinite;
}

.offer .coupon_btn {
  width: 85% !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 16.5% !important;
  animation: dokidoki 1.5s infinite;
}

.yahoo .coupon_btn {
  width: 90% !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 9% !important;
  animation: dokidoki 1.5s infinite;
}

/*anime0
-------------------------------------*/

.anime0 div:nth-child(1) {
  left: 5%;
  bottom: -10%;
  width: 28%;
  opacity: 0;
  animation: fadein-bottom 1s ease 1.1s forwards;
}

.anime0 div:nth-child(2) {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -10%;
  width: 28%;
  opacity: 0;
  animation: fadein-bottom 1s ease 1.3s forwards;
}

.anime0 div:nth-child(3) {
  right: 5%;
  bottom: -10%;
  width: 28%;
  opacity: 0;
  animation: fadein-bottom 1s ease 1.5s forwards;
}

/*anime1
-------------------------------------*/

.anime1 div:nth-child(1) {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5%;
  width: 55%;
  /*box-shadow:10px 10px 10px rgba(0,0,0,0.4);*/
}

/*anime2
-------------------------------------*/

.anime2 div:nth-child(1) {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 19%;
  width: 65%;
  /*box-shadow:10px 10px 10px rgba(0,0,0,0.4);*/
}

/*anime3
-------------------------------------*/

.anime3 div:nth-child(1) {
  left: 14%;
  bottom: 24%;
  width: 32%;
}

.anime3 div:nth-child(2) {
  right: 13%;
  bottom: 24%;
  width: 32%;
}

.anime3 div:nth-child(3) {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 7%;
  width: 100%;
}

/*ファーストビュー動画部分*/
.fv_movie video {
  position: absolute;
  padding: 0 !important;
  top: 17%;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.fv_movie div.cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/*ベネフィット動画部分*/
.benefit_container video {
  position: absolute;
  padding: 0 !important;
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 82%;
  box-shadow: 2px 2px 6px #666;
  overflow: hidden;
  z-index: 1;
}

.benefit_container div.p-absolute {
  display: block;
  position: absolute;
  top: 26%;
  left: 0%;
  right: 0;
  width: 45%;
  overflow: hidden;
  z-index: 2;
}

/*スライドショー設定
-------------------------------------*/

/*.slider > div:not(:first-child) {
  display: none;
}*/

.slide img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* 画像がイベントを奪わない */
}

.slick-track {
  height: auto !important;
}
.slick-slide {
  height: auto !important;
}

/* ボタン本体（共通） */
button.slider-arrow.slick-prev,
button.slider-arrow.slick-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;

  width: clamp(36px, 9vw, 52px);
  height: clamp(36px, 9vw, 52px);
  border-radius: 999px;

  background-color: rgba(0, 0, 0, 0.22) !important; /* 常時表示 */
  border: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  line-height: 0 !important;

  opacity: 1 !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

/* hover/active/focusでも見た目変えない */
button.slider-arrow.slick-prev:hover,
button.slider-arrow.slick-next:hover,
button.slider-arrow.slick-prev:active,
button.slider-arrow.slick-next:active,
button.slider-arrow.slick-prev:focus,
button.slider-arrow.slick-next:focus,
button.slider-arrow.slick-prev:focus-visible,
button.slider-arrow.slick-next:focus-visible {
  background-color: rgba(0, 0, 0, 0.22) !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

/* slick-theme のデフォ矢印（文字）を捨てて、自前矢印に統一 */
button.slider-arrow.slick-prev:before,
button.slider-arrow.slick-next:before {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;

  width: clamp(10px, 2.8vw, 14px);
  height: clamp(10px, 2.8vw, 14px);
  border-top: 2px solid rgba(255, 255, 255, 0.85);
  border-right: 2px solid rgba(255, 255, 255, 0.85);

  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 左右の向き */
button.slider-arrow.slick-prev:before {
  transform: rotate(-135deg);
}
button.slider-arrow.slick-next:before {
  transform: rotate(45deg);
}

/* はみ出し防止：内側に固定（slick-theme の -25px を潰す） */
button.slider-arrow.slick-prev {
  left: clamp(8px, 2vw, 16px) !important;
  right: auto !important;
}
button.slider-arrow.slick-next {
  right: clamp(8px, 2vw, 16px) !important;
  left: auto !important;
}

/* disabled時も消えない（必要なら消してOK） */
button.slider-arrow.slick-prev.slick-disabled,
button.slider-arrow.slick-next.slick-disabled {
  opacity: 1 !important;
  pointer-events: none; /* 押せないのは維持 */
}

/* 画像がクリック/ドラッグを奪って押しづらい時の保険（必要ならON）
.slick-slide img{
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
*/

/* =========================
   slick dots：小さめ＋強制センター
========================= */

/* dots全体を flex で強制センター */
.slick-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: 100% !important;
  left: 0 !important;
  right: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  bottom: clamp(10px, 3vw, 20px); /* 位置だけ好みで */
}

/* liの余計な幅を潰して、間隔だけにする */
.slick-dots li {
  width: auto !important;
  height: auto !important;
  margin: 0 clamp(3px, 1vw, 8px) !important;
}

/* 押せる範囲は確保（丸は小さくてもタップしやすい） */
.slick-dots li button {
  width: clamp(18px, 4.5vw, 26px) !important;
  height: clamp(18px, 4.5vw, 26px) !important;
  padding: 0 !important;
}

/* 丸そのもの：小さくする（ここがデカすぎ問題の本丸） */
.slick-dots li button:before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: clamp(5px, 1.2vw, 7px) !important; /* ←小さめ */
  height: clamp(5px, 1.2vw, 7px) !important;
  border-radius: 999px !important;

  background: rgba(0, 0, 0, 0.28) !important;
  opacity: 1 !important;
}

/* アクティブだけ濃く */
.slick-dots li.slick-active button:before {
  background: rgba(0, 0, 0, 0.7) !important;
}

.vet_container .vet {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
}

.monitor_container .monitor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
}

.monitor_container video:nth-child(1) {
  position: absolute;
  left: 0;
  bottom: 40%;
  width: 32%;
}

.monitor_container video:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40%;
  margin: 0 auto;
  width: 32%;
}

.monitor_container video:nth-child(3) {
  position: absolute;
  right: 0;
  bottom: 40%;
  width: 32%;
}

.voice_container .voice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1%;
}

.other_container .other {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1%;
}

/* Slider */
.slick-slider {
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;

  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;

  height: auto;

  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*movie
-------------------------------------*/

.movie1 video {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 7%;
  width: 90%;
}

.movie2 video {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 86%;
}

.movie3 video {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 4%;
  width: 86%;
}

.eating video {
  position: relative;
}

.eating video:nth-child(1) {
  position: absolute;
  padding: 3px;
  left: 4%;
  top: 32%;
  width: 43%;
  border: 1px dashed #333;
}

.eating video:nth-child(2) {
  position: absolute;
  padding: 3px;
  right: 4%;
  top: 43%;
  width: 43%;
  border: 1px dashed #333;
}

.eating video:nth-child(3) {
  position: absolute;
  left: 4%;
  padding: 3px;
  top: 53%;
  width: 43%;
  border: 1px dashed #333;
}

.eating div:nth-child(4) {
  right: 7%;
  top: 30%;
  width: 52%;
  transform: rotate(-3deg);
}

.eating div:nth-child(5) {
  left: 6%;
  top: 42%;
  width: 53%;
  transform: rotate(-3deg);
}

.eating div:nth-child(6) {
  right: 6%;
  top: 56%;
  width: 52%;
  transform: rotate(-3deg);
}

video .p-absolute2 {
  position: absolute;
}

/*SNSスライドショー
-------------------------------------*/

.sns_container {
  position: relative;
  pointer-events: none;
}

.sns_container .sns {
  position: absolute;
  left: 0;
  right: 0;
  top: 27%;
}

/*お声スライドショー
-------------------------------------*/

.okoe_container {
  position: relative;
}

.okoe_container .okoe {
  position: absolute;
  left: 0;
  right: 0;
  top: 43%;
  margin: 0 auto;
  width: 85%;
}

/*よくある質問
-------------------------------------*/

.faq {
  padding: 0 5% 1rem;
  margin: 0 auto;
  width: 100%;
  background: #ffc404;
  box-sizing: border-box;
}

.faq input {
  display: none;
}

.faq label {
  position: relative;
  color: #8f5e11;
  display: block;
  padding: 1rem 2.5rem 1rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  background: #fff;
}

.faq label:before {
  content: "Q.";
  font-size: 1.6rem;
  margin: 0 0.5rem 0 0;
}

.faq ul li div {
  height: 0;
  opacity: 0;
  padding: 0 1rem;
  transition: 0.5s;
  visibility: hidden;
  font-size: 1rem;
  line-height: 1.6;
  background: #fff;
  margin: 0 0 1rem;
}

.faq ul li div:before {
  content: "A.";
  font-size: 1.4rem;
  margin: 0 0.5rem 0 0;
}

.faq input:checked + label + div {
  height: auto;
  opacity: 1;
  padding: 0 2rem 2rem;
  visibility: visible;
}

.faq ul li div dl dt {
  margin: 1rem 0 0;
  font-weight: bold;
  color: #8f5e11;
}

.faq ul li div dl dd {
  padding: 1rem;
  border: 1px solid #8f5e11;
}

.faq ul li div table {
  width: 100%;
  margin: 2rem 0;
  font-size: 0.75rem;
  border-collapse: collapse;
}

.faq ul li div table th {
  padding: 1rem;
  border: 1px solid #8f5e11;
  text-align: center;
}

.faq ul li div table td {
  padding: 1rem;
  border: 1px solid #8f5e11;
  text-align: center;
}

.faq i {
  max-width: 32px;
  max-height: 32px;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: #b4b4b5;
  position: absolute;
  right: 20px;
  margin: auto;
  top: 0;
  bottom: 0;
}

.faq i::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  border-bottom: solid #fff 0.375vw;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.4s;
  transform: rotate(0);
  z-index: 5;
}

.faq input:checked + label i::before {
  transform: rotate(360deg);
  transition: all 0.4s;
}

.faq i::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  border-bottom: solid #fff 0.375vw;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: -0.375vw;
  transition: all 0.4s;
  transform: rotate(90deg);
  z-index: 5;
}

.faq input:checked + label i::after {
  transform: rotate(360deg);
  transition: all 0.4s;
  right: 0;
}

/* アップセル
-------------------------------------*/

.upsell {
  margin: 0 0 2rem;
}

.upsell img {
  display: block;
  width: 100%;
  height: auto;
}

.upsell form {
  margin: 0 !important;
  text-align: center;
}

.upsell input {
  margin: 0 auto;
  width: 100%;
}

.upsell input:hover {
  opacity: 0.5;
}

.normal img {
  display: block;
  width: 100%;
  height: auto;
}

.normal a {
  display: block;
  margin: 0 auto;
}

.upsell_sns_container {
  position: relative;
  pointer-events: none;
}

.upsell_sns_container .sns {
  position: absolute;
  left: 0;
  right: 0;
  top: 77%;
}

.ordered_upsell_sns_container {
  position: relative;
  pointer-events: none;
}

.ordered_upsell_sns_container .sns {
  position: absolute;
  left: 0;
  right: 0;
  top: 81.5%;
}

/*アニメ一覧*/

@keyframes dokidoki {
  0% {
    transform: scale(1.05);
  }

  5% {
    transform: scale(1);
  }

  95% {
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.05);
  }
}

/*下からフェードイン*/
@keyframes fadein-bottom {
  0% {
    opacity: 0;
    bottom: -10%;
  }

  100% {
    opacity: 1;
    bottom: 0;
  }
}

/*U-KOMI打ち消しcss*/
#ugc {
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
  box-sizing: border-box;
}

#ugc.upsell_bg {
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
  background: url(https://hugme-shop.jp/lp/images/ai/base/upsell_img_bg.jpg);
  box-sizing: border-box;
}

/*U-KOMIギャラリー用*/
.ugc_area {
  position: absolute;
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
  bottom: 0;
  box-sizing: border-box;
}

.review-container {
  background: #fff;
}

/*U-KOMIレビュー用*/
#ugc_review_area {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#ugc_review_area .reviewWidget {
  background: #fff;
}

/*U-KOMIレビュー用打ち消し*/

#HugmeReviewStyle .loadedReviews {
  overflow: auto;
  max-height: 40vh;
}
#HugmeReviewStyle .reviewWidget_title_container {
  display: none !important;
}
#HugmeReviewStyle .ratingOverview {
  display: none !important;
}
#HugmeReviewStyle .uKomiWidgetSection {
  display: none !important;
}
#HugmeReviewStyle .customQuestionSortingWrap {
  display: none !important;
}
#HugmeReviewStyle .ukomi-fullwidth {
  display: none !important;
}
#HugmeReviewStyle .reviewFilterBtn {
  display: none !important;
}
@media screen and (max-width: 668px) {
  .u-komi-sorting-btn-form-data {
    font-size: 10px !important;
    padding: 5px !important;
  }
}
/*#HugmeReviewStyle .loadedReviews .ReviewWidget_pagination {
  display: none !important;            
}
#HugmeReviewStyle .u-komi-section > .ReviewWidget_pagination {
  display: block !important;            
}*/

/*チャットボット追従ボタン*/

div#float_banner.campaign {
  position: fixed;
  width: 90% !important;
  right: 0 !important;
  left: 0 !important;
  margin: 0 auto !important;
  bottom: 10px !important;
  z-index: 997;
}
@media screen and (min-width: 669px) {
  div#float_banner.campaign {
    width: 600px !important;
  }
}
div#float_banner.campaign img {
  width: 100%;
  height: auto;
}

/*モーダル
-------------------------------------*/

.modal-block {
  position: relative;
}

.btn {
  margin: 0 auto;
  width: 100% !important;
}
.btn a {
  text-decoration: none;
  position: absolute !important;
  width: 100% !important;
  margin: 0 auto !important;
  bottom: 6% !important;
}

.modal .close-btn {
  font-size: 30px;
  position: absolute;
  cursor: pointer;
  top: 9%;
  right: 7%;
  border-radius: 50%;
  font-weight: bold;
  line-height: 0.9;
  padding: 5px;
  z-index: 9999;
}

.modal .close-btn a {
  color: #fff !important;
  text-decoration: none;
}
.modal {
  height: 100vh;
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  max-width: 700px;
  margin: 0 auto;
}
.modal__overlay {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  background: #fff;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: right;
  top: 36%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 50vh;
}
.modal__content img {
  width: 100%;
  height: auto;
}

.modal__content a {
  color: #333333;
  text-align: right;
}
.fixed {
  height: 100%;
  position: fixed;
  width: 100%;
}

.modalScroll,
.ScrollContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modalScroll {
  background: #fff;
  height: 70%;
  width: 90%;
  max-width: 600px;
}
.ScrollContent {
  overflow-y: scroll;
  height: 65vh;
  width: 100%;
}

.modal-img img {
  display: block;
  margin: auto;
}

/* --- カイカイ文字専用：ガタガタ・シェイク --- */
.kaikai-shake {
  position: absolute;
  /* 位置：FVの「対策の」の上に重なるように調整 */
  top: 1%;
  left: 11%;
  width: 70% !important;
  z-index: 20;

  /* 0.5秒周期で激しくループ */
  animation: shake-action 0.5s linear infinite;
  will-change: transform;
}

@keyframes shake-action {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-2px, 2px) rotate(-1deg);
  }
  40% {
    transform: translate(-2px, -2px) rotate(1deg);
  }
  60% {
    transform: translate(2px, 2px) rotate(-1deg);
  }
  80% {
    transform: translate(2px, -2px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* --- 親（circle-bubble）：ホワ〜ッと1回だけ出現 --- */
.circle-bubble {
  position: absolute;
  opacity: 0;
  transform: scale(0.3);
  /* 最初の1回だけ：transitionで出現させる */
  transition:
    transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 1s ease-out;
  pointer-events: none;
}

/* 画面に入った時：親が「表示状態」で固定される（消えません） */
.js-scroll-trigger.is-active .circle-bubble {
  opacity: 1;
  transform: scale(1);
}

/* --- 子（loop-layer）：ずっと「プルプル・ホワホワ」 --- */
.loop-layer {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  /* 最初から不透明にしておき、形だけ動かす準備 */
}

/* 親が表示されたら、中の子だけがループを開始 */
.js-scroll-trigger.is-active .loop-layer {
  /* 透明度(opacity)をいじらないアニメーションを適用 */
  animation: bubble-puru-pure-loop 4s ease-in-out infinite;
  /* 出現が終わるタイミング（delay + 1.2s）に合わせる */
}

/* ★プルプルループ：【重要】opacityを一切記述しない */
@keyframes bubble-puru-pure-loop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  33% {
    /* 上に浮きながら、少し横にプルッ */
    transform: translateY(-8px) scale(1.04, 0.96);
  }
  66% {
    /* 下に沈みながら、少し縦にピョコッ */
    transform: translateY(8px) scale(0.97, 1.03);
  }
}

/* --- 個別設定（位置と出現タイミング） --- */

.bubble1 {
  width: 47%;
  bottom: 22.5%;
  left: 3%;
  z-index: 2;
  transition-delay: 1.5s;
}

.bubble2 {
  width: 47%;
  bottom: 22.5%;
  right: 3%;
  z-index: 1;
  transition-delay: 2s;
}

/* アニメーション開始の微調整 */
.bubble1 .loop-layer {
  animation-delay: 2.7s;
} /* 1.5 + 1.2 */
.bubble2 .loop-layer {
  animation-delay: 3.2s;
} /* 2.0 + 1.2 */

/* 画像自体の基本設定 */
.circle-bubble img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 1. 動きの核（アニメーション） --- */
.rising-arrow {
  position: absolute;
  z-index: 100;
  opacity: 0;
  /* ★ここが重要：変形の基準点を「下」に固定する */
  transform-origin: bottom;
  will-change: clip-path, transform, opacity;
  /* ページを開いた瞬間からループ開始 */
  animation: arrow-stay-loop 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ★アニメーションの中身：80%まで形を維持させる */
@keyframes arrow-stay-loop {
  0% {
    /* スタート：ぺしゃんこ */
    transform: translateY(0) scaleY(0);
    opacity: 0;
  }

  /* 20%から80%にかけて一気に伸びて、その形を「維持」する */
  50% {
    opacity: 1;
  }

  80% {
    /* ここまで「元の形(scaleY(1))」と「定位置」をキープ！ */
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }

  100% {
    /* 最後の20%（80〜100）で、少し上に抜けながら消える */
    transform: translateY(0) scaleY(1);
    opacity: 0;
  }
}

/* --- 個別の位置調整 --- */
.rising-arrow.tp0 {
  width: 40%;
  left: 0;
  right: 0;
  top: 14%;
  margin: 0 auto;
}
.rising-arrow.tp1 {
  width: 35%;
  bottom: 10%;
  right: 10%;
}
.rising-arrow.tp2 {
  width: 35%;
  bottom: 10%;
  right: 10%;
}
.rising-arrow.tp3 {
  width: 35%;
  bottom: 10%;
  right: 10%;
}
.rising-arrow.tp4 {
  width: 35%;
  bottom: 7%;
  right: 10%;
}

/* --- 「腸活の常識は〜」画像の配置 --- */
.common-sense-scan {
  position: absolute;
  top: 0; /* 位置は画像に合わせて調整してください */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  /* ★初期状態：左側をクリップ（隠）しておく */
  /* inset(上 右 下 左) */
  clip-path: inset(0 100% 0 0);

  /* 0.8秒かけて、左から右へ「塗り替える」ように表示 */
  transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ★JSで .is-active がついた瞬間にスキャン開始 */
.js-scroll-trigger.is-active .common-sense-scan {
  /* クリップを解除して全部見せる */
  clip-path: inset(0 0 0 0);
}

/* --- 配置（変更なし） --- */
.shake-kin {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  z-index: 10;
  will-change: transform;
}

/* ★ スピードを 0.5s にアップ。小刻みな「震え」の質感になります */
.js-scroll-trigger.is-active .shake-kin {
  animation: shake-active 0.5s ease-in-out infinite;
}

/* ★ 常に座標を変え続け、上下左右に細かく刻みます */
@keyframes shake-active {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  20% {
    transform: translate(-50.3%, 0.6px); /* 左下 */
  }
  40% {
    transform: translate(-49.8%, -0.4px); /* 右上 */
  }
  60% {
    transform: translate(-50.2%, -0.6px); /* 左上 */
  }
  80% {
    transform: translate(-49.7%, 0.4px); /* 右下 */
  }
}

/* --- 「重要な視点」画像の初期状態 --- */
.important-view-pop {
  position: absolute;
  /* 指示通り下から6%の位置に固定 */
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%) scale(0.6); /* 最初は少し小さめ */
  opacity: 0; /* 最初は隠しておく */
  width: 85%;
  z-index: 100; /* 背面に隠れないよう前面へ */
  will-change: transform, opacity;

  /* アニメーションの設定：2秒（2s）待機 */
  transition:
    transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.27) 1.5s,
    opacity 0.4s ease-out 1.5s;
}

/* ★共通JSで .is-active がついた2秒後に実行 */
.js-scroll-trigger.is-active .important-view-pop {
  transform: translateX(-50%) scale(1); /* 実寸に戻る */
  opacity: 1; /* 表示される */
}

/* --- レーダーチャート：位置完全固定版（修正） --- */
.radar-pulse {
  position: absolute;

  /* 1. 位置の固定：ここは触らなくてOK */
  bottom: 7.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50% !important;

  /* 2. 変形の基準点を「三角形の重心」に手動で合わせる */
  /* 50%（左右中央） 60%（上下：少し下寄り）に基準を置く */
  /* ★縮小した時に「上に逃げる」なら、この 60% を 65%, 70% と大きくしてください */
  transform-origin: 50% 60%;

  z-index: 10;
  opacity: 0;
  will-change: transform, opacity;
  animation: radar-grow-loop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ★アニメーションの中身：位置を動かさずスケールのみ */
@keyframes radar-grow-loop {
  0% {
    transform: scale(0); /* 基準点に向かって縮小 */
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70%,
  85% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.radar-graph {
  position: absolute;
  /* 1. 位置の固定：bottomを使うならこれ！ */
  bottom: 3.8%; /* 網目の位置に合わせて調整 */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 51.1% !important;
  z-index: 11;
}

/* --- 5つのパーツ共通：ピコッと動く --- */
.pop-loop {
  position: absolute;
  z-index: 10;
  transform-origin: center;
  will-change: transform;
  /* 2.5秒周期で無限ループ */
  animation: pop-scale 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes pop-scale {
  0%,
  8%,
  25%,
  100% {
    transform: scale(1); /* 通常サイズ */
  }
  15% {
    transform: scale(1.15); /* 1.15倍に膨らむ */
  }
}
/* --- 位置・サイズ・順番の管理 --- */

/* 1番目：補菌 */
.pp1 {
  top: 26%;
  left: 5%;
  width: 45% !important;
  animation-delay: 0s;
}

/* 2番目：育菌 */
.pp2 {
  top: 26%;
  right: 5%;
  width: 45% !important;
  animation-delay: 0.3s;
}

/* 3番目：土台 */
.pp3 {
  top: 43%;
  left: 5%;
  width: 45% !important;
  animation-delay: 0.6s;
}

/* 4番目：消化 */
.pp4 {
  top: 43%;
  right: 5%;
  width: 45% !important;
  animation-delay: 0.9s;
}

/* 5番目：中央の真の腸活（オレンジ） */
.pp5 {
  top: 35.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 42% !important;
  animation-delay: 1.2s;
}

/* 親要素：ここが背景画像の上に正しく乗っている必要があります */

.sparkle-container {
  position: absolute;
  top: 50%; /* 1位の文字がある高さに調整 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* 広めに設定 */
  height: 150px; /* 高さを確保 */
  z-index: 5 !important; /* 何が何でも一番上に */
  pointer-events: none;
}

/* キラキラ本体 */
.pika {
  position: absolute;
  width: 6px;
  height: 6px;
  /* ★色を白から「濃いめのゴールド」に変更 */
  background: #ffcc00;
  border-radius: 50%;
  /* ★外側の光（シャドウ）を「オレンジ寄り」にして、白背景でも目立たせる */
  box-shadow:
    0 0 10px 2px #ff6600,
    0 0 20px 5px rgba(255, 200, 0, 0.5);
  opacity: 0;
  animation: pika-twinkle 2s infinite ease-in-out;
}

/* 十字の線もゴールドに */
.pika::before,
.pika::after {
  content: "";
  position: absolute;
  background: #ffcc00;
  /* 線にも少し光を乗せる */
  box-shadow: 0 0 4px #ff6600;
}
/* 線の太さを少しアップ */
.pika::before {
  width: 2px;
  height: 24px;
  top: -9px;
  left: 2px;
}
.pika::after {
  width: 24px;
  height: 2px;
  top: 2px;
  left: -9px;
}

/* 散らす位置（1位の文字を囲むように） */
.pika-1 {
  top: 53%;
  left: 12%;
  animation-delay: 0s;
}
.pika-2 {
  top: 76%;
  left: 86%;
  animation-delay: 0.5s;
}
.pika-3 {
  top: 159%;
  left: 40%;
  animation-delay: 1.2s;
}
.pika-4 {
  top: 154%;
  left: 98%;
  animation-delay: 1.7s;
}
.pika-5 {
  top: 170%;
  left: 20%;
  animation-delay: 1.9s;
}
.pika-6 {
  top: 180%;
  left: 90%;
  animation-delay: 2.2s;
}

/* アニメーション */
@keyframes pika-twinkle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  } /* 1.2倍まで大きく */
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.doon-img {
  position: absolute;
  top: 13.4%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85% !important;
  height: auto;
  z-index: 5;

  /* 4秒に1回くらいの間隔でドゥーン！ */
  animation: doon-nonstop 4s ease-in-out infinite;
}

@keyframes doon-nonstop {
  0% {
    /* スタート：50%の大きさで待機 */
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  15% {
    /* ドゥーン！：110%まで勢いよく迫る */
    transform: translate(-50%, -50%) scale(1.1);
  }
  25% {
    /* 着地：100%（定位置）で止まる */
    transform: translate(-50%, -50%) scale(1);
  }
  90% {
    /* ずっと出しっぱなし */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    /* 次のループの瞬間にだけ、50%に戻る */
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
}