@charset "utf-8";

/*** メインビジュアル
***************************/

.mainV{
    height: 900px;
    position: relative;
}

/* TB 770px */
@media ( max-width: 500px ){
    .mainV{
        height: 700px;
    }
}


/* SP 500px */
@media ( max-width: 500px ){
    .mainV{
        background-image: url(../images/index/pattern_full.png);
        position: relative;
    }
    .mainV::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        animation: fadeIn 3s forwards;
    }
    @keyframes fadeIn {
        0%{opacity: 0.1;}
        100%{opacity: 0.7;}
    }

    .kaden{
        display: none;
    }

    .anim01{
        filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
    }
}/* 500 */


.pic_anim{
    /* width: 50vw; */
    position: absolute;
}

.anim01{
    top: 48%;
    left: 50%;
    translate: -50% -50%;
}

/* SP 730px */
@media ( max-width: 730px ){
    /* .anim01{
        top: 40%;
    } */
}/* 730 */



@keyframes katakata1 {
    0% {transform:translate(0, 0) rotate(0deg);}
    20% {transform:translate(0, 0) rotate(0deg);}
   
    25% {transform:translate(0, 0) rotate(-3deg);}
    28% {transform:translate(0, -1px) rotate(0deg);}
    31% {transform:translate(0, -1px) rotate(3deg);}
   
    34% {transform:translate(1px, 0) rotate(-2deg);}
    37% {transform:translate(0, 1px) rotate(0deg);}
    40% {transform:translate(0, 0) rotate(3deg);}
   
    50% {transform:translate(0, 0) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(0deg);}
  }

  @keyframes katakata2 {
    0% {transform:translate(0, 0) rotate(0deg);}
    30% {transform:translate(0, 0) rotate(0deg);}
   
    35% {transform:translate(0, 0) rotate(3deg);}
    38% {transform:translate(0, 1px) rotate(0deg);}
    42% {transform:translate(0, 1px) rotate(-3deg);}
   
    45% {transform:translate(-1px, 0) rotate(2deg);}
    48% {transform:translate(0, -1px) rotate(0deg);}
    51% {transform:translate(0, 0) rotate(-3deg);}
   
    61% {transform:translate(0, 0) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(0deg);}
  }

  @keyframes katakata3 {
    0% {transform:translate(0, 0) rotate(0deg);}
    50% {transform:translate(0, 0) rotate(0deg);}
   
    53% {transform:translate(0, 0) rotate(-3deg);}
    56% {transform:translate(0, -1px) rotate(0deg);}
    59% {transform:translate(0, -1px) rotate(3deg);}
   
    64% {transform:translate(1px, 0) rotate(-2deg);}
    67% {transform:translate(0, 1px) rotate(0deg);}
    70% {transform:translate(0, 0) rotate(3deg);}
   
    80% {transform:translate(0, 0) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(0deg);}
  }



.anim02{
    top: 10%;
    left: 20%;
    animation:katakata1 5s infinite ease-in-out alternate;
}

/* SP 529px */
@media ( max-width: 529px ){
    .anim02{
        top: 12%;
        left: 23%;
    }
}/* 529 */


.anim03{
    top: 28%;
    left: 5%;
    animation:katakata2 5s infinite ease-in-out alternate;
}

.anim04{
    top: 50%;
    left: 18%;
    animation:katakata3 5s infinite ease-in-out alternate;
}

/* SP 880px */
@media ( max-width: 880px ){
    .anim04{
        left: 16%;
    }
}/* 880 */

/* SP 670px */
@media ( max-width: 670px ){
    .anim04{
        left: 13%;
    }
}/* 670 */

/* SP 620px */
@media ( max-width: 620px ){
    .anim04{
        left: 10%;
    }
}/* 620 */

/* SP 529px */
@media ( max-width: 529px ){
    .anim04{
        top: 53%;
        left: 8%;
    }
}/* 529 */


.anim05{
    top: 70%;
    left: 10%;
    animation:katakata1 5s infinite ease-in-out alternate;
}

/* SP 529px */
@media ( max-width: 529px ){
    .anim05{
        top: 73%;
        left: 15%;
    }
}/* 529 */


.anim06{
    top: 10%;
    right: 5%;
    animation:katakata2 5s infinite ease-in-out alternate;
}

/* SP 730px */
@media ( max-width: 730px ){
    .anim06{
        top: 5%;
        right: 11%;
    }
}/* 730 */


/* SP 529px */
@media ( max-width: 529px ){
    .anim06{
        right: 23%;
    }
}/* 529 */


.anim07{
    top: 23%;
    right: 22%;
    animation:katakata3 5s infinite ease-in-out alternate;
}

/* SP 1199px */
@media ( max-width: 1199px ){
    .anim07{
        top: 27%;
        right: 21%;
    }
}/* 1199 */

/* SP 880px */
@media ( max-width: 880px ){
    .anim07{
        right: 18%;
    }
}/* 880 */

/* SP 670px */
@media ( max-width: 670px ){
    .anim07{
        right: 15%;
    }
}/* 670 */

/* SP 620px */
@media ( max-width: 620px ){
    .anim07{
        right: 12%;
    }
}/* 670 */



.anim08{
    top: 50%;
    right: 10%;
    animation:katakata2 5s infinite ease-in-out alternate;
}

/* SP 880px */
@media ( max-width: 880px ){
    .anim08{
        top: 45%;
        right: 8%;
    }
}/* 880 */


.anim09{
    top: 65%;
    right: 25%;
    animation:katakata1 5s infinite ease-in-out alternate;
}

/* SP 880px */
@media ( max-width: 880px ){
    .anim09{
        right: 20%;
    }
}/* 880 */

