/* アニメーションの初期状態（非表示で少し下から） */
.anime_target {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーションをスムーズにするためのtransition */
}
/* アニメーションの実行状態（表示されて元の位置に） */
.anime_target.is-visible {
opacity: 1;
transform: translateY(0);
}
/* 各要素に遅延を適用したい場合 */
.strong_point_list div:nth-child(1).is-visible {
transition-delay: 0.2s;
}
.strong_point_list div:nth-child(2).is-visible {
transition-delay: 0.4s;
}
.strong_point_list div:nth-child(3).is-visible {
transition-delay: 0.6s;
}
.delay01.is-visible {
transition-delay: 0.2s;
}
.delay02.is-visible {
transition-delay: 0.4s;
}
.delay03.is-visible {
transition-delay: 0.6s;
}
/* アニメーションの定義 */
@keyframes floatUpDown {
0% {
transform: translateY(0); /* 開始位置（元の位置） */
}
50% {
transform: translateY(-15px); /* 少し上に移動 */
}
100% {
transform: translateY(0); /* 終了位置（元の位置に戻る） */
}
}
/* アニメーションを適用する要素 */
.strong_deco01 img {
animation: floatUpDown 3s ease-in-out infinite; /* 3秒かけてゆっくり上下に動き、無限に繰り返す */
}
.svg_box{
margin-bottom: -10px;
}
/* 波のアニメーションを定義 */
@keyframes waveFlow {
0% {
background-position: 0% 0%; /* 左から開始 */
}
100% {
background-position: 100% 0%; /* 右へ移動 */
}
}
/* もともとのCSSにアニメーションを追加 */
.shapedividers_com-4950 {
overflow: hidden;
position: relative;
height: 115px;
}
.shapedividers_com-4950::before {
content: '';
font-family: 'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: repeat-x; /* ★ここを repeat-x に変更！ */
background-size: 200% 90px; /* ★ここを200%などにして、SVGが繰り返されるように調整 */
background-position: 50% 0%; /* 初期位置。アニメーションで上書きされます */
/* ここにアニメーションを追加 */
animation: waveFlow 10s linear infinite; /* 10秒かけて線形に無限に流れる */
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width: 360px) {
.shapedividers_com-4950::before {
background-size: 200% 90px; /* ★ここも調整 */
background-position: 50% 0%;
animation: waveFlow 10s linear infinite; /* ★ここも追加 */
}
}
@media (min-width: 1025px) {
.shapedividers_com-4950::before {
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 200% 117px; /* ★ここも調整 */
background-position: 50% 100%;
animation: waveFlow 10s linear infinite; /* ★ここも追加 */
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width: 2100px) {
.shapedividers_com-4950::before {
background-size: 200% calc(2vw + 117px); /* ★ここも調整 */
animation: waveFlow 10s linear infinite; /* ★ここも追加 */
}
}
.shapedividers_com-7958{
overflow:hidden;
position:relative;
height: 115px;
}
.shapedividers_com-7958::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px){
.shapedividers_com-7958::before{
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px){
.shapedividers_com-7958::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 117px;
background-position: 50% 100%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-7958::before{
background-size: 100% calc(2vw + 117px);
}
}
.shapedividers_com-7240{
background:#f5f4ee;
overflow:hidden;
position:relative;
height: 220px;
}
.shapedividers_com-7240::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px){
.shapedividers_com-7240::before{
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px){
.shapedividers_com-7240::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 207px;
background-position: 50% 100%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-7240::before{
background-size: 100% calc(2vw + 207px);
}
}
.shapedividers_com-9113{
overflow:hidden;
position:relative;
height: 220px;
}
.shapedividers_com-9113::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px){
.shapedividers_com-9113::before{
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px){
.shapedividers_com-9113::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 127% 198px;
background-position: 50% 0%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-9113::before{
background-size: 127% calc(2vw + 198px);
}
}
.shapedividers_beige_wh {
background: #fff; /* 背景色を白に変更 */
overflow: hidden;
position: relative;
height: 220px;
}
.shapedividers_beige_wh::before {
content: '';
font-family: 'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
/* 波形を左が高く、右が低くなるように変更し、色も変更 */
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width: 768px) {
.shapedividers_beige_wh::before {
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width: 1025px) {
.shapedividers_beige_wh::before {
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 207px;
background-position: 50% 100%;
transform: rotateY(180deg);
/* 左右反転したSVGの色を変更 */
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width: 2100px) {
.shapedividers_beige_wh::before {
background-size: 100% calc(2vw + 207px);
}
}
.shapedividers_com-5186{
background: #f5f4ee;
overflow:hidden;
position:relative;
height: 200px;
}
.shapedividers_com-5186::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px){
.shapedividers_com-5186::before{
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px){
.shapedividers_com-5186::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 173% 164px;
background-position: 26% 100%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-5186::before{
background-size: 173% calc(2vw + 164px);
}
}
.shapedividers_com-2237{
overflow:hidden;
position:relative;
height: 180px;
}
.shapedividers_com-2237::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px){
.shapedividers_com-2237::before{
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px){
.shapedividers_com-2237::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 141% 164px;
background-position: 50% 0%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-2237::before{
background-size: 141% calc(2vw + 164px);
}
}