@charset "utf-8";
/* CSS Document */

/*main*/

header.hide{
    opacity:0;
}

header{
    opacity:1;
    transition:1.2s ease;
}

section#top{
    font-size: 2.28vh;
    min-height:100vh;
}

    section#top.fix{
    font-size:16px;
    }
    
    section#top.fix div.box-center{
    position: relative;
    top:30px;
    -webkit-transform: translateY(0) translateX(-50%); 
    transform: translateY(0) translateX(-50%);
    }

/*section#top h3{
    font-size:1.2em;
    color:#bebeaa;
    letter-spacing:0.1em;
    transition:1s;
}

section#top.pre h3{
    visibility: hidden;
    }*/

/* svg */

#flow01{
    width:1em;
    margin:0  auto;
    /*transition:1.2s ease;
    animation:fadeInDown 1.5s ease forwards;*/
}

#flow01 polygon{
        fill: #f5f5f3;
        animation: flow 10ms linear forwards;
        }
        
        #flow01 polygon#arw05{animation-delay:1s}
        #flow01 polygon#arw04{animation-delay:1.3s}
        #flow01 polygon#arw03{animation-delay:1.6s}
        #flow01 polygon#arw02{animation-delay:1.9s}
        #flow01 polygon#arw01{animation-delay:2.2s}

/*section#top.pre #flow01{
    transform:translateY(3rem);
}
*/
section#top h2#copy{
    font-size:1.6em;
    padding:0;
    margin:1em auto 0;
    width:4.5em;
}

section#top h2#copy #copy01{
    /*animation-delay:1.5s;*/
}

section#top h2#copy #tsuta,
section#top h2#copy #wa,
section#top h2#copy #ru{
        fill-opacity:0;
        transform:translate3d(0, -1rem, 0);
        animation:s-fadeInDown 1s ease-in-out forwards;
        }
        
        section#top h2#copy #tsuta{
            animation-delay:1.4s;
            }
        section#top h2#copy #wa{
            animation-delay:calc(1.4s + 0.3s);
            }
        section#top h2#copy #ru{
            animation-delay:calc(1.4s + 0.6s);
            }

section#top h2#copy svg#copy02{
    opacity:0;
    width:26%;
    display:block;
    margin:0.6em auto 0.6em 39%;
    animation:fadeIn 1.2s 2.5s ease-in-out forwards;
}

    section#top h2#copy #copy03 #ge{
            opacity:0;
            animation:fadeIn 1.2s 3s ease forwards;
        }
    section#top h2#copy #copy03 #ru02{
            opacity:0;
            animation:fadeInLeft 1.4s 3s ease forwards;
        }
    section#top h2#copy #copy03 #hiro{
            opacity:0;
            animation:fadeInRight 1.4s 3s ease forwards;
        }

#pyramid{
    width:40em;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

/*section#top.pre #pyramid{
    transform:translateY(-3rem)
}*/

section#top #pyramid svg .shuffle polygon,
section#top #pyramid svg .shuffle_btm polygon{
    opacity:0;
   /*opacity:0;
    animation:fadeIn 10ms ease forwards;
     animation-delay:3s;*/
}

section#top #pyramid svg #l01-1{
    opacity:0;
    animation:fadeInDown 0.8s ease forwards;
}
section#top #pyramid svg #l01-2,
section#top #pyramid svg #l01-3{
    opacity:0;
    animation:fadeInDown 0.5s ease forwards;
}

section#top #pyramid svg #l01-1{
    animation-delay:3.5s;
}

section#top #pyramid svg #l01-2{
    animation-delay:4s;
}

section#top #pyramid svg #l01-3{
    animation-delay:4.3s;
}


section#top #pyramid svg polygon.cls-2{
    fill: #fcd006;
}


/*svg color*/

.st0,
.fill_yel{
    fill: #fcd006;
}

.st_base{
    fill:none;
}

/*pyramid_txt*/

#pyramid_txt{
    width:100%;
    text-align:center;
    position:absolute;
    left:0;
    top:6.5em;
    display:block;
}

#pyramid_txt.hide{
    display:none;
}

#pyramid_txt p{
    font-weight:700;
    line-height:1.5em;
    display:none;
}

#pyramid_txt br{
    display:none;
}

#pyramid_txt > div.txt + div.txt {
    margin-top: 0.3em;
}

#pyramid_txt div.txt:nth-child(1) p.tlt{
    letter-spacing: 0.18em;!important
    text-indent:0.3em;!important
}

#pyramid_txt div.txt:nth-child(2) p.tlt{
    letter-spacing: 0.2em;!important
    text-indent:0.23em;!important
}

#pyramid_txt div.txt:nth-child(3) p.tlt{
    letter-spacing: 0.25em;!important
    text-indent:0.25em;!important
}
#pyramid_txt div.txt:nth-child(4) p.tlt{
    letter-spacing: 0.42em;!important
    text-indent:0.22em;!important
}


/* =======================================
	TABLET
======================================= */

@media screen and  (min-width:641px) and ( max-width:1024px) {
    
    section#top{
        font-size: 1.7vh; 
}
    
}

/* =======================================
	SMPH
======================================= */

@media screen and (max-width: 640px) {
    
    section#top{
        font-size:1em;
    }
    
    section#top div.box-center{
    position: relative;
    top: 5vh;
    left: 50%;
    -webkit-transform: translateY(0) translateX(-50%); 
    transform: translateY(0) translateX(-50%);
    }
    
    .st_base{
    fill:#000;
}
    
    #top h3{
        font-size:1.05em;
        font-feature-settings: "palt" 1;
        letter-spacing:0em;
}
    
    #line08,#line09,#line10,
    #line11,#line12,#line13,
    #line14,#line15,#line15 .st0,
    #line14 .st0,#line13 .st0{
        fill:none;
    }
    
    #pyramid{
        width:100%;
        padding-bottom:13em;
        overflow-x: hidden;
        overflow-y: visible;
    }
    
    #pyramid svg{
        transform:scale(2);
        transform-origin: center top;
    }
    
    #pyramid svg #l13,
    #pyramid svg #l14,
    #pyramid svg #l15{
        display:none;
    }
        
    
    #pyramid_txt{
        width:90vw;
        top:7.5rem;
        left:50%;
        margin-left:-45vw;
    }
    
    #pyramid_txt div.txt:nth-child(1) p,
    #pyramid_txt div.txt:nth-child(2) p,
    #pyramid_txt div.txt:nth-child(3) p,
    #pyramid_txt div.txt:nth-child(4) p{
    font-size:0.9em;
    letter-spacing:0.2em!important;
    text-indent:0!important;
    line-height:1.8em;
    display:inline!important;
        transition:0.2s;
}
    
    #pyramid_txt p br{
    display:block;
}

}

#pyramid_txt div.txt >p span{
        display: inline;
    }
    
    #pyramid_txt div.txt p{
        display: inline-block;
    }

@keyframes flow {
	    to {fill:#000;}
        }

@keyframes flipIn {
    0%{opacity:0;}
    10%{opacity:1;}
    100%{opacity:1;}
}
.flipIn {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipIn;
  animation-name: flipIn;
}