@charset "UTF-8";
/*
Theme Name: Emanon Premium child
Theme URI: https://wp-emanon.jp/emanon-premium/
Author: 株式会社イノ・コード
Author URI: https://innocord.co.jp/
Description: Emanon Premiumnの子テーマです。
Template: emanon-premium
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:one-column, two-columns, three-columns, left-sidebar, right-sidebar, theme-options
*/


/* ========================================
   天プロ：体験すごろく MV
   ======================================== */

/* コンテナ */
.tenpro-sugoroku {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* 背景画像 */
.tenpro-sugoroku__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* PC / SP 出し分け */
.tenpro-sugoroku__bg--sp {
  display: none;
}
@media (max-width: 767px) {
  .tenpro-sugoroku__bg--pc { display: none; }
  .tenpro-sugoroku__bg--sp { display: block; }
}

/* ========================================
   吹き出し共通
   ======================================== */

.tenpro-bubble {
	display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20%;          /* PC 基本サイズ */
  aspect-ratio: 1 / 1;
  opacity: 0;          /* 最初は非表示 */
	
	 transition: top 0.25s ease-out;

  /* 共通：上からふわっと落ちてくる */
  animation: tenpro-fall-in 0.6s ease-out forwards;
  animation-delay: calc(var(--order, 0) * 0.25s);
}




/* ========================================
   吹き出しごとの位置と画像
   ======================================== */

/* ▼ PC用配置 */
.tenpro-bubble--01 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_01.png");
  top:20%; left:0%;
}

.tenpro-bubble--02 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_02.png");
  top:15%; left:24%; 
}

.tenpro-bubble--03 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_03.png");
  top:6%; left:48%; width:27%;
}

.tenpro-bubble--04 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_04.png");
  top:16%; left:78%;
}

.tenpro-bubble--05 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_05.png");
  top:36%; left:80%;
}

.tenpro-bubble--06 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_06.png");
  top:36%; left:62%; width:18%;
}

.tenpro-bubble--07 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_07.png");
  top:34%; left:36%; width:26%;
}

.tenpro-bubble--08 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_08.png");
  top:42%; left:12%;
}

.tenpro-bubble--09 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_09.png");
  top:56%; left:-2%;
}

.tenpro-bubble--10 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_10.png");
  top:67%; left:16%;
}

.tenpro-bubble--11 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_11.png");
  top:63%; left:40%; width:16%;
}

.tenpro-bubble--12 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_12.png");
  top:58%; left:56%;
}

.tenpro-bubble--13 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_13-scaled.png");
  top:60%; left:78%; width: 28%;
}

.tenpro-bubble--14 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_14.png");
  top:82%; left:66%;
}

.tenpro-bubble--15 {
  background-image:url("/wp-content/uploads/2025/12/mv_sugoroku_15.png");
  top:78%; left:42%;
}

/* ▼ SP用配置（必要に応じて上書き） */
@media (max-width: 767px) {
	
 .tenpro-bubble {
    width: 40%;
  }
	
.tenpro-bubble--01 {
  top:10%; left:5%; width:34%;
}

.tenpro-bubble--02 {
  top:18%; left:12%; 
}

.tenpro-bubble--03 {
  top: 13%; left: 54%; width: 48%;
}

.tenpro-bubble--04 {
  top:26%; left:60%; width: 34%;
}

.tenpro-bubble--05 {
  top:31%; left:29%; width:32%;
}

.tenpro-bubble--06 {
  top:30%; left:-4%; width:33%;
}

.tenpro-bubble--07 {
  top:41%; left:6%; width:46%;
}

.tenpro-bubble--08 {
  top:39%; left:62%; width:36%;
}

.tenpro-bubble--09 {
  top:49%; left:58%;
}

.tenpro-bubble--10 {
  top:53%; left:18%;
}

.tenpro-bubble--11 {
  top:61%; left:4%; width:30%;
}

.tenpro-bubble--12 {
  top:70%; left:6%;
}

.tenpro-bubble--13 {
  top:63%; left:50%; width: 54%;
}

.tenpro-bubble--14 {
  top:79%; left:58%; width: 34%;
}

.tenpro-bubble--15 {
  top:81%; left:0%; width: 50%;
}
}

/* ========================================
   共通：上から順にふわっと出る（hover対応版）
   ======================================== */
@keyframes tenpro-fall-in {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--hover-offset-y, 0px) - 30px)) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(calc(var(--hover-offset-y, 0px) + 5px)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(var(--hover-offset-y, 0px)) scale(1);
  }
}

/* ① 困ったようにグルグル */
@keyframes tenpro-sad-circle {
  0%, 100% { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
  20%      { transform: translateY(var(--hover-offset-y, 0px)) rotate(4deg); }
  40%      { transform: translateY(var(--hover-offset-y, 0px)) rotate(-4deg); }
  60%      { transform: translateY(var(--hover-offset-y, 0px)) rotate(3deg); }
  80%      { transform: translateY(var(--hover-offset-y, 0px)) rotate(-3deg); }
}

/* ② ショック揺れ（右） */
@keyframes tenpro-shock-right {
  0%   { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
  10%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(-6deg); }
  20%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(6deg); }
  30%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(-4deg); }
  40%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(4deg); }
  50%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
  100% { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
}

/* ⑤ ショック揺れ（左） */
@keyframes tenpro-shock-left {
  0%   { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
  10%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(6deg); }
  20%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(-6deg); }
  30%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(4deg); }
  40%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(-4deg); }
  50%  { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
  100% { transform: translateY(var(--hover-offset-y, 0px)) rotate(0deg); }
}

