.ultla-relative{
    position: relative;
}

.ultla-intro{
  position: relative;
  /* SVGがはみ出さないように十分な高さを確保 */
  min-height: 500px; 
}

.ultla-intro p.intro {
    --intro-look-lh: 64px;
    --intro-look-border-width: 3px;
    --intro-look-i: calc(var(--intro-look-lh) - var(--intro-look-border-width));

    line-height: var(--intro-look-lh);
    background-color: var(--white);
    font-size: var(--font-size-lg);
    color: var(--ultla-pink);
    text-align: center;
}

p.intro span {
    display: inline-block;
}

p.intro span.bg-ultla-pink{
    background-color: var(--ultla-pink-bg);
    margin-bottom: 0.5rem;
    line-height: 2.5rem;
    padding: 0 12px;
}

.ultla-look.ultla-intro p.intro {
    margin: 32px 0 50px;
    padding: 0 20px;
    text-align: center;
    background-image: none;
    line-height: 50px;
    padding: 40px 10px;
}

.ultla-look.ultla-intro p.intro, .ultla-look.ultla-intro p.intro span {
    text-decoration: underline;
    text-decoration-color: var(--ultla-green);
    text-underline-offset: 7px;
}

span.intro-fade {
    transform: translate(0,15px);
    opacity: 0;
    transition: 0.6s;
}

span.intro-fade.active {
    transform: translate(0,0);
    opacity: 1;
}

/* -------------------------------------------------
 * SVG を包むラッパー
 * ------------------------------------------------- */
.svg-wrapper {
  position: absolute;
  top: 50%;                          /* テキストの中央と縦位置を合わせる */
  transform: translateY(-50%);       /* top:50% の基準点を自身の中央にずらす */
  width: 60px;                       /* SVG のサイズに合わせる */
  will-change: transform;            /* スクロール時に transform をよく更新する旨をブラウザに伝える */

  z-index: 10;
}

/* 左側の SVG をテキストの左端にくっつける */
.svg-wrapper.left {
  left: 30px;   /* テキストのpadding + SVGの半分くらいを想定 */
}

/* 右側の SVG をテキストの右端にくっつける */
.svg-wrapper.right {
  right: 30px;  /* テキストのpadding + SVGの半分くらいを想定 */
}

/* テキストがSVGと重ならないように調整 */
.ultla-intro .intro {
  position: relative;
  z-index: 20;
}

/* -------------------------------------------------
 * 回転アニメーション中のスムーズなトランジション
 * ただし transform が上書きされるので、 JavaScript 側で
 * transform を組み合わせて指定します。
 * ------------------------------------------------- */
.svg-wrapper {
  transition: transform 1s ease-out;
}