/* SP 670px */
@media ( max-width: 670px ){
    .anim09{
        right: 17%;
    }
}/* 670 */

/* SP 529px */
@media ( max-width: 529px ){
    .anim09{
        top: 69%;
        right: 19%;
    }
}/* 529 */


.scroll{
    position: absolute;
    text-align: center;
    top: 85%;
    left: 50%;
}

/* TB 770px */
@media ( max-width: 770px ){
    .scroll{
        top: 80%;
        left: 45%;
    }
}

/* SM  */


.top_scroll_icon{
    display: inline-block;
}

.top_scroll_icon span{
    display: block;
    height: 0.6rem;
    width: 0.6rem;
    border-radius: 50%;
    background-color: #4b8a7b;
    animation: scrollIcon 1.8s infinite alternate ease-in-out;
}

.top_scroll_icon span:nth-child(1){
    animation-delay: -1.2s;
}

.top_scroll_icon span:nth-child(2){
    animation-delay: -0.6s;
}

.top_scroll_icon span:nth-child(3){
    animation-delay: 0;
}

@keyframes scrollIcon{
    0%{transform: scale(1);}
    100%{transform: scale(2);}
    /* 0%{
        background-color: #4b8a7b;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    33.333%{
        background-color: #4b8a7b;
        -webkit-transform: scale(1.33333);
        transform: scale(1.33333);
    }
    66.666%{
        background-color: #4b8a7b;
        -webkit-transform: scale(1.66667);
        transform: scale(1.66667);
    }
    100%{
        background-color: #4b8a7b;
        -webkit-transform: scale(1);
        transform: scale(1);
    } */
}


.top_scroll_icon span:not(:last-of-type){
    margin-bottom: 1.4rem;
}

/*** 私たちについてセクション
***************************/
.br_550{
    display: none;
}

.about{
    padding: 30px 10px 80px;
}

.about h2{
    margin-left: 40px;
}

.rl{
    height: 610px;
    margin: 100px auto;
    writing-mode: vertical-rl;
    text-align: left;
    line-height: 3.5;
    font-size: 18px;
}

.rl p{
    margin-left: 130px;
}

.catch_phrase{
    color: #ffa806;
}

.aboutSec{
    position: relative;
}

.about_illust{
    position: absolute;
    top: 50%;
    left: 5%;
}

.about a{
    padding: 15px 40px;
    color: #fff;
    background-color: #4b8a7b;
    border-radius: 35px;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
}

.about a:hover{
    opacity: 0.75;
}

.look_more{
    transform: translateY(-20px);
}

/* BR 1100px */
@media ( max-width: 1100px ){
    .about h2{
        margin-left: 20px;
    }
    
    .rl{
        height: 610px;
        margin: 100px auto;
        writing-mode: vertical-rl;
        text-align: left;
        line-height: 3;
        font-size: 18px;
    }
}/* 1100 */

/* BR 1000px */
@media ( max-width: 1000px ){
    .about h2{
        margin-left: 20px;
    }
    
    .rl{
        height: 610px;
        margin: 100px auto;
        writing-mode: vertical-rl;
        text-align: left;
        line-height: 2.8;
        font-size: 18px;
    }
}/* 1000 */

/* TB 900px */
@media ( max-width: 900px ){
    .about h2{
        margin-left: 30px;
    }
    
    .rl{
        height: 610px;
        margin: 100px auto;
        writing-mode: vertical-rl;
        text-align: left;
        line-height: 3.2;
        font-size: 18px;
    }

    .about_illust{
        position: absolute;
        top:60%;
        left: 50%;
    }

    .rl p{
        margin: auto;
    }
}/* 900 */

/* TB 800px */
@media ( max-width: 800px ){
    .about h2{
        padding-bottom: 20px;
    }
    
    .about h2,
    .about p{
        margin: auto;
        transform: translate(0px, -90px);
    }

    .rl{
        height: 750px;
        margin: 70px auto;
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 2.7;
        font-size: 18px;
    }

    .about_illust{
        position: absolute;
        top:77%;
        left: 0;
        right: 0;
    }

    .rl p{
        margin: auto;
    }
}/* 800 */

/* TB 650px */
@media ( max-width: 650px ){
    .rl{
        height: 650px;
        margin: 70px auto;
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 2.7;
        font-size: 15px;
    }

    .about_illust{
        position: absolute;
        top:75%;
        left: 0;
        right: 0;
    }
}/* 650 */

/* TB 550px */
@media ( max-width: 550px ){
    .br_550{
        display: inline;
    }
    .until_550{
        display: none;
    }

    .rl{
        height: 580px;
        margin: 70px auto;
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 2.3;
        font-size: 15px;
    }

    .about_illust{
        position: absolute;
        top:76%;
        left: 0;
        right: 0;
    }

    .look_more{
        transform: translateY(-20px);
    }
}/* 550 */

/* SP 380px */
@media ( max-width: 380px ){
    .br_550{
        display: inline;
    }
    .until_550{
        display: none;
    }

    .rl{
        height: 500px;
        margin: 70px auto;
        writing-mode: horizontal-tb;
        text-align: center;
        line-height: 2.3;
        letter-spacing: 3px;
        font-size: 15px;
    }

    .about_illust{
        max-width: 45%;
        position: absolute;
        top:84%;
        left: 0;
        right: 0;
    }

    .look_more{
        transform: translateY(-20px);
    }
}/* 380 */


/*** ご相談からの流れセクション（topのオリジナル部分）
***************************/

.works_link{
    margin: 20px 0 100px;
}

.flow a{
    /* margin: 50px 0 100px; */
    padding: 15px 40px;
    color: #fff;
    background-color: #4b8a7b;
    border-radius: 35px;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 35%);
}

.flow a:hover{
    opacity: 0.75;
}