/* -------------------------
全体
------------------------- */
body {
    background-image: url(../image/bg_moyou.png); 
    background-attachment: fixed;
    background-repeat: repeat-x;
}

container {
    min-width: 900px;
    margin: 0 auto;
    line-height: 2em;
}

.bg-aqua {
    background:rgba(108, 199, 244, 0.4) ;
    clip-path: polygon(76% 0, 100% 13%, 100% 60%, 93% 89%, 41% 100%, 0 69%, 6% 11%);
    background-size: contain;
    padding: 4rem;
}

.aqua-text {
    font-size: 0.8em;

}

a {
    text-decoration: none;
    color: #000000;
}

.effect-fade {
    opacity : 0;
    transform : translate(0, 45px);
    transition : all 1000ms;
    }
    
    .effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
    }



/* -------------------------
header
------------------------- */

.icon {
    width: 3em;
    height: auto;
}


ul {
    list-style: none;
    padding-left: 0;
}

header ul li{
    padding: 0;
}

/* ボタン本体 */
.btn {
    position: relative; /* static以外を指定 */
    align-items: center;
    color: #000;
    font-family: "Signika";
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
  }
  
  /* ボタンホバー時 */
  .btn:hover {
    color: #6cc7f4;
    transition: 0.1s;
  }
  
  /* キラキラ部分 */
  .star {
    position: absolute;
    display: block;
    width: 10px; /* キラキラの横幅を指定 */
    height: 10px; /* キラキラの縦幅を指定 */
    background-image: url("../image/star.svg"); /* キラキラの画像のパスを記入 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: glitter 1s;
    pointer-events: none;
  }
  
  /* キラキラが発生するアニメーション */
  @keyframes glitter {
    0% {
      transform: scale(0);
      opacity: 0;
    }
  
    50% {
      transform: scale(1);
      opacity: 1;
    }
  
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }

#wrap {
    position: relative;
    height: auto;
    }

.object span {
                z-index: 10;
                position: absolute;
                -webkit-transition: all 2s ease;
                /*アニメーションの変化*/
                -moz-transition: all 2s ease;
                -o-transition: all 2s ease;
                -ms-transition: all 2s ease;
                transition: all 2s ease;
            }
            .pos0 {
                top: 0px;
                left: 0px;
            }
            .pos1 {
                top: 500px;
                left: 200px;
            }
            .pos2 {
                top: 1000px;
                left: 400px;
            }
            .pos3 {
                top: 1500px;
                left: 200px;
            }
            /* スイングアニメーション */
            .object div {
                -webkit-transform-origin: top center;
                transform-origin: top center;
                -webkit-animation-name: swing;
                animation-name: swing;
                -webkit-animation-duration: 2s;
                animation-duration: 2s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
            }
            @-webkit-keyframes swing {
                20%,
                40%,
                60%,
                80%,
                100% {
                    -webkit-transform-origin: top center;
                }
                20% {
                    -webkit-transform: rotate(15deg);
                }
                40% {
                    -webkit-transform: rotate(-10deg);
                }
                60% {
                    -webkit-transform: rotate(5deg);
                }
                80% {
                    -webkit-transform: rotate(-5deg);
                }
                100% {
                    -webkit-transform: rotate(0deg);
                }
            }
            @keyframes swing {
                20% {
                    transform: rotate(15deg);
                }
                40% {
                    transform: rotate(-10deg);
                }
                60% {
                    transform: rotate(5deg);
                }
                80% {
                    transform: rotate(-5deg);
                }
                100% {
                    transform: rotate(0deg);
                }
            }





/* ハンバーガーボタン固定表示 */
#hamburger .btn-gNav {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

/* ボタン */
#hamburger .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgb(86, 94, 72);
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

#hamburger .btn-gNav span:nth-child(1) {
    top: 0;
}

#hamburger .btn-gNav span:nth-child(2) {
    top: 10px;
}

#hamburger .btn-gNav span:nth-child(3) {
    top: 20px;
}

/* .openついたらバツ印になる */
#hamburger .btn-gNav.open span:nth-child(1) {
    background: #fff;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#hamburger .btn-gNav.open span:nth-child(2),
#hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* クリックで出てくるメニュー */
#gNav {
    position: fixed;
    top: 0;
    right: -110px;
    height: 100%;
    background: rgba(64, 74, 86, 0.8);
    font-size: 1em;
    box-sizing: border-box;
    z-index: 2;
    padding-top: 90px;
    transition: .3s;
}



#gNav.open {
    right: 0px;
    margin-right: 0px;
}

/* -------------------------
index
------------------------- */
.swallow {
    background-image: url(../image/kira-2.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 95% 0%;
}

.top-p {
    background-image: url(../image/kira-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 20% 0%;
    font-size: 0.8em;
    line-height: 0.3em;
}


/* -------------------------
about
------------------------- */

.about-text p {
    padding-left: 30px;
}

.about-text p:last-child {
text-align: center;
}

.future-p {
    font-size: 0.8em;
}

.about-bg {
    background-image: url(../image/kira-1.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.photo-wrap {
    height: auto;
    width: 15em;
    margin: 0 auto;
}

.favorite,
.about {
    background-image: url(../image/ymaru-8.png);
    background-repeat: no-repeat;
    background-size: 5%;
    opacity: 0.8;
    background-position: 42%;
}

/* -------------------------
service
------------------------- */

.service_img {
    background-image: url(../image/ymaru-8.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
}

.service-p {
    font-size: 0.9em;
}

.process p {
    width: 150px;
    line-height: 150%;
    margin-bottom: 0%;
    font-size: 0.8em;
}

.flow-bg-1 {
    background-color: #bce2e8;
}

.flow-bg-2 {
    background-color: #a0d8ef;
}

.flow-bg-3 {
    background-color: #84a2d4;
}

.flow-bg-4 {
    background-color: #87ceeb;
}

.flow-bg-5 {
    background-color: #83ccd2;
}

.web-font-bg {
    position: relative;
    color: #000;
    /* clip-path: polygon(60% 0, 80% 50%, 60% 100%, 0 100%, 0 0); */
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 1.8em;
    z-index: 1;
}

.web-font-bg::before {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -65px;
    color: #fff;
    font-size: 90px;
    font-family: fontAwesome;
    z-index: -1;
}

.flow-bg-1::before {
    content: '\f303';
}

.flow-bg-2::before {
    content: '\f0c2';
}

.flow-bg-3::before {
    content: '\f030';
}

.flow-bg-4::before {
    content: '\f5fc';
}

.flow-bg-5::before {
    content: '\f59c';
}








/* -------------------------
works
------------------------- */
.works-body {
    background-image: url(../image/kira-2.png),
    url(../image/works-bg.png),
    url(../image/bg_moyou.png);
    background-repeat: no-repeat,
    no-repeat,
    repeat-x;
    background-size: 30%,85% 90%, 50%;
    background-position: 100% 6%,50% 80%,
    100%;
}

.works-bg {
    background-image: url(../image/kira-2.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 100% 0%;
}

.work-img {
    transition: 0.5s;
    width: 50%;
}

.coming {
    width: 30%;
}

.work-img:hover {
    opacity: 0.8;
}

.works-p {
    width: 50%;
}

.work-last-p {
    margin-bottom: 6em;
}

h4 {
    font-size: 1.7em;
}

/* -------------------------
contact
------------------------- */
.contact-bg {
    background-image: url(../image/kira-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 95% 0%;
}

.contact-p {
    font-size: 0.8em;
}

.mail-a {
    text-decoration: underline #84a2d4 2px;
    color: #0456e2;
}

.mail-a:hover {
    opacity: 0.6;
    transition: 0.2s;
}

/* -------------------------
スマホ表示
------------------------- */

@media (max-width: 992px) {
    .web-font-bg {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
        margin: 0 auto;
    }

    .web-font-bg::before {
        margin-left: -45px;
    }

    .flow {
        text-align: center;
    }

    .work-img {
        width: 65%;
    }

    .works-p {
        width: 70%;
    }
}

@media (max-width: 990px) {
    .work-img {
        width: 75%;
    }

}



@media (max-width: 768px) {
    .about-div {
        display: block;
    }

    .about-text {
        width: 100%;
    }
    
    .contact p {
        font-size: 0.8em;
    }

    .contact p:last-child {
        font-size: 1.3em;
    }

     .work-img {
        width: 85%;
    }

    body {
        overflow-x: hidden;
    }
}

    @media (max-width: 576px) {
        .works-p {
            width: 85%;
        }
    }