/* ③ ほわ〜っと浮き出る */
@keyframes tenpro-pop {
  0% {
    opacity: 0.6;
    transform: translateY(calc(var(--hover-offset-y, 0px) + 6px)) scale(0.96);
  }
  40% {
    opacity: 1;
    transform: translateY(var(--hover-offset-y, 0px)) scale(1.03);
  }
  70% {
    opacity: 1;
    transform: translateY(var(--hover-offset-y, 0px)) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(var(--hover-offset-y, 0px)) scale(1);
  }
}

/* ④ バウンド */
@keyframes tenpro-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(var(--hover-offset-y, 0px));
  }
  40% {
    transform: translateY(calc(var(--hover-offset-y, 0px) - 10px));
  }
  60% {
    transform: translateY(calc(var(--hover-offset-y, 0px) - 5px));
  }
}

/* ⑥ 点滅 → 位置は関係ないのでそのままでOK */
@keyframes tenpro-blink {
  0%, 30%, 100% { opacity: 1; }
  45%, 55%      { opacity: 0.1; }
}

/* ========================================
   is-anim-* ：出現後に動きを追加
   ======================================== */

/* ① 困ったようにグルグル */
.tenpro-bubble.is-anim-1 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-sad-circle 2.4s ease-in-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* ② ショック揺れ（右） */
.tenpro-bubble.is-anim-2 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-shock-right 1.5s ease-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* ③ ほわ〜 */
.tenpro-bubble.is-anim-3 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-pop 3s ease-in-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* ④ バウンド */
.tenpro-bubble.is-anim-4 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-bounce 2.2s ease-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* ⑤ ショック揺れ（左） */
.tenpro-bubble.is-anim-5 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-shock-left 1.5s ease-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* ⑥ 点滅 */
.tenpro-bubble.is-anim-6 {
  animation:
    tenpro-fall-in 0.6s ease-out forwards,
    tenpro-blink 1.8s ease-in-out infinite;
  animation-delay:
    calc(var(--order, 0) * 0.25s),
    calc(var(--order, 0) * 0.25s + 0.6s);
}

/* PC ホバー時：それぞれ 6px 下にずらす例 */
.tenpro-bubble--01:hover { top: calc(20% + 6px); }
.tenpro-bubble--02:hover { top: calc(15% + 6px); }
.tenpro-bubble--03:hover { top: calc(6% + 6px); }
.tenpro-bubble--04:hover { top: calc(16% + 6px); }
.tenpro-bubble--05:hover { top: calc(36% + 6px); }
.tenpro-bubble--06:hover { top: calc(36% + 6px); }
.tenpro-bubble--07:hover { top: calc(34% + 6px); }
.tenpro-bubble--08:hover { top: calc(42% + 6px); }
.tenpro-bubble--09:hover { top: calc(56% + 6px); }
.tenpro-bubble--10:hover { top: calc(67% + 6px); }
.tenpro-bubble--11:hover { top: calc(63% + 6px); }
.tenpro-bubble--12:hover { top: calc(58% + 6px); }
.tenpro-bubble--13:hover { top: calc(60% + 6px); }
.tenpro-bubble--14:hover { top: calc(82% + 6px); }
.tenpro-bubble--15:hover { top: calc(78% + 6px); }

/* ========================================
   扉ページ：STEP フロー
   ======================================== */

.tenpro-stepflow {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
}

/* 背景画像 */
.tenpro-stepflow__bg {
  display: block;
  width: 100%;
  height: auto;
}


/* このセクション内の吹き出し共通（サイズだけ少し調整） */
.tenpro-stepflow .tenpro-stepflow__bubble {
  width: 38%;   /* すごろくより少し大きめ */
}

@media (max-width: 767px) {
  .tenpro-stepflow .tenpro-stepflow__bubble {
    width: 48%;
  }
}

/* -------------------------
   STEP 01〜05 位置＆画像
   ※ top / left はデザインを見ながら微調整してOK
   ------------------------- */

/* ▼ PC用 */
.tenpro-stepflow__bubble--01 {
  background-image:url("/wp-content/uploads/2025/12/step_01.png");
  top: 14%;
  left: -5%;
  width: 50% !important;
}

.tenpro-stepflow__bubble--02 {
  background-image:url("/wp-content/uploads/2025/12/step_02.png");
  top:30%;
  left:54%;
}

.tenpro-stepflow__bubble--03 {
  background-image:url("/wp-content/uploads/2025/12/step_03-1.png");
  top:50%;
  left:10%;
  width:42% !important; 
}

.tenpro-stepflow__bubble--04 {
  background-image:url("/wp-content/uploads/2025/12/step_04.png");
  top:70%;
  left:56%;
	width: 40% !important;
}

.tenpro-stepflow__bubble--05 {
  background-image:url("/wp-content/uploads/2025/12/step_05.png");
  top:90%;
  left:30%;
	width: 34% !important;
}

/* ▼ SP用（必要なら位置だけ上書き） */
@media (max-width: 767px) {
.tenpro-stepflow__bubble--01 {
  background-image:url("/wp-content/uploads/2025/12/step_01.png");
  top: 14%;
  left: -5%;
  width: 50% !important;
}

.tenpro-stepflow__bubble--02 {
  background-image:url("/wp-content/uploads/2025/12/step_02.png");
  top:30%;
  left:54%;
}

.tenpro-stepflow__bubble--03 {
  background-image:url("/wp-content/uploads/2025/12/step_03-1.png");
  top:50%;
  left:10%;
  width:42% !important; 
}

.tenpro-stepflow__bubble--04 {
  background-image:url("/wp-content/uploads/2025/12/step_04.png");
  top:70%;
  left:56%;
	width: 40% !important;
}

.tenpro-stepflow__bubble--05 {
  background-image:url("/wp-content/uploads/2025/12/step_05.png");
  top:90%;
  left:30%;
	width: 34% !important;
}
}