/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 27 2025 | 10:01:05 */


/* 平行四辺形の枠 */
.text-box {
    position: relative;
    display: inline-block;
    padding: 5px 200px;
    font-size: 40px;
    font-weight: bold;
    border: 3px solid white; /* 枠線 */
    background-color: white; /* 初期背景を白に */
    clip-path: polygon(0% 0%, 90% 00%, 100%  100%, 0% 100%); /* 平行四辺形 */
    overflow: hidden;
    text-align: center;
}




/* 背景アニメーション */
.text-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #FF6EC4; /* 背景色（ピンク） */
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    animation: slide-bg 0.8s ease-in-out forwards;
}

/* 文字スタイル */
.text {
    position: relative;
    z-index: 2;
    color: #FF6EC4; /* 文字色 */
    opacity: 0; /* 初期状態では非表示 */
    animation: fade-in 0.5s ease-in-out forwards;
    animation-delay: 0.7s; /* 背景が動いた後に表示 */
}

/* 背景が左から右へ流れる */
@keyframes slide-bg {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 文字がフェードインする */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}




@media screen and (max-width: 1024px) {
    .text-box {
    padding: 12px 60px;
    font-size: 28px;
    
}
}

@media screen and (max-width: 767px) {
    .text-box {
    padding: 8px 40px;
    font-size: 22px;
    
}
}