/*
================================================================
 ロゴジェネレーター紹介ブロック（タイピング演出つき）
================================================================
■ 使い方
  このブロックを既存ページの好きな場所に貼り付けてください。
  ロゴジェネレーター本体（#etkApp）とは独立して動きます。

■ 画像の差し替え
  Tシャツ画像は2枚使います。
  ・ETKP_IMG_BLANK … イラストだけ（入力前）の画像
  ・ETKP_IMG_NAMED … 園名入りの画像（入力後）
  <script> 内の2つのパスを、実際の画像パスに書き換えてください。

■ タイプする文字を変える
  <script> 内の ETKP_TEXT を書き換えてください。

■ 干渉対策
  ・CSSはすべて #etkPromo 配下のみに適用
  ・クラスは etkp- プレフィックス
  ・JavaScriptは即時関数でグローバル汚染なし
================================================================
*/

#etkPromo{
  --etkp-paper:#FFFEF9;
  --etkp-ink:#2D4059;
  --etkp-sub:#6b7a90;
  --etkp-coral:#FF8A7A;
  --etkp-sun:#FFD25E;
  --etkp-line:#E4DECF;
  --etkp-sky:#DFF1FB;

  font-family:"Hiragino Maru Gothic ProN","HGMaruGothicMPRO","BIZ UDGothic","Yu Gothic","Meiryo",sans-serif;
  color:var(--etkp-ink);
  max-width:1060px;
  margin:32px auto 0;
  line-height:1.7;
}
#etkPromo *,
#etkPromo *::before,
#etkPromo *::after{
  box-sizing:border-box;
  /* margin:0;
  padding:0; */
}

#etkPromo .etkp-card{
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.7) 0 46px, transparent 47px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.55) 0 60px, transparent 61px),
    var(--etkp-sky);
  border:2px solid var(--etkp-line);
  border-radius:22px;
  padding:28px 24px 30px;
  text-align:center;
  box-shadow:0 6px 0 rgba(45,64,89,.06);
}

#etkPromo .etkp-head{
  font-size:1.3rem;
  letter-spacing:.06em;
  margin-bottom:6px;
}
#etkPromo .etkp-head .etkp-dot{color:var(--etkp-coral);}
#etkPromo .etkp-lead{
  font-size:1.4rem;
  color:var(--etkp-sub);
  margin-bottom:22px;
}

/* 入力欄のモック（タイピング表示） */
#etkPromo .etkp-inputbox{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  width:420px;
  background:#fff;
  border:2px solid var(--etkp-sun);
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:22px;
  text-align:left;
  box-shadow:0 4px 12px rgba(45,64,89,.08);
}
#etkPromo .etkp-pen{font-size:1.1rem;flex:none;}
#etkPromo .etkp-typed{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
}
#etkPromo .etkp-typed .etkp-placeholder{
  color:#c2c9d2;font-weight:400;
}
/* 点滅カーソル */
#etkPromo .etkp-caret{
  display:inline-block;
  width:2px;height:1.2em;
  background:var(--etkp-ink);
  margin-left:1px;
  vertical-align:-.18em;
  animation:etkp-blink 1s step-end infinite;
}
@keyframes etkp-blink{50%{opacity:0;}}

/* 矢印 */
#etkPromo .etkp-arrow{
  font-size:2.4rem;
  font-weight: bold;
  color:var(--etkp-coral);
  margin-bottom:14px;
}

/* Tシャツ画像 */
#etkPromo .etkp-stage{
  position:relative;
  display:inline-block;
  max-width:420px;width:100%;
}
#etkPromo .etkp-shirt{
  display:block;width:100%;height:auto;
  border-radius:16px;
}
/* 2枚を重ねてフェードで切り替える */
#etkPromo .etkp-shirt.etkp-named{
  position:absolute;
  top:0;left:0;
  opacity:0;
  transition:opacity .45s ease;
}
#etkPromo .etkp-shirt.etkp-named.etkp-show-img{opacity:1;}
/* タイプ完了時にふわっと光るバッジ */
#etkPromo .etkp-badge{
  position:absolute;
  top:8px;right:8px;
  background:var(--etkp-coral);
  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  padding:6px 12px;border-radius:999px;
  opacity:0;
  transform:scale(.8);
  box-shadow:0 3px 8px rgba(45,64,89,.2);
}
#etkPromo .etkp-badge.etkp-show{
  animation:etkp-pop 2.2s ease both;
}
@keyframes etkp-pop{
  0%{opacity:0;transform:scale(.8);}
  12%{opacity:1;transform:scale(1.05);}
  20%{transform:scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:scale(.95);}
}

#etkPromo .etkp-note{
  margin-top:0px;
  font-size:1.4rem;
  /* font-size:.82rem; */
  color:var(--etkp-sub);
}

@media (max-width:600px){
  #etkPromo .etkp-card{padding:24px 16px 26px;}
  #etkPromo .etkp-head{
    font-size:1.6rem;
  }
  #etkPromo .etkp-inputbox{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  #etkPromo .etkp-caret{animation:none;}
  #etkPromo .etkp-badge.etkp-show{animation:none;opacity:1;}
}