* {
    font-family:'Teko', sans-serif;
    box-sizing:border-box;
    word-wrap:break-word;
    margin: 0px;
    padding: 0px;
    line-height:1.85;
}
dt,dd,#concept h3 span,#concept p span,.service-area p span,.rotatefront span {
    font-family: 'Sawarabi Gothic', sans-serif;
}
a {
    text-decoration: none;
    color:#000;
}
li {
    list-style:none;
}
img {
    height:100%;
    max-width: 100%;
    display:block;
}
.modal-behind-body {
    position:fixed;
    overflow:hidden;
}

/*ローディング*/
#splash {
    position:fixed;
    width:100%;
    height:100%;
    background:#fff;
    z-index:999999;
    text-align:center;
    color:#000;
}
body.appear .splashbg {
    display:block;
    animation-name:pageAnime;
    animation-duration:1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    content:"";
    position:fixed;
    z-index:999;

    width:50%;
    height:100vh;
    top:0;
    left:0;
    transform: translateX(-300%) skew(-45deg);
    background-color: #333;
}
@keyframes pageAnime {
    0% {
        transform-origin: left;
        transform:translateX(-300%) skew(-45deg);
    }
    100% {
        transform-origin: left;
        transform:translateX(500%) skew(-45deg);
    }
}

#container {
    opacity:0;
}
body.appear #container {
    animation-name:pageAnimeAppear;
    animation-duration:1s;
    animation-delay:0.6s;
    animation-fill-mode: forwards;
    opacity:0;
}
@keyframes pageAnimeAppear {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.ball-scale-ripple-multiple {
    position:absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%) !important;

    width:200px;
    height:200px;
    
}

.ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
}

.ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s
}

.ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
}
.ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
}
.ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position:absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 8px solid #333;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); 
}
.loading-text {
    position:absolute;
    font-size:42px;
    color:#000;
    top:60%;
    left:50%;
    transform:translateX(-50%);
}

@-webkit-keyframes ball-scale-ripple-multiple {
    0% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      opacity: 1; }
    70% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0.7; }
    100% {
      opacity: 0.0; }
}
  
@keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(0.1);
                transform: scale(0.1);
        opacity: 1; }
    70% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 0.7; }
    100% {
        opacity: 0.0; }
}

/*背景色が緩やかに変化*/
body {
    animation-name:bgchange;
    animation-duration:40s;
    animation-timing-function: ease;
    animation-iteration-count:infinite;
}
@keyframes bgchange {
    0% {
        background:#fff;
    }
    25% {
        background:#9908c6;
    }
    50% {
        background:#fa07cd;
    }
    75% {
        background:#06f1e9;
    }
    90% {
        background:#aaee0c;
    }
    100% {
        background:#fff;
    }
}
#container {
    position: relative;
}
header {
    width:100%;
    height:100%;
}

#header h1 {
    position: fixed;
    z-index: 9999;
    top: 2vh;
    left: 2vw;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1;
}
/*キャンバス描画*/
.canvas-wrapper {
    display:flex;
    justify-content: center;
    align-items: center;
}
#particle {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    vertical-align:bottom;
    z-index:2;
    letter-spacing: 0.25em;
}
#waveCanvas {
    position:absolute;
    left:0;
    width:100%;
    z-index:1;
}

/*マウスアニメーション*/
.scroll-down {
    position:absolute;
    bottom:15px;
    right:50%;
    /*マウスが1.6秒かけて無限のリピート*/
    animation-name:mouse-move;
    animation-duration:1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes mouse-move {
    0%{bottom:10px;}
    50%{bottom:5px;}
    100%{bottom:10px;}
}
.scroll-down span {
    position:absolute;
    left:-15px;
    bottom:45px;
    font-size:0.7rem;
    letter-spacing: 0.05em;
}
/*マウスの中の線の描写*/
.scroll-down span::after {
    content:"";
    position:absolute;
    top:10px;
    left:12.5px;
    width:1px;
    height:15px;
    background: #000;
    /*線の動き 1.4秒かけて無限のリピート*/
    animation:mouse-path-move 1.4s linear infinite;
    opacity:0;
}
@keyframes mouse-path-move {
    0% {
        height:0;
        top:10px;
        opacity:0;
    }
    50% {
        height:15px;
        opacity:1;
    }
    100% {
        height:0;
        top:30px;
        opacity:0;
    }
}
/*マウスの描写*/
.scroll-down::before {
    content:"";
    position:absolute;
    bottom:0;
    left:-15px;
    /*マウスの形状*/
    width:25px;
    height:37px;
    border-radius: 10px;
    border:1px solid #000;
}
/*マウスの中の〇*/
.scroll-down::after {
    content:"";
    position:absolute;
    bottom:26px;
    left:-5px;
    width:5px;
    height:5px;
    border-radius: 50%;
    border:1px solid #000;
}



/*文字アニメーション*/
.smoothText {
    display:block;
    overflow:hidden;
}
.smoothTextTrigger {
    display:block;
    transition:all 0.8s ease-in-out;
    transform:translate3d(0,100%,0) skewY(12deg);
    transform-origin:left;
}
.smoothTextAppear {
    transform:translate3d(0,0,0) skewY(0);
}
/*文字アニメーション2*/
.smoothTrigger {
    opacity:0;
}
.smooth {
    animation-name:smoothAnime;
    animation-duration:0.8s;
    animation-fill-mode: forwards;
    opacity:0;
    transform-origin:left;
}
@keyframes smoothAnime {
    from {
        transform:translate3d(0,100%,0) skewY(12deg);
        opacity:0;
    }
    to {
        transform:translate3d(0,0,0) skewY(0);
        opacity:1;
    }
}

.catch-copy {
    position:absolute;
    text-align:center;
    z-index:3;
    top:5vh;
    left:50%;
    transform:translateX(-50%);
}

.openbtn {
    top:2vh;
    right:2vw;
    position:fixed;
    z-index:9999;
    cursor:pointer;
    width:50px;
    height:50px;
}
.openbtn-area {
    transition:all .6s;
    width:50px;
    height:50px;
    
}
.openbtn span {
    transition:all 0.6s;
    position:absolute;
    background-color:#333;
    width:45%;
    height:3px;
    display:inline-block;
    left:14px;
}
.openbtn span:nth-of-type(1) {
    top:15px;
}
.openbtn span:nth-of-type(2) {
    top:23px;
}
.openbtn span:nth-of-type(3) {
    top:31px;
}

.openbtn.active .openbtn-area {
    transform:rotate(360deg);
}
.openbtn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
    top:18px;
    left:18px;
    width:30%;
}
.openbtn.active span:nth-of-type(2) {
    opacity:0;
}
.openbtn.active span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
    top:30px;
    left:18px;
    width:30%;
}

#g-nav.open {
    display:block;
}
#g-nav {
    display:none;
    position:fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    height: 100vh;
}
#g-nav_list {
    position:fixed;
    z-index:999;
    width:100%;
    height:100vh;
    overflow:auto;
}
#g-nav ul {
    font-size:1.7rem;
    position:absolute;
    letter-spacing:0.2em;
    z-index:999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
#g-nav.open ul li {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes gnaviAnime {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
#g-nav li {
    padding:10px;
    text-align:center;

}

#g-nav li a {
    font-weight:bold;
}

.circle-bg {
    position: fixed;
    z-index: 3;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: bgchange 40s ease infinite;
    transform: scale(0);
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    transition: all .6s;
    border: 2px solid #000;
}
.circle-active {
    transform:scale(50);
}

#concept {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#service {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.service-area {
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
.service-area section {
    width:30%;
}

.service-area i {
    font-size:60px;
}
.service-img {
    margin:10px 0;
}

#about {
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-list {
    width:50vw;
    margin:0 auto;
}
.about-list li {
    padding:16px 10px;
    border-bottom:2px solid #000;
}
.about-list li dl {
    display:flex;
}
.about-list li dl dt {
    width:30%;
}
.about-list li dl dd {
    width:70%;
}

#contact {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tel,.e-mail {
    font-size:2rem;
}
.sns-link {
    margin:10px 0 30px 0;
}
.sns-link li {
    display: inline-block;
    margin: 0 10px;
}
.sns-link i {
    font-size:2.5rem;
}


.fixed {
    z-index:1;
    height:100vh;
    width:100%;
    max-width:100%;
    padding:0 7vw;
    animation:bgchange 40s ease infinite;
    position:sticky;
    position:-webkit-sticky;
    top:0;
    padding-bottom:3rem;
}

.btn02 {
    position:relative;
    display:inline-block;
    margin:8vh 0 0 0;
    width:100%;
    max-width:250px;
    height:50px;
    text-align:center;
    outline:none;
}
.btn02 span {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    line-height:50px;
    border:3px solid #000;
    transition:0.5s;
    transform-style:preserve-3d;
    
}
.rotatefront span:nth-child(1) {
    color:#000;
    transform:rotateX(0deg);
    transform-origin:0 50% -25px;
}
.rotatefront span:nth-child(2) {
    background-color: #000;
    color:#fff;
    transform:rotateX(90deg);
    transform-origin:0 50% -25px;
}
.rotatefront:hover  span:nth-child(1){
    transform: rotateX(-90deg);
}
.rotatefront:hover  span:nth-child(2){
    transform: rotateX(0deg);
}
.inner {
    width:100%;
}


h2 {
    letter-spacing:0.3rem;
    text-align:center;
    margin:0 0 5vh 0;
    font-size:3rem;
}
#service h2,
#about h2,
#contact h2 {
    padding-top:3rem;
}
#concept h3 {
    font-size: 1.2rem;
    margin: 0 0 5vh 0;
}
.service-area h3 {
    font-size:1.6rem;
    font-weight:normal;
}
.caption {
    font-weight:bold;
    margin:0 0 3vh 0;
}





/*footer*/
footer p,
footer small {
    letter-spacing: 0.1rem;
}
footer p {
    position:fixed;
    transform:rotate(90deg);
    top:50%;
    right:1vw;
    z-index:2;
}
footer small {
    position:fixed;
    transform: rotate(-90deg);
    top:50%;
    left:-1vw;
    z-index:2;
}