/* =========================================================
   tetocoto fun layer — 「つくる」をもっと派手に楽しく
   既存(Elementor)デザインの上に重ねる追加スタイル。
   ========================================================= */

/* ---- スクロールで“ポンッ”と飛び出す出現アニメ ---- */
.fun-on .fun-reveal{
  opacity:0;
  transform:translateY(40px) scale(.9) rotate(-1.2deg);
  transition:opacity .6s cubic-bezier(.18,.9,.28,1.2), transform .7s cubic-bezier(.18,.9,.28,1.3);
  will-change:opacity, transform;
}
.fun-on .fun-reveal.fun-in{ opacity:1; transform:none; }
/* ギャラリー項目は配置がtransform管理なので opacity + ちょいスケールだけ */
.fun-on .fun-fade{ opacity:0; transition:opacity .6s ease; }
.fun-on .fun-fade.fun-in{ opacity:1; }

/* ---- 英字ラベルに極太・手描き波線 + キラッと光るドット ---- */
.fun-on .fun-label{ position:relative; display:inline-block; }
.fun-on .fun-label::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:-.42em; height:13px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='13' viewBox='0 0 48 13'%3E%3Cpath d='M2 8 Q8 1 14 7 T26 7 T38 6 T47 8' fill='none' stroke='%23ff5a3c' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size:48px 13px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s;
  pointer-events:none;
}
.fun-on .fun-label.fun-in::after{ transform:scaleX(1); }
.fun-on .fun-label::before{
  content:""; position:absolute; right:-18px; top:-12px; width:16px; height:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 L9.6 6.4 L16 8 L9.6 9.6 L8 16 L6.4 9.6 L0 8 L6.4 6.4 Z' fill='%23ffc01e'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:0; transform:scale(0) rotate(-40deg);
  transition:opacity .4s ease .5s, transform .5s cubic-bezier(.2,.9,.3,1.6) .5s;
  pointer-events:none;
}
.fun-on .fun-label.fun-in::before{ opacity:1; transform:scale(1) rotate(0deg); animation:funTwinkle 2.4s ease-in-out 1.1s infinite; }
@keyframes funTwinkle{ 0%,100%{opacity:1; transform:scale(1) rotate(0)} 50%{opacity:.45; transform:scale(.7) rotate(20deg)} }

/* ---- 見出し内「つくる/つくり…」を極太マーカーで強調(少し傾けて手書き感) ---- */
.fun-on .fun-mark{
  position:relative; display:inline-block;
  background-image:linear-gradient(transparent 30%, rgba(255,201,30,.95) 30%, rgba(255,201,30,.95) 96%, transparent 96%);
  background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  transition:background-size .8s cubic-bezier(.2,.7,.2,1) .25s;
  padding:0 .12em; border-radius:3px; transform:rotate(-1.8deg);
}
.fun-on .fun-in .fun-mark,
.fun-on .fun-mark.fun-in{ background-size:108% 100%; }
.fun-on .fun-mark:hover{ animation:funWiggle .5s ease; }
@keyframes funWiggle{ 0%,100%{transform:rotate(-1.8deg)} 25%{transform:rotate(2.5deg) scale(1.05)} 75%{transform:rotate(-4deg) scale(1.05)} }

/* ---- 単体写真:ポラロイド風フレーム + 傾き + マスキングテープ ---- */
.fun-on .fun-pol{
  display:inline-block; position:relative; line-height:0; max-width:100%;
  transform:rotate(var(--r,-2deg));
  transition:transform .4s cubic-bezier(.2,.8,.25,1.5);
}
.fun-on .fun-pol:hover{ transform:rotate(0deg) scale(1.05); z-index:5; }
.fun-on img.fun-photo-img{
  border:7px solid #fff; border-radius:3px; max-width:100%; height:auto;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
/* マスキングテープ(対角2枚・カラフル) */
.fun-on .fun-pol::before,
.fun-on .fun-pol::after{
  content:""; position:absolute; width:72px; height:24px; z-index:6; pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
  border-left:1px dashed rgba(0,0,0,.07); border-right:1px dashed rgba(0,0,0,.07);
  filter:hue-rotate(var(--tape,0deg));
}
.fun-on .fun-pol::before{ top:-11px; left:-12px; transform:rotate(-26deg); background:rgba(255,213,128,.62); }
.fun-on .fun-pol::after{ bottom:-11px; right:-12px; transform:rotate(-26deg); background:rgba(120,200,255,.55); }
/* 旧クラス保険 */
.fun-on img.fun-photo{ border:7px solid #fff; border-radius:3px; box-shadow:0 8px 22px rgba(0,0,0,.2); transform:rotate(var(--r,-2deg)); transition:transform .4s ease; }
.fun-on img.fun-photo:hover{ transform:rotate(0) scale(1.05); }
/* 丸写真(運営メンバー等):カラフルリング + バウンス */
.fun-on img.fun-photo-round{ transition:transform .35s cubic-bezier(.2,.8,.25,1.5), box-shadow .35s ease, outline-color .35s ease; outline:0 solid rgba(255,90,60,0); }
.fun-on img.fun-photo-round:hover{
  transform:translateY(-6px) scale(1.07) rotate(3deg);
  box-shadow:0 0 0 6px #fff, 0 0 0 12px #ffc01e, 0 14px 30px rgba(0,0,0,.25);
}
/* その他の画像は軽く持ち上げ */
.fun-on .elementor-widget-image img:not(.fun-photo):not(.fun-photo-round){
  transition:transform .35s ease, box-shadow .35s ease;
}
.fun-on .elementor-widget-image img:not(.fun-photo):not(.fun-photo-round):hover{
  transform:translateY(-5px) scale(1.04); box-shadow:0 14px 30px rgba(0,0,0,.18);
}

/* ---- 写真ギャラリー:大胆ズーム + ほんのり発色(レイアウト非破壊) ---- */
.fun-on .elementor-gallery-item{ box-shadow:0 6px 16px rgba(0,0,0,.10); transition:box-shadow .42s ease; }
.fun-on .elementor-gallery-item:hover{ box-shadow:0 20px 42px rgba(0,0,0,.3); }
.fun-on .elementor-gallery-item__image{ transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.fun-on .elementor-gallery-item:hover .elementor-gallery-item__image{ transform:scale(1.16) rotate(1.2deg); filter:saturate(1.25) contrast(1.05); }

/* ---- ヒーロー回転ワード(モノ/コト/仕組み/機会)を大きく弾ませる ---- */
@media (prefers-reduced-motion: no-preference){
  .fun-on .fun-word-pop{ animation:funPop .6s cubic-bezier(.2,.9,.3,1.7); }
}
@keyframes funPop{
  0%{ transform:translateY(10px) scale(.8) rotate(-6deg); opacity:0; }
  55%{ transform:translateY(-4px) scale(1.12) rotate(3deg); }
  100%{ transform:none; opacity:1; }
}

/* ---- ラベルの波線・星をカラフルに(個別に色相シフト) ---- */
.fun-on .fun-label::after,
.fun-on .fun-label::before{ filter:hue-rotate(var(--hue,0deg)) saturate(1.1); }

/* ---- マーカーが引かれる瞬間にポンッと弾む ---- */
.fun-on .fun-mark.fun-in{ animation:funMarkPop .55s cubic-bezier(.2,.9,.3,1.7) .15s both; }
@keyframes funMarkPop{
  0%{ transform:rotate(-1.8deg) scale(.82); }
  55%{ transform:rotate(3deg) scale(1.12); }
  100%{ transform:rotate(-1.8deg) scale(1); }
}

/* ---- ヒーローの囲みワードがゆ〜らゆら ---- */
@media (prefers-reduced-motion: no-preference){
  .fun-on .fun-wordbox{ animation:funSway 4.5s ease-in-out infinite; transform-origin:50% 60%; }
}
@keyframes funSway{ 0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.4deg)} }

/* ---- ナビをホバーでぴょこっと ---- */
.fun-on .uael-menu-item,
.fun-on .elementor-nav-menu .elementor-item,
.fun-on nav a{ display:inline-block; transition:transform .25s cubic-bezier(.2,.9,.3,1.7), color .25s ease; }
.fun-on .uael-menu-item:hover,
.fun-on .elementor-nav-menu .elementor-item:hover,
.fun-on nav a:hover{ transform:translateY(-4px) scale(1.12) rotate(-4deg); color:#ff5a3c !important; }

/* ---- 余白に散らす手描きラクガキ(浮遊) ---- */
#fun-doodles{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:4; overflow:hidden; }
.fun-doodle{
  position:absolute; width:var(--s,30px); height:var(--s,30px);
  background:center/contain no-repeat; opacity:.92;
  animation:funFloat var(--d,4s) ease-in-out var(--dl,0s) infinite;
}
@keyframes funFloat{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 10deg)); }
}
@media (max-width:900px){ #fun-doodles{ display:none; } }

/* ---- クリックでカラフルに弾ける ---- */
.fun-burst{ position:fixed; left:0; top:0; width:0; height:0; z-index:99999; pointer-events:none; }
.fun-burst-bit{
  position:absolute; width:var(--bs,12px); height:var(--bs,12px);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  will-change:transform, opacity;
  animation:funBurst var(--bd,.85s) cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes funBurst{
  0%{ transform:translate(-50%,-50%) rotate(0) scale(.3); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--brz)) scale(1); opacity:0; }
}

/* ---- カーソルを筆にして、クリックしながら動かすと描ける ---- */
#fun-brush{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:99998; pointer-events:none; }
@media (pointer:fine){
  html.fun-brush-cursor, html.fun-brush-cursor *{
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M28%204%20L12%2020'%20stroke='%23d9a441'%20stroke-width='5'%20stroke-linecap='round'/%3E%3Cpath%20d='M12%2020%20L9%2023'%20stroke='%23b9c0c7'%20stroke-width='6'%20stroke-linecap='round'/%3E%3Cpath%20d='M4%2028%20L7.5%2020.5%20L11.5%2024.5%20Z'%20fill='%23ff4d6d'/%3E%3C/svg%3E")%204%2028, auto !important;
  }
  /* 入力欄は文字カーソルを保つ(書きづらくならないように) */
  html.fun-brush-cursor input, html.fun-brush-cursor textarea{ cursor:text !important; }
}

/* ---- アクセシビリティ:動きを減らす設定では即表示 ---- */
@media (prefers-reduced-motion: reduce){
  .fun-on .fun-reveal,
  .fun-on .fun-fade{ opacity:1 !important; transform:none !important; }
  .fun-on .fun-mark{ background-size:108% 100% !important; transform:rotate(-1.8deg) !important; animation:none !important; }
  .fun-on .fun-label::after{ transform:scaleX(1) !important; }
  .fun-on .fun-label::before{ opacity:1 !important; transform:none !important; animation:none !important; }
  .fun-on img.fun-photo{ transform:rotate(var(--r,-2deg)) !important; }
  .fun-on .fun-wordbox{ animation:none !important; transform:none !important; }
  .fun-on .fun-doodle{ animation:none !important; }
}