.visual .mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
h1{
color: #00A616;
}
.visual .txt {
font-size: 0;
line-height: 1;
position: absolute;
top: 50px;
left: 50px;
}
span.line_title {
display: block;
font-size:30px;
font-weight: bold;
 line-height: 2;
}
.visual .line {
display: block;
font-size:60px;
font-weight: bold;
}
.visual .cach{
font-size:45px;
color: #000000;
}
.visual .line + .line {
margin-top: 15px;
}
.visual .line,
.visual .letter {
opacity: 0;
}
.visual .letter {
display: inline-block;
padding-top: 5px;
}
.visual.is-visible .line {
opacity: 1;
}
.visual.is-visible .letter {
animation: slideIn 3s cubic-bezier(0.3,.6,.13,1) forwards;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translate3d(0,0,0);
}
20% {
opacity: 0;
transform: translate3d(0,0,0);
}
100% {
opacity: 1;
transform: translate3d(50px,0,0);
}
}
@keyframes slideIn_ss {
0% {
opacity: 0;
transform: translate3d(0,0,0);
}
20% {
opacity: 1;
transform: translate3d(0,0,0);
}
100% {
opacity: 1;
transform: translate3d(0,0,0);
}
}
.ie .visual .mask.burn,
.edge .visual .mask.burn {
display: none;
}
/* 信号機の本体 */
.traffic-light {
width: 100px;
height: 40px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #296608;
border-radius: 40px;
}
/* 信号機の光 */
.light {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
animation: shadow 6s infinite;
}
/* 信号機の光に被せる要素 */
.light::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: light 6s infinite;
}
/* 信号機の光（緑） */
.light.green {
background-color: #2ecc71;
color: #2ecc71;
}
/* 信号機の光（黄色） */
.light.yellow {
background-color: #f1c40f;
color: #f1c40f;
animation-delay: 2s;
}

.light.yellow::after {
animation-delay: 2s;
}

/* 信号機の光（赤） */
.light.red {
background-color: #df3f2e;
color: #df3f2e;
animation-delay: 4s;
}

.light.red::after {
animation-delay: 4s;
}

/* 信号機の光の影の部分のアニメーション */
@keyframes shadow {
0% {
box-shadow: 0 0 20px 4px;
}
32% {
 box-shadow: 0 0 20px 4px;
}
33% {
 box-shadow: none;
}
100% {
box-shadow: none;
}
}

/* 信号機の光のアニメーション */
@keyframes light {
0% {
background-color: transparent;
 }
32% {
background-color: transparent;
}
33% {
background-color: transparent;
}
100% {
 background-color: transparent;
}
}
/*　iPadサイズ　----------------------------------*/

@media screen and (max-width: 768px){
.visual .mask {
position: static;

}

h1{
color: #00A616;
}
.visual .txt {
position: static;
width: 90%;
margin: 0 auto;
    text-align: center;
}
.visual .line {
font-size:30px;
}
.visual .cach{
font-size:20px;
}
.visual .line + .line {
margin-top: 15px;
}
.visual .letter {
padding-top: 5px;
}
.visual.is-visible .letter {
animation: slideIn_ss 1s forwards;
}

/* 信号機の本体 */
.traffic-light {
width: 100px;
height: 40px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #296608;
border-radius: 40px;
}
}

/*　スマホサイズ　----------------------------------*/

@media only screen and (max-width:479px) {



}