お知らせの右矢印がタイトルが長くなると形が崩れる

実現したいこと

お知らせの右矢印がタイトルが長くなると形が崩れてしまうため、
崩れず表示したい

前提

ここに質問の内容を詳しく書いてください。
ワードプレスサイトにて、お知らせページを構築中、タイトルが短いと＞がきちんと表示されるが、
長いと崩れる

該当のソースコード

PHP

1<section class="news">2 <div class="news__wrapper">3 <div class="news__check">4 <div class="news__inner">5 <div class="news__flex">6 <div class="section-ttl-btn-flex">7 <h3 class="section__ttl">news<span class="section__ttl-jp">お知らせ</span><!-- /.section__ttl-jp -->8 </h3><!-- /.section__ttl -->9 <button class="section__item02 section__item02-news"><a10 href="<?php echo esc_url(home_url()); ?>/archives/category/news"11 class="section__link02">詳しく見る</a></button>12 </div><!-- /.section-ttl-flex -->13 <div class="news__content">14 <dl class="news__list">15 <?php16 $args = array(17 'post_type' => 'post',18 'category_name' => 'news',19 'posts_per_page' => 3,20 );21 $news_posts = new WP_Query($args);22 23 if ($news_posts->have_posts()) :24 while ($news_posts->have_posts()) : $news_posts->the_post();25 ?>26 <a href="<?php the_permalink(); ?>" class="news__item">27 <div class="news__item-inner">28 <dt class="news__date"><?php the_time('Y.m.d'); ?></dt><!-- /.news__date -->29 <dd class="news__data"><?php the_title(); ?></dd><!-- /.news__txt -->30 </div><!-- /.news__item-inner -->31 <div class="news__arrow"></div><!-- /.news__arrow -->32 </a><!-- /.news__item -->33 <?php endwhile; ?>34 <?php endif; ?>35 </dl>36 </div><!-- /.news__content -->37 </div><!-- /.news__flex -->38 </div><!-- /.news__inner -->39 </div><!-- /.news__check -->40 </div><!-- /.news__wrapper -->41</section><!-- /.news -->

SCSS

1.news {2 padding: 140px 0 0;3 @media screen and (max-width: 768px), print {4 {5 padding: 70px 0 0;6 }7 @media screen and (max-width: 568px), print {8 {9 position: relative;10 }11}12.news__check {13 background-image: linear-gradient(14 0deg,15 transparent calc(100% - 1px),16 #fefdfd calc(100% - 1px)17 ),18 linear-gradient(19 90deg,20 transparent calc(100% - 1px),21 #fefdfd calc(100% - 1px)22 );23 background-size: 16px 16px;24 background-repeat: repeat;25 background-position: center center;26 padding: 100px 0;27 @media screen and (max-width: 568px), print {28 {29 padding: 100px 0 200px;30 }31}32.news__wrapper {33 background: #f9f9f9;34}35.section-ttl-btn-flex {36 display: flex;37 flex-direction: column;38 @media screen and (max-width: 768px), print {39 {40 flex-direction: row;41 justify-content: space-between;42 align-items: baseline;43 }44 @media screen and (max-width: 568px), print {45{46 flex-direction: column;47 }48}49.news__inner {50 max-width: 1084px;51 padding-right: 15px;52 padding-left: 15px;53 margin-right: auto;54 margin-left: auto;55}56.news__content {57 width: 60%;58 @media screen and (max-width: 768px), print {59{60 width: 100%;61 }62}63.news__flex {64 display: flex;65 justify-content: space-between;66 align-items: center;67 @media screen and (max-width: 768px), print {68 {69 flex-direction: column;70 align-items: flex-start;71 }72}73.news__date {74 color: $text-gray;75 font-size: clamp(14px, 3vw, 16px);76 letter-spacing: 0.2em;77 line-height: 1.5;78}79.news__data {80 font-weight: 700;81 font-size: clamp(16px, 3vw, 18px);82 letter-spacing: 0.2em;83 line-height: 1.5;84 margin-top: 0.2em;85 overflow: hidden;86 display: -webkit-box;87 -webkit-box-orient: vertical;88 -webkit-line-clamp: 1;89}90.news__item {91 padding: 2em 3em;92 background: #fff;93 border-radius: 5px;94 margin-top: 2em;95 display: flex;96 align-items: center;97 justify-content: center;98 gap: 10px;99 @media screen and (max-width: 768px), print {100 {101 padding: 2em;102 }103 104 &:first-child {105 margin-top: 0;106 @media screen and (max-width: 768px), print {107 {108 margin-top: 80px;109 }110 @media screen and (max-width: 568px), print {111{112 margin-top: 40px;113 }114 }115 &:hover, 116 &:focus {117 background: #333;118 color: #fff !important;119 transition: all 1s;120 .news__date, 121 .news__arrow {122 color: #fff;123 transition: all 1.4s;124 }125 }126}127.news__arrow {128 display: inline-block;129 vertical-align: middle;130 margin: 20px 0 0 auto;131 width: 20px;132 height: 20px;133 border-top: 2px solid green;134 border-right: 2px solid green;135 transform: translateY(-50%) rotate(45deg);136}

試したこと

チャットGPTに聞いて、.un-news__arrow クラスの矢印がタイトルの長さによって形が崩れる問題を修正するために、CSSの transform プロパティを調整することをお勧めします。具体的には、transform-origin プロパティを追加して、変形の基点を明確に設定します。これにより、矢印の位置がタイトルの長さに影響されにくくなります。.un-news__arrow {
transform-origin: center; // 変形の基点を中心に設定
}
を追加したが、うまくいかなかった。

補足情報（FW/ツールのバージョンなど）

ローカル環境、