.animate{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 150px;
    box-sizing: border-box;
    /*isolation: isolate;*/
    z-index: 0;
}
.animate a{
    text-decoration: none;
}
.animate a:hover{
    opacity: 1;
}
.animate_item{
    position: absolute;
    inset: 0;
}
.animate_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1枚目：常に一番下、アニメなし（素の背景） */
.animate_item[data-animate-number="1"] img{
    position: relative;
    z-index: 1;
}

/* 2枚目：上に載せる。通常状態では完全に透明（0%マスク） */
.animate_item[data-animate-number="2"] img{
    position: relative;
    z-index: 2;
    mask-image: linear-gradient(315deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
    -webkit-mask-image: linear-gradient(315deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
    mask-size: 200% 200%;
    -webkit-mask-size: 200% 200%;
    animation: none;
}

/* .kv-play が付いたときだけ 1→2 のめくりアニメをかける */
.kv-play .animate_item[data-animate-number="2"] img{
    animation-name: diagonal-slide;
    animation-duration: 1.8s;   /* 1→2 のめくり速度 */
    animation-timing-function: linear;
    animation-delay: 1.5s;      /* 1 のまま見せておく「溜め」の時間 */
    animation-fill-mode: forwards;
}

/* 3枚目：通常は非表示（2→3 アニメ中だけ見える） */
.animate_item[data-animate-number="3"] img{
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: none;
}

/* .kv-play が付いたときだけ 2→3 のグリッドアニメをかける */
.kv-play .animate_item[data-animate-number="3"] img{
    opacity: 0;
    animation-name: wipe-grid;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 6.0s; 
    animation-fill-mode: forwards;
}


/* 3→1 の切り替え用：白フラッシュレイヤー */
.kv-flash{
    position: absolute;
    inset: 0;
    background: #eee;
    opacity: 0;
    pointer-events: none;
    z-index: 5;   /* 画像(1〜3)より上、ボタン(z-index:10)より下 */
    transition: opacity 0.8s ease; /* KV31_FADE(800ms) と合わせる */
}

/* script.js から .kv-fade31 が付いたタイミングでフラッシュを上にかぶせる */
.kv-fade31 .kv-flash{
    opacity: 1;
}



/* 1→2：右下→左上 */
@keyframes diagonal-slide{
0%{mask-image:linear-gradient(315deg,#000 0%,#000 0%,transparent 0%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 0%,transparent 0%,transparent 100%);}
1%{mask-image:linear-gradient(315deg,#000 0%,#000 1%,transparent 1%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 1%,transparent 1%,transparent 100%);}
2%{mask-image:linear-gradient(315deg,#000 0%,#000 2%,transparent 2%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 2%,transparent 2%,transparent 100%);}
3%{mask-image:linear-gradient(315deg,#000 0%,#000 3%,transparent 3%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 3%,transparent 3%,transparent 100%);}
4%{mask-image:linear-gradient(315deg,#000 0%,#000 4%,transparent 4%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 4%,transparent 4%,transparent 100%);}
5%{mask-image:linear-gradient(315deg,#000 0%,#000 5%,transparent 5%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 5%,transparent 5%,transparent 100%);}
6%{mask-image:linear-gradient(315deg,#000 0%,#000 6%,transparent 6%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 6%,transparent 6%,transparent 100%);}
7%{mask-image:linear-gradient(315deg,#000 0%,#000 7%,transparent 7%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 7%,transparent 7%,transparent 100%);}
8%{mask-image:linear-gradient(315deg,#000 0%,#000 8%,transparent 8%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 8%,transparent 8%,transparent 100%);}
9%{mask-image:linear-gradient(315deg,#000 0%,#000 9%,transparent 9%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 9%,transparent 9%,transparent 100%);}
10%{mask-image:linear-gradient(315deg,#000 0%,#000 10%,transparent 10%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 10%,transparent 10%,transparent 100%);}
11%{mask-image:linear-gradient(315deg,#000 0%,#000 11%,transparent 11%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 11%,transparent 11%,transparent 100%);}
12%{mask-image:linear-gradient(315deg,#000 0%,#000 12%,transparent 12%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 12%,transparent 12%,transparent 100%);}
13%{mask-image:linear-gradient(315deg,#000 0%,#000 13%,transparent 13%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 13%,transparent 13%,transparent 100%);}
14%{mask-image:linear-gradient(315deg,#000 0%,#000 14%,transparent 14%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 14%,transparent 14%,transparent 100%);}
15%{mask-image:linear-gradient(315deg,#000 0%,#000 15%,transparent 15%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 15%,transparent 15%,transparent 100%);}
16%{mask-image:linear-gradient(315deg,#000 0%,#000 16%,transparent 16%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 16%,transparent 16%,transparent 100%);}
17%{mask-image:linear-gradient(315deg,#000 0%,#000 17%,transparent 17%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 17%,transparent 17%,transparent 100%);}
18%{mask-image:linear-gradient(315deg,#000 0%,#000 18%,transparent 18%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 18%,transparent 18%,transparent 100%);}
19%{mask-image:linear-gradient(315deg,#000 0%,#000 19%,transparent 19%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 19%,transparent 19%,transparent 100%);}
20%{mask-image:linear-gradient(315deg,#000 0%,#000 20%,transparent 20%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 20%,transparent 20%,transparent 100%);}
21%{mask-image:linear-gradient(315deg,#000 0%,#000 21%,transparent 21%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 21%,transparent 21%,transparent 100%);}
22%{mask-image:linear-gradient(315deg,#000 0%,#000 22%,transparent 22%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 22%,transparent 22%,transparent 100%);}
23%{mask-image:linear-gradient(315deg,#000 0%,#000 23%,transparent 23%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 23%,transparent 23%,transparent 100%);}
24%{mask-image:linear-gradient(315deg,#000 0%,#000 24%,transparent 24%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 24%,transparent 24%,transparent 100%);}
25%{mask-image:linear-gradient(315deg,#000 0%,#000 25%,transparent 25%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 25%,transparent 25%,transparent 100%);}
26%{mask-image:linear-gradient(315deg,#000 0%,#000 26%,transparent 26%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 26%,transparent 26%,transparent 100%);}
27%{mask-image:linear-gradient(315deg,#000 0%,#000 27%,transparent 27%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 27%,transparent 27%,transparent 100%);}
28%{mask-image:linear-gradient(315deg,#000 0%,#000 28%,transparent 28%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 28%,transparent 28%,transparent 100%);}
29%{mask-image:linear-gradient(315deg,#000 0%,#000 29%,transparent 29%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 29%,transparent 29%,transparent 100%);}
30%{mask-image:linear-gradient(315deg,#000 0%,#000 30%,transparent 30%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 30%,transparent 30%,transparent 100%);}
31%{mask-image:linear-gradient(315deg,#000 0%,#000 31%,transparent 31%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 31%,transparent 31%,transparent 100%);}
32%{mask-image:linear-gradient(315deg,#000 0%,#000 32%,transparent 32%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 32%,transparent 32%,transparent 100%);}
33%{mask-image:linear-gradient(315deg,#000 0%,#000 33%,transparent 33%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 33%,transparent 33%,transparent 100%);}
34%{mask-image:linear-gradient(315deg,#000 0%,#000 34%,transparent 34%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 34%,transparent 34%,transparent 100%);}
35%{mask-image:linear-gradient(315deg,#000 0%,#000 35%,transparent 35%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 35%,transparent 35%,transparent 100%);}
36%{mask-image:linear-gradient(315deg,#000 0%,#000 36%,transparent 36%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 36%,transparent 36%,transparent 100%);}
37%{mask-image:linear-gradient(315deg,#000 0%,#000 37%,transparent 37%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 37%,transparent 37%,transparent 100%);}
38%{mask-image:linear-gradient(315deg,#000 0%,#000 38%,transparent 38%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 38%,transparent 38%,transparent 100%);}
39%{mask-image:linear-gradient(315deg,#000 0%,#000 39%,transparent 39%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 39%,transparent 39%,transparent 100%);}
40%{mask-image:linear-gradient(315deg,#000 0%,#000 40%,transparent 40%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 40%,transparent 40%,transparent 100%);}
41%{mask-image:linear-gradient(315deg,#000 0%,#000 41%,transparent 41%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 41%,transparent 41%,transparent 100%);}
42%{mask-image:linear-gradient(315deg,#000 0%,#000 42%,transparent 42%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 42%,transparent 42%,transparent 100%);}
43%{mask-image:linear-gradient(315deg,#000 0%,#000 43%,transparent 43%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 43%,transparent 43%,transparent 100%);}
44%{mask-image:linear-gradient(315deg,#000 0%,#000 44%,transparent 44%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 44%,transparent 44%,transparent 100%);}
45%{mask-image:linear-gradient(315deg,#000 0%,#000 45%,transparent 45%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 45%,transparent 45%,transparent 100%);}
46%{mask-image:linear-gradient(315deg,#000 0%,#000 46%,transparent 46%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 46%,transparent 46%,transparent 100%);}
47%{mask-image:linear-gradient(315deg,#000 0%,#000 47%,transparent 47%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 47%,transparent 47%,transparent 100%);}
48%{mask-image:linear-gradient(315deg,#000 0%,#000 48%,transparent 48%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 48%,transparent 48%,transparent 100%);}
49%{mask-image:linear-gradient(315deg,#000 0%,#000 49%,transparent 49%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 49%,transparent 49%,transparent 100%);}
50%{mask-image:linear-gradient(315deg,#000 0%,#000 50%,transparent 50%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 50%,transparent 50%,transparent 100%);}
51%{mask-image:linear-gradient(315deg,#000 0%,#000 51%,transparent 51%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 51%,transparent 51%,transparent 100%);}
52%{mask-image:linear-gradient(315deg,#000 0%,#000 52%,transparent 52%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 52%,transparent 52%,transparent 100%);}
53%{mask-image:linear-gradient(315deg,#000 0%,#000 53%,transparent 53%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 53%,transparent 53%,transparent 100%);}
54%{mask-image:linear-gradient(315deg,#000 0%,#000 54%,transparent 54%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 54%,transparent 54%,transparent 100%);}
55%{mask-image:linear-gradient(315deg,#000 0%,#000 55%,transparent 55%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 55%,transparent 55%,transparent 100%);}
56%{mask-image:linear-gradient(315deg,#000 0%,#000 56%,transparent 56%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 56%,transparent 56%,transparent 100%);}
57%{mask-image:linear-gradient(315deg,#000 0%,#000 57%,transparent 57%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 57%,transparent 57%,transparent 100%);}
58%{mask-image:linear-gradient(315deg,#000 0%,#000 58%,transparent 58%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 58%,transparent 58%,transparent 100%);}
59%{mask-image:linear-gradient(315deg,#000 0%,#000 59%,transparent 59%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 59%,transparent 59%,transparent 100%);}
60%{mask-image:linear-gradient(315deg,#000 0%,#000 60%,transparent 60%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 60%,transparent 60%,transparent 100%);}
61%{mask-image:linear-gradient(315deg,#000 0%,#000 61%,transparent 61%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 61%,transparent 61%,transparent 100%);}
62%{mask-image:linear-gradient(315deg,#000 0%,#000 62%,transparent 62%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 62%,transparent 62%,transparent 100%);}
63%{mask-image:linear-gradient(315deg,#000 0%,#000 63%,transparent 63%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 63%,transparent 63%,transparent 100%);}
64%{mask-image:linear-gradient(315deg,#000 0%,#000 64%,transparent 64%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 64%,transparent 64%,transparent 100%);}
65%{mask-image:linear-gradient(315deg,#000 0%,#000 65%,transparent 65%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 65%,transparent 65%,transparent 100%);}
66%{mask-image:linear-gradient(315deg,#000 0%,#000 66%,transparent 66%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 66%,transparent 66%,transparent 100%);}
67%{mask-image:linear-gradient(315deg,#000 0%,#000 67%,transparent 67%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 67%,transparent 67%,transparent 100%);}
68%{mask-image:linear-gradient(315deg,#000 0%,#000 68%,transparent 68%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 68%,transparent 68%,transparent 100%);}
69%{mask-image:linear-gradient(315deg,#000 0%,#000 69%,transparent 69%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 69%,transparent 69%,transparent 100%);}
70%{mask-image:linear-gradient(315deg,#000 0%,#000 70%,transparent 70%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 70%,transparent 70%,transparent 100%);}
71%{mask-image:linear-gradient(315deg,#000 0%,#000 71%,transparent 71%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 71%,transparent 71%,transparent 100%);}
72%{mask-image:linear-gradient(315deg,#000 0%,#000 72%,transparent 72%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 72%,transparent 72%,transparent 100%);}
73%{mask-image:linear-gradient(315deg,#000 0%,#000 73%,transparent 73%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 73%,transparent 73%,transparent 100%);}
74%{mask-image:linear-gradient(315deg,#000 0%,#000 74%,transparent 74%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 74%,transparent 74%,transparent 100%);}
75%{mask-image:linear-gradient(315deg,#000 0%,#000 75%,transparent 75%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 75%,transparent 75%,transparent 100%);}
76%{mask-image:linear-gradient(315deg,#000 0%,#000 76%,transparent 76%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 76%,transparent 76%,transparent 100%);}
77%{mask-image:linear-gradient(315deg,#000 0%,#000 77%,transparent 77%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 77%,transparent 77%,transparent 100%);}
78%{mask-image:linear-gradient(315deg,#000 0%,#000 78%,transparent 78%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 78%,transparent 78%,transparent 100%);}
79%{mask-image:linear-gradient(315deg,#000 0%,#000 79%,transparent 79%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 79%,transparent 79%,transparent 100%);}
80%{mask-image:linear-gradient(315deg,#000 0%,#000 80%,transparent 80%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 80%,transparent 80%,transparent 100%);}
81%{mask-image:linear-gradient(315deg,#000 0%,#000 81%,transparent 81%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 81%,transparent 81%,transparent 100%);}
82%{mask-image:linear-gradient(315deg,#000 0%,#000 82%,transparent 82%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 82%,transparent 82%,transparent 100%);}
83%{mask-image:linear-gradient(315deg,#000 0%,#000 83%,transparent 83%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 83%,transparent 83%,transparent 100%);}
84%{mask-image:linear-gradient(315deg,#000 0%,#000 84%,transparent 84%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 84%,transparent 84%,transparent 100%);}
85%{mask-image:linear-gradient(315deg,#000 0%,#000 85%,transparent 85%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 85%,transparent 85%,transparent 100%);}
86%{mask-image:linear-gradient(315deg,#000 0%,#000 86%,transparent 86%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 86%,transparent 86%,transparent 100%);}
87%{mask-image:linear-gradient(315deg,#000 0%,#000 87%,transparent 87%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 87%,transparent 87%,transparent 100%);}
88%{mask-image:linear-gradient(315deg,#000 0%,#000 88%,transparent 88%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 88%,transparent 88%,transparent 100%);}
89%{mask-image:linear-gradient(315deg,#000 0%,#000 89%,transparent 89%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 89%,transparent 89%,transparent 100%);}
90%{mask-image:linear-gradient(315deg,#000 0%,#000 90%,transparent 90%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 90%,transparent 90%,transparent 100%);}
91%{mask-image:linear-gradient(315deg,#000 0%,#000 91%,transparent 91%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 91%,transparent 91%,transparent 100%);}
92%{mask-image:linear-gradient(315deg,#000 0%,#000 92%,transparent 92%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 92%,transparent 92%,transparent 100%);}
93%{mask-image:linear-gradient(315deg,#000 0%,#000 93%,transparent 93%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 93%,transparent 93%,transparent 100%);}
94%{mask-image:linear-gradient(315deg,#000 0%,#000 94%,transparent 94%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 94%,transparent 94%,transparent 100%);}
95%{mask-image:linear-gradient(315deg,#000 0%,#000 95%,transparent 95%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 95%,transparent 95%,transparent 100%);}
96%{mask-image:linear-gradient(315deg,#000 0%,#000 96%,transparent 96%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 96%,transparent 96%,transparent 100%);}
97%{mask-image:linear-gradient(315deg,#000 0%,#000 97%,transparent 97%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 97%,transparent 97%,transparent 100%);}
98%{mask-image:linear-gradient(315deg,#000 0%,#000 98%,transparent 98%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 98%,transparent 98%,transparent 100%);}
99%{mask-image:linear-gradient(315deg,#000 0%,#000 99%,transparent 99%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 99%,transparent 99%,transparent 100%);}
100%{mask-image:linear-gradient(315deg,#000 0%,#000 100%,transparent 100%,transparent 100%);-webkit-mask-image:linear-gradient(315deg,#000 0%,#000 100%,transparent 100%,transparent 100%);}
}
/* 2→3：斜めグリッド（このアニメ中だけ3枚目にグリッドが掛かる） */
@keyframes wipe-grid{
0%{opacity:0;mask-image:repeating-linear-gradient(45deg,transparent,transparent 20px,black 20px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 20px,black 20px,black 20px);}
5%{opacity:0.05;mask-image:repeating-linear-gradient(45deg,transparent,transparent 19px,black 19px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 19px,black 19px,black 20px);}
10%{opacity:0.1;mask-image:repeating-linear-gradient(45deg,transparent,transparent 18px,black 18px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 18px,black 18px,black 20px);}
15%{opacity:0.15;mask-image:repeating-linear-gradient(45deg,transparent,transparent 17px,black 17px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 17px,black 17px,black 20px);}
20%{opacity:0.2;mask-image:repeating-linear-gradient(45deg,transparent,transparent 16px,black 16px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 16px,black 16px,black 20px);}
25%{opacity:0.25;mask-image:repeating-linear-gradient(45deg,transparent,transparent 15px,black 15px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 15px,black 15px,black 20px);}
30%{opacity:0.3;mask-image:repeating-linear-gradient(45deg,transparent,transparent 14px,black 14px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 14px,black 14px,black 20px);}
35%{opacity:0.35;mask-image:repeating-linear-gradient(45deg,transparent,transparent 13px,black 13px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 13px,black 13px,black 20px);}
40%{opacity:0.4;mask-image:repeating-linear-gradient(45deg,transparent,transparent 12px,black 12px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 12px,black 12px,black 20px);}
45%{opacity:0.45;mask-image:repeating-linear-gradient(45deg,transparent,transparent 11px,black 11px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 11px,black 11px,black 20px);}
50%{opacity:0.5;mask-image:repeating-linear-gradient(45deg,transparent,transparent 10px,black 10px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 10px,black 10px,black 20px);}
55%{opacity:0.6;mask-image:repeating-linear-gradient(45deg,transparent,transparent 9px,black 9px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 9px,black 9px,black 20px);}
60%{opacity:0.7;mask-image:repeating-linear-gradient(45deg,transparent,transparent 8px,black 8px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 8px,black 8px,black 20px);}
65%{opacity:0.8;mask-image:repeating-linear-gradient(45deg,transparent,transparent 7px,black 7px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 7px,black 7px,black 20px);}
70%{opacity:0.86;mask-image:repeating-linear-gradient(45deg,transparent,transparent 6px,black 6px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 6px,black 6px,black 20px);}
75%{opacity:0.92;mask-image:repeating-linear-gradient(45deg,transparent,transparent 5px,black 5px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 5px,black 5px,black 20px);}
80%{opacity:0.96;mask-image:repeating-linear-gradient(45deg,transparent,transparent 4px,black 4px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 4px,black 4px,black 20px);}
85%{opacity:0.98;mask-image:repeating-linear-gradient(45deg,transparent,transparent 3px,black 3px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 3px,black 3px,black 20px);}
90%{opacity:0.99;mask-image:repeating-linear-gradient(45deg,transparent,transparent 2px,black 2px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 2px,black 2px,black 20px);}
95%{opacity:0.995;mask-image:repeating-linear-gradient(45deg,transparent,transparent 1px,black 1px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 1px,black 1px,black 20px);}
100%{opacity:1;mask-image:repeating-linear-gradient(45deg,transparent,transparent 0px,black 0px,black 20px);-webkit-mask-image:repeating-linear-gradient(45deg,transparent,transparent 0px,black 0px,black 20px);}
}


.kv-text-parent{
    position: absolute;
    left: 5%;
    top: 30%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.kv-text{
    position: relative;
    z-index: 10;
    width: 100%;
    mix-blend-mode: overlay;
}
.kv-text2{
    position: relative;
    z-index: 10;
    margin-top: 30px;
    width: 500px;
    max-width: 90%;
}

.line-top{
    transform: skew(0deg,5deg);
    position: absolute;
    width: 650px;
    z-index: -1;
    top: 50px;
    right: -200px;
}
.line-bottom{
    transform: skew(0deg,5deg);
    position: absolute;
    width: 650px;
    z-index: -1;
    bottom: 50px;
    left: -200px;
}

.diagonal{
    background-size: cover;
    background-position: center;
    padding: 100px 0 90px;
    box-sizing: border-box;
    overflow-x: hidden;
    transform: skew(0deg,-5deg);
}
.diagonal .contents{
    transform: skew(0deg,5deg);
}
#news{
    background-image: url(/common/img/bk_p1.jpg);
}
#news .flex_left{
    width: 25%;
}
#news .flex_right{
    width: 73%;
}
#news .news-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
#news .news-list li{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #fff;
    margin-bottom: 15px;
    position: relative;
    transition: 0.4s;
}
#news .news-list li a{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}
#news .news-list li:hover{
    opacity: 0.7;
}
#news .news-date{
    flex: 0 0 120px;
    white-space: nowrap;
    text-align: center;
    background-color: #fae300;
    color: #611a86;
    padding: 3px;
}
#news .news-text{
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

#extracurricular h2{
    margin: 0;
    font-size: 3em;
    line-height: 1em;
    color: #5a1a88;
}
#extracurricular h2 span{
    color: #fae300;
}
#extracurricular h3{
    margin: 30px 0;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4em;
    color: #5a1a88;
}
#extracurricular h4{
    margin: 5px 0 0;
    font-size: 1.1em;
    font-weight: bold;
    color: #5a1a88;
}
#extracurricular .ext_area{
    display: flex;
    position: relative;
    margin-top: 100px;
}
#extracurricular .ext_left{
    flex: 1;
    background-image: url("/home/img/ph_lessons1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
#extracurricular .ext_center{
    margin-top: -100px;
    flex: 0 0 600px;
    background-image: url("/common/img/logo_w.svg");
    background-size: 500px auto;
    background-position: center center;
    background-repeat: no-repeat;
    transform: skew(0deg,5deg);
    text-align: center;
}
#extracurricular .ext_right{
    flex: 1;
    background-image: url("/home/img/ph_lessons2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
#extracurricular .ext_area2{
    display: flex;
    position: relative;
    margin-top: 0px;
}
#extracurricular .ext_center2{
    margin-top: 0;
    padding: 70px 0 40px;
}   
#extracurricular .ext_left2{
    background-image: url("/home/img/ph_co_sns1.jpg");
}
#extracurricular .ext_right2{
    background-image: url("/home/img/ph_co_sns2.jpg");
}
#extracurricular .ext_price{
    margin: 30px 0 40px;
    font-weight: 500;
    font-size: 1.1em;
    color: #5a1a88;
}
#extracurricular .btn{
    background-color: #5a1a88;
}
#extracurricular .btn a{
    color: #fff;
}
#extracurricular .btn a:after{
    content: url(/common/img/arrow_w.svg);
}
#features_title{
    background-image: url(/features/img/kv2_pc.jpg);
    height: 350px;
    align-content: center;
    margin-top: -100px;
    z-index: 1;
}

#longing{
    background-color: #fff;
    padding-top: 150px;
}
#longing_inner{
    position: relative;
}
#longing_inner p{
    position: absolute;
    width: 88%;
    bottom: 0%;
    right: 0;
    margin: 0;
    text-align: left;
}
#longing_inner p .emp{
    font-size: 1.5em;
    color: #5a1a88;
    margin-top: 20px;
    display: block;
    line-height: 1.3em;
    font-weight: 600;
}

#features {
    background-image: url(/common/img/bk_p3.jpg);
}
#features h2,
#features h3 {
    color: #fae300;
}
#features h2 span {
    font-weight: 100;
}
#features .flex {
    margin-top: 60px;
    display: flex;
    overflow: visible;
}
#features .flex_left {
    width: 20%;
    z-index: 2;
    position: relative;
    padding-top: 50px;
}
#features .flex_right {
    flex: 1;
    margin-right: calc((100vw - 1090px) / -2);
    overflow: hidden;
    position: relative;
    z-index: 1;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#features .feature-list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}
#features .feature-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #ffffff;
}
#features .feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #fae300;
    transform: translateY(-50%);
}

#instructor{
    position: relative;
}
#instructor,
#instructor h2{
    color: #611a86;
}
#instructor h3{
    color: #000;
}
#instructor .flex_left{
    width: 20%;
    margin-top: 50px;
}
#instructor .flex_right{
    width: 75%;
}
#instructor .btn{
    margin-top: 40px;
    background-color: #611a86;
}
#instructor .btn a{
    color: #fff;
}
#instructor .btn a:after{
    content: url(/common/img/arrow_w.svg);
}
#instructor .photo-wrap{
    flex: 1;
    display: flex;
    justify-content: space-between;
}
#instructor .ph{
    width: 20%;
    transform-origin: center;
}
#instructor .ph img{
    width: 100%;
    display: block;
}
#instructor .ph1{ margin-top: 10px; }
#instructor .ph2{ margin-top: 70px; }
#instructor .ph3{ margin-top: -20px; }
#instructor .ph4{ margin-top: 15px; }
#instructor .ph5{ margin-top: -70px; }
#instructor .ph1 img{
    margin-left: 20px;
}
#instructor .ph2 img,
#instructor .ph3 img{ 
    margin-left: 10px;
}
#instructor .contents{
    position: relative;
    padding: 30px 0 0;
}
#instructor .line-bottom{
    transform: skew(0deg,0deg);
    width: 750px;
    bottom: -40px;
    left: 0;
}

#graduates{
    background-image: url(/common/img/bk_p4.jpg);
    color: #fae300;
}
#graduates h2,
#graduates h3{
    color: #fae300;
}
#mediaevent p,
#graduates p{
    margin-bottom: 30px;
}

#sns{
    position: relative;
    padding: 120px 0;
}
#sns #sns-title-wrap {
    position: relative;
    text-align: center;
    transform: skew(0deg,5deg);
}
#sns #sns_title {
    width: 120px;
}
#sns #sns_line{
    position: absolute;
    width: calc( 50% - 100px );
    right: 0;
    top: -20px;
}
#sns_inner {
    position: relative;
    width: 100%;
    padding: 250px 0 600px;
}
#sns_inner .roll-layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    display: flex;
    gap: 0;
    width: max-content;
    opacity: 0.9;
}
#sns_inner .roll-top {
    top: 100px;
}
#sns_inner .roll-bottom {
    top: 350px;
}
#sns_inner .roll-layer .instagram_box {
    height: 250px;
    width: 250px;
    display: block;
    position: relative;
}
#sns_inner #tiktok-inner{
    transform: skew(0deg,5deg);
    position: absolute;
    left: 10%;
    top: -50px;
    z-index: 3;
}
#sns_inner .roll-logo {
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    width: 100%;
    height: 200px;
    background: url("/common/img/logo_w.svg") center center no-repeat;
    background-size: 500px auto;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sns_inner .sns-icons {
    position: absolute;
    top: 650px;
    left: 50%;
    transform: translateX(-50%) rotate(3deg);
    display: flex;
    gap: 50px;
}
#sns_inner .sns-icons img {
    height: 50px;
    width: auto;
    transform: skew(0deg, 5deg);
}
#sns_inner .sns-icons .sns_insta{
    margin-top: 5.5px;
}
#sns_inner .sns-icons .sns_tiktok{
    margin-top: -5.5px;
}

.instagram_video{
    position: relative;
    overflow: hidden;
}
.instagram_video::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.instagram_video video{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
}
.instagram_thumnail {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.instagram-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100%;
    transition: transform .3s ease;
    width: 100%;
}
.instagram_thumnail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2;
}



#mediaevent{
    background-image: url(/common/img/bk_p2.jpg);
    margin: -30px 0 50px;
}
#mediaevent h2,
#mediaevent h3,
#mediaevent p{
    color: #fae300;
}
#mediaevent h2 span{
    font-weight: 100;
}

#contentslist{
    padding-bottom: 60px;
}
#contentslist .flex_third{
    width: 31%;
}
#contentslist .flex_third a{
    text-decoration: none;
}
#contentslist .flex_third img{
    margin-bottom: 10px;
}
#contentslist h4 span{
    color: #fae300;
}
#contentslist h4 span.lighter,
#contentslist h4,
#contentslist h5{
    margin: 0;
    color: #611a86;
}
#contentslist h4 span.lighter{
    font-weight: 100;
}
#contentslist h4{
    font-size: 1.5em;
}

.anime,
.anime2,
.anime3{
    opacity: 0;
}
.animated {
    opacity: 1;
    position: relative;
    overflow: hidden;
    animation: reveal 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
.animated::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #611a86;
    transform: translateX(-101%);
    z-index: 1;
    animation: wipe 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
.animated2 {
    opacity: 1;
    position: relative;
    overflow: hidden;
    animation: revealDiag 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
.animated2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #611a86;
    transform: translateX(-101%);
    z-index: 1;
    animation: wipe 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
.animated3 {
    opacity: 1;
    position: relative;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    animation: revealDiag2 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
.animated3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #611a86;
    transform: translateX(-101%);
    z-index: 1;
    animation: wipe 1.2s cubic-bezier(.8, 0, .2, 1) forwards;
}
@keyframes wipe {
    0%   { transform: translateX(-101%); }
    45%  { transform: translateX(0); }
    100% { transform: translateX(101%); }
}
@keyframes reveal {
    0%   { clip-path: inset(0 100% 0 0); }
    45%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealDiag {
}
@keyframes revealDiag2 {
}

@media(max-width: 1100px){
    #features .flex_right{
        margin-right: 0;
    }
}
@media(max-width: 990px){
    .kv-text-parent{
        top: 25%;
    }
    .diagonal{
        padding: 80px 0 60px;
    }
    .line-top{
        top: 30px;
        width: calc(60% + 100px);
        right: -100px;
    }

    #news .flex_left,
    #news .flex_right,
    #features .flex_left,
    #instructor .flex_left,
    #instructor .flex_right,
    #contentslist .flex_third{
        display: block;
        width: 100%;
    }
    #news .news-list{
        margin-bottom: 40px;
    }
    #news .news-list li{
        gap: 10px;
    }
    #news .news-date{
        flex: 0 0 100px;
        font-size: 0.9em;
    }
    #news .flex_right{
        font-size: 0.9em;
    }

    #extracurricular{
        padding-bottom: 0;
    }
    #extracurricular h2{
        font-size: 2em;
    }
    #extracurricular .ext_area{
        display: block;
        margin: 30px;
    }
    #extracurricular .ext_area2{
        display: block;
    }
    #extracurricular .ext_left,
    #extracurricular .ext_right{
        display: none;
    }
    #extracurricular .ext_center{
        margin: 0;
        width: 100%;
        flex: none;
    }
    #extracurricular .ext_center2{
        padding: 60px 0 0;
    }
    #extracurricular .ext_spimg{
        display: flex;
        margin: 60px 0 -20px;
    }
    #extracurricular .ext_spimg img{
        width: 50%;
    }

    #features_title{
        background-image: url(/features/img/kv2_sp.jpg);
        height: 350px;
    }
    #longing{
        padding: 60px 0 60px;
    }
    #longing_inner p{
        position: static;
        width: 100%;
        margin-top: 30px;
        font-size: 0.9em;
    }
    #features{
        padding: 60px 0 60px;
    }
    #features .flex{
        margin-top: 30px;
    }
    #features .flex_left{
        padding-top: 0;
    }
    #features .flex_left img{
        width: calc( 100% + 20px);
        max-width: unset;
    }
    #features .flex_right {
        display: none;
    }
    #features .feature-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列 */
        column-gap: 5px;
        row-gap: 5px;
        margin: 30px 0 30px;
    }

    #instructor .contents{
        padding: 0;
    }
    #instructor .flex_left{
        margin-top: 0;
        margin-left: 10%;
    }
    #instructor .photo-wrap{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 12px;
        row-gap: 12px;
        flex: none;
    }
    #instructor .ph{
        width: 100%;
        margin-top: 0;
    }
    #instructor .ph1{
        grid-column: 2 / 2;
        grid-row: 1;
        margin-top: 10%;
    }
    #instructor .ph2{
        grid-column: 3 / 3;
        grid-row: 1;
        margin-top: -40%;
    }
    #instructor .ph5{
        grid-column: 1 / 2;
        grid-row: 2;
        margin-top: -50%;
    }
    #instructor .ph3{
        grid-column: 2 / 3;
        grid-row: 2;
        margin-left: -15%;
        margin-top: -10%;
    }
    #instructor .ph4{
        grid-column: 3 / 3;
        grid-row: 2;
        margin-left: -15%;
        margin-top: -60%;
    }
    #instructor .line-top{
        width: calc(60% + 100px);
        top: auto;
        bottom: 25%;
        right: -100px;
    }
    #instructor .line-bottom{
        width: calc(60% + 100px);
        left: -100px;
        bottom: auto;
        top: 25%;
    }

    #graduates, #mediaevent{
        padding: 80px 0 60px;
    }
    #tiktok-inner{
        transform: skew(0deg,5deg);
    }

    #sns{
        padding: 100px 0;
    }
    #sns_inner{
        padding: 40px 0 0;
    }
    #sns_inner #tiktok-inner,
    #sns_inner .roll-layer,
    #sns_inner .roll-logo,
    #sns_inner .sns-icons{
        position: static;
        width: 100%;
        /*transform: translateX(-2%) rotate(0deg);*/
        transform: translateX(0%) rotate(0deg);
        text-align: center;
    }
    #sns #sns-title-wrap{
        margin-bottom: 20px;
    }
    #sns #sns_title{
        width: 80px;
    }
    #sns #sns_line{
        width: 75%;
        top: -50px;
    }
    #sns_inner .roll-layer .instagram_box{
        height: auto;
        width: 35%;
        flex-shrink: 0;
    }
    #sns_inner .roll-logo{
        background-size: 80%;
        height: 150px;
    }
    #sns_inner .sns-icons{
        transform: unset;
        margin: auto;
        display: inline-block;
    }
    #sns_inner .sns-icons a{
        margin: 0 15px;
        text-decoration: none;
    }

    #mediaevent{
        margin: -30px 0 0;
    }
    #mediaevent p,
    #graduates p{
        font-size: 0.8em;
    }
    #contentslist{
        padding: 80px 0 0px;
    }
    #contentslist .flex_third{
        margin-bottom: 50px;
    }
    #contentslist h4{
        font-size: 1.8em;
    }
    #contentslist h5{
        font-size: 1.1em;
    }

    @keyframes revealDiag {
    }
    @keyframes revealDiag2 {
    }
}