* {
    margin: 0;
    padding: 0;

}

/* ========================================== */
/*  <!-- header start --> */
/* ========================================== */
#header {
    /* main の上に持ってくるよの指示
    　 ページをスクロールしてもついてくる */
    position: fixed;
    margin-top: 0;
    padding-top: 20px;
    width: 100%;
    text-align: right;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    #header{
        padding-top: 0px;
        width: 100%;
    }
}

.header-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    
}

.grobal-navi-list {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

.navi-item {
    margin-right: 40px;

}

.navi-item a {
    color: #939292;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'Comfortaa', cursive;
}


.navi-item a:hover {
    color: #B4657A;

}

.openbtn1 {
    display: none;
    float: right;

}

.h-g-nav {
    display: none;
    opacity: 0;
    list-style: none;




}

.hamburger-cover {
    display: none;
}



/*  レスポンシブの場合*/
@media screen and (max-width: 768px) {
    .grobal-navi {
        display: none;
    }

    /* ハンバーガーメニュー */
    .openbtn1 {
        position: fixed;
        display: block;
        position: relative;
        /*ボタン内側の基点となるためrelativeを指定*/
        padding-top: 0;
        padding-right: 0;


        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 5px;

        z-index: 1000;

    }

    /*ボタン内側*/
    .openbtn1 span {
        display: inline-block;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 2px;
        border-radius: 2px;
        background: #939292;
        width: 45%;
    }

    .openbtn1 span:nth-of-type(1) {
        top: 15px;
    }

    .openbtn1 span:nth-of-type(2) {
        top: 23px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 31px;
    }



    /*activeクラスが付与されると線が回転して×に*/

    .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn1.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .openbtn1.active span:nth-of-type(3) {
        top: 30px;
        bottom: 10px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }



    .header-wrapper {
        position: absolute;
        width: 100%;
        flex-direction: column;
        /* justify-content: center;
        align-items: center; */
        text-align: center;
        background-color: #fff;
        margin-top: 0;


    }

    .h-g-nav.active {
        display: block;
        opacity: 1;
        margin-top: 50px;
    }

    .h-g-nav-li {
        list-style: none;
        margin-top: 10vw;
        margin-bottom: 20vw;

    }

    .navi-item {
        margin-right: 0;
        margin-bottom: 30px;

    }


    /* 
.hamburger-demo-cover(ハンバーガーメニュー解除用bg)
=================================== */
    .hamburger-cover.active {
        display: block;
        opacity: 1;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background: rgba(3, 3, 3, .5);
        display: block;
    }

}


/* ヘッダー背景白 */
/* スクロールするため高さを出すためのsection */
.section {
    height: 800vh;
    position: absolute;
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav {
    margin-top: 0;
    /* 余白を狭くする */
    padding: 15px 0px 10px;
    /* 背景を白にする */
    background: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 768px) {
    header.scroll-nav {
       background: none;
       padding: 0px 0px;
    }
}





body {
    color: #707070;
    font-family: 'Noto Sans JP', sans-serif;
}

.background {
    background-image: url("../images/background_01.webp"), url("../images/background_03.png");
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
    background-position: top left, bottom right;
    /* ↓背景が重なったときに混ざるのを防止 */
    background-blend-mode: multiply;
}

@media screen and (max-width:768px) {
    .background {
        /* 背景画像を表示する領域内に収まるように縮小 */
        background-size: contain;
        background-image: url("../images/background_01.png");

    }

}





main {

    /* レイアウト準備 */
    display: flex;
    /* 立て並びに 　direction(方向)*/
    flex-direction: column;
    /* 左右を真ん中に align(整理する) */
    align-items: center;
    text-align: center;
    padding-top: 350px;
    font-size: 1.1rem;
    margin: auto;
}

@media only screen and (max-width: 768px) {
    main {
        padding-top: 200px;
        align-items: flex-end;
        padding-right: 5%;

    }

}


/* ========================================== */
/*  <!-- hero start -->*/
/* ========================================== */
.hero-agomo {
    width: 100%;
    padding-bottom: 40px;
    display: block;
    margin: 0 auto;

}

.hero-border {
    width: 267px;
    height: 2px;
    background-color: #B4657A;
}

.left-to-right {
    animation-name: left-to-right;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes left-to-right {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time03 {
    animation-delay: 0.2s;
}

.delay-time06 {
    animation-delay: 0.4s;
}

.delay-time09 {
    animation-delay: 0.6s;
}

.delay-time12 {
    animation-delay: 0.8s;
}

.hero-border {
    animation-delay: 0.3s;
}


#agomo1 {
    margin-left: -3px;
}

#agomo2 {
    margin-left: -5px;
}

#agomo3 {
    margin-left: 3px;
}

@media screen and (max-width: 768px) {
    .hero-agomo {
        height: auto;
        padding-bottom: 20px;
        display: flex;
        justify-content: flex-end;

    }

    .box {
        max-width: 15%;
        height: auto;
    }

    .left-to-right{
        width: 7%;
    }

    .hero-border {
        width: 33.59375vw;
        height: 2px;
        background-color: #B4657A;
    }
}



.hero-text {
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 335px;
    line-height: 2;
    letter-spacing: 1px;


}



@media screen and (max-width: 768px) {
    .hero-text p {
        font-size: 1.62rem;
        text-align: right;
        margin-top: 0px;
        line-height: 1.5;
    }
}

@media screen and (max-width: 400px) {
    .hero-text p {
        font-size: 1rem;
    }
}

/* ========================================== */
/*  <!-- about start -->*/
/* ========================================== */

#about {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 100px;
    margin-top: -100px;



}

.about-name {
    /* width: 8%;
    max-width: 110px;
    min-width: 110px; */
    height: auto;
    margin-bottom: 5.1vh;
}

@media screen and (max-width:768px) {
    .about-name {
        margin-bottom: 3vh;
    }

}

@media screen and (max-width: 400px) {
    .about-name {
        width: 16.6666vw;
    }
}

.me {
    display: flex;
    flex-direction: column;
    line-height: 2.5;
    margin: auto;
    align-items: center;

    position: relative;

}

.me-photo {
    width: 50.732064421vw;
    max-width: 693px;

}

@media screen and (max-width:768px) {
    .me-photo {
        width: 69.921875vw;
    }

}

.me-name {
    position: absolute;
    width: 18.30161054vw;
    right: -8.27818vw;
    top: -4.1478vw;

}

@media screen and (max-width:768px) {
    .me-name {
        width: 22.265625vw;
    }

}

@media screen and (max-width: 400px) {
    .me-name{
        width:23.333vw;
    }
}

.name {
    /* width:45%;
    max-width: 500px;
    min-width: 270px; */
    padding-top: 5px;
    padding-bottom: 11.8vh;
    margin-left: auto;
}

@media screen and (max-width: 400px) {
    .name{
        width:37.222vw;
    }
}

.me p {
    font-size: 1rem;
    text-align: center;
    line-height: 3;

}

@media screen and (max-width:768px) {
    .me p {
        font-family: 'Noto Sans JP', sans-serif;
        color: #707070;
        font-size: 1.1rem;
        text-align: left;
        line-height: 1.5;
        letter-spacing: 1px;
        width: 70vw;

    }

}

@media screen and (max-width: 400px) {
    .me p{
        font-size: 0.8rem;
    }
}


/* ========================================== */
/* <!-- SNS --> */
/* ========================================== */
.sns p {
    font-size: 1rem;
    writing-mode: vertical-rl;
    /* テキストを縦書きにする */
    text-orientation: mixed;
    /* 予期しない向きに回転した文字を自動で修正 */
    white-space: nowrap;
    /* 複数の文字列を水平に並べるために必要 */
    text-align: left;

    color: #939292;
    letter-spacing: 10px;
}

@media screen and (max-width:768px) {
    .sns p {
        letter-spacing: 5px;
    }

}

@media screen and (max-width: 400px) {
    .sns p{
        font-size: 0.8rem;
    }
}

.sns-border {

    margin-top: 10px;
    margin-bottom: 10px;
    width: 2px;
    height: 80px;
    background: #939292;
    animation: scrollDown4 1.5s ease infinite;
    /* margin: 0 auto; */
}

@keyframes scrollDown4 {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }

    45% {
        transform-origin: top;
        transform: scaleY(1);
    }

    55% {
        transform-origin: bottom;
        transform: scaleY(1);
    }

    100% {
        transform-origin: bottom;
        transform: scaleY(1);
    }
}



.snslink img {
    display: flex;
    margin-top: 15px;
    width: 41px;
    /* 幅を41ピクセルに指定 */
    height: auto;
    /* 高さを自動調整 */
}
@media screen and (max-width: 400px) {
    .snslink img{
        width: 19px;
        margin-top: 8px;
    }
}



.sns {
    max-width: 976px;
    margin: auto;
    margin-top: 90px;
    padding-bottom: 298px;
    display: flex;

}

@media screen and (max-width:768px) {
    .sns {
        justify-content: right;
        padding-right: 2%;
        width: 88.28125vw;
        margin-top: 90px;
        padding-bottom: 111px;
    }
}

@media screen and (max-width: 400px) {
    .sns{
        margin-top: 102px;;
    }
}

.sns-box {
    width: 40px;
    display: flex;

    align-items: center;
    flex-direction: column;
}

@media screen and (max-width:768px) {
    .sns-box {
        float: right;
    }
}


/* ========================================== */
/* <!-- skill start --> */
/* ========================================== */
#skill01{
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}

.skill {
    width: 72.4743777452457158vw;
    max-width: 1366px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    margin-top: -110px;
    font-size: 1.5rem;


}

.skill img {
    width: 100%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);

    opacity: 1;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
    transition: .3s ease-in-out;

}

.skill a :hover  img{
    /*hoverした時の変化*/
    opacity: 0.5;
    /*透過具合を変更したい場合はこの数値を変更*/
}



@media screen and (max-width:768px) {
    .skill {
        margin: 0 0 0;
        font-size: 1.1rem;
        flex-direction: column;
        justify-content: flex-start;
    }


}

.skillbox-01 {
    width: 30%;
    display: flex;
    flex-direction: column;

}

.skillbox-01 img {
    margin-bottom: 6.076134699853587vw;

}

.skillbox-02 {
    width: 35%;
    display: flex;
    flex-direction: column;
}

.lp {
    margin-top: 3vw;
}

.skillbox-03 {
    width: 28%;
    display: flex;
    flex-direction: column;

    position: relative;
}

.skillbox-03 img {
    margin-top: 17.71595900439239vw;


}

@media screen and (max-width:768px) {
    .skillbox-01 {
        width: 75%;
        align-items: center;


    }

    .skillbox-01 img {
        margin-top: 10.15625vw;
        margin-bottom: 0;
        width: 100%;
    }

    .skillbox-02 {
        width: 75%;
        align-items: center;
        margin-bottom: 0;
    }

    .skillbox-02 img {
        margin-top: 5.46875vw;
        width: 100%;
    }

    .skillbox-03 {
        width: 75%;
        align-items: center;
        margin-bottom: 0;

    }

    .skillbox-03 img {
        margin-top: 5.46875vw;
        width: 100%;
    }
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.s-img {
    opacity: 0;
}


#s-name {
    width: 11.713030vw;
    min-width: 168px;
    margin-bottom: 2.41581259150053vw;
    margin-top: 14.56808199121523vw;
    margin-left: auto;
    box-shadow: none
}

@media screen and (max-width:768px) {
    #s-name {
        /* min-width: 186px; */
        width: 24.21875vw;
        justify-content: center;
        margin: auto;
        margin-top: 6.77083333vw;
        margin-bottom: 3.90625vw;

    }

}

@media screen and (max-width:400px) {
    #s-name  {
        min-width: 31.1111vw;
    }

}


.skill p {
    font-size: 1rem;
    text-align: right;
    margin-bottom: 4.319180087847731vw;
    letter-spacing: 1px;
    line-height: 2.2;

}

@media screen and (max-width:768px) {
    .skill p {
        text-align: center;
        margin: auto;

    }

}

@media screen and (max-width:400px) {
    .skill p   {
        font-size: 0.8rem;
    }

}

.skillbox {
    background-image: url("../images/production-backgrpund.jpg");
    width: 100%;
    height: 33.67496339677892vw;
    display: flex;
    justify-content: center;

    position: relative;

}

@media screen and (max-width:768px) {
    .skillbox {
        height: 310.1927083333vw;
    }

}

.skill-name01 {
    position: absolute;
    width: 15.59297218155vw;
    z-index: 10;

    left: 9vw;
    top: -1.5vw;
    transform: rotate(-25deg);
}

@media screen and (max-width:768px) {
    .skill-name01 {
        width: 20.4427083vw;
    }

}

@media screen and (max-width:400px) {
    .skill-name01 {
        width: 21.94444vw;
    }

}


/*矢印が右に移動して背景がつく*/

.skill-more {
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid #707070;
    border-radius: 50px;
    padding: 10px 0;
    display: inline-block;
    width: 16.98389458272328vw;
    height: 4.904831625183016vw;
    text-align: center;
    text-decoration: none;
    color: #707070;
    outline: none;
    background-image: url("../images/more.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 4.392386530014641vw 1.464128843338214vw;

    /*アニメーションの指定*/
    transition: all .2s linear;
}

@media screen and (max-width:768px) {
    .skill-more {
        width: 25vw;
        height: 7vw;
        background-size: 9vw 3vw;
    }
}


@media screen and (max-width:400px) {
    .skill-more  {
        padding: 10px 0;
    }

}

.skill-more:hover {
    /* background:#333; */
    color: #B4657A;
}

/*矢印と下線の形状*/
.skill-more::before {
    content: "";
    /*絶対配置で下線の位置を決める*/
    position: absolute;
    top: 50%;
    right: -1.830161054172767vw;
    /*下線の形状*/
    width: 4.392386530014641vw;
    height: 1px;
    background: #B4657A;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

@media screen and (max-width:400px) {
    .skill-more::before {
        width: 9.4444vw;
        right: -5vw;
    }

}

.skill-more::after {
    content: "";
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 35%;
    right: -1.171303074670571vw;
    /*矢印の形状*/
    width: 1px;
    height: 1.09809663250366vw;
    background: #B4657A;
    transform: skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

@media screen and (max-width:768px) {
    .skill-more::after {
        top: 40%;
    }
}

@media screen and (max-width:400px) {
    .skill-more::after {
        background:none;
    }

}

/*hoverした際の移動*/
.skill-more:hover::before {
    right: -2.928257686676428vw;
}

.skill-more:hover::after {
    right: -2.415812591508053vw;
}


.skill-more-box {
    width: 16.98389458272328vw;
    margin-top: 11.20058565153734vw;
    margin-left: 8.22108345534407vw;
    bottom: 0;

}



@media screen and (max-width:768px) {
    .skill-more-box {
        width: 30.208333vw;
        justify-content: center;
        padding-top: 10.15625vw;
        margin: auto;
    }


}

/* ========================================== */
/*  <!-- concept start -->*/
/* ========================================== */
#concept01{

        display: block;
        padding-top:-200px;
        margin-top: 200px;

}

.concept {
    margin: 30.60029282576867vw auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:768px) {
    .concept {
        margin: 20.703125vw auto;
    }
}

.concept-name-box01 {
    width: 77.08638360175695vw;
    /* max-width: 1053px; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.concept img {
    width: 23.2796486090776vw;
    margin-left: auto;

}

@media screen and (max-width:768px) {
    .concept img {
        width: 30.468755vw;
        margin: auto;
        margin-bottom: 9.505208333vw;
    }
}

@media screen and (max-width:400px) {
    .concept img {
        width: 32.5vw;
        
    }
}

.concept-wapper {
    width: 100%;
    background-image: url("../images/consept-background.png");
    background-size: cover;
    background-position: center;

    position: relative;
}

.border01 {
    height: 1px;
    width: 19.47291361639824vw;
    background-color: #707070;
    top: 4.75818740849195vw;
    right: 5%;

    position: absolute;
}

@media screen and (max-width:768px) {
    .border01 {
        width: 37.6302083333vw;
        top: 5.078125vw;
        right: 0;

    }
}

.border02 {
    height: 11.42020497803807vw;
    width: 1px;
    background-color: #707070;
    top: -4.392386530014641vw;
    right: 9%;

    position: absolute;
}

@media screen and (max-width:768px) {
    .border02 {
        height: 28.776041666vw;
        background-color: #B4657A;
        top: -18.22916666vw;
        right: 29.5572916666vw;

    }
}

#concept-name {
    transform: rotate(90deg);
    height: 1.830161054vw;
    /* 回転後の高さ */
    width: 8.74773060029vw;
    /* 回転後の幅 */

    top: 12vw;
    right: 5.272327964860908vw;

    position: absolute;
}

@media screen and (max-width:768px) {
    #concept-name {
        width: 18.22916666vw;
        height: 3.906253vw;
        top: 13.5vw;
        right: 3.33333vw;

    }
}

@media screen and (max-width:400px) {
    #concept-name {
        width: 20vw;
        height: 4.3vw;
        top: 15vw;
        right: 2vw;

    }
}

.border03 {
    height: 0.8px;
    width: 56.6617862371888vw;
    background-color: #707070;
    bottom: -2.708638360175695vw;
    left: 0;

    position: absolute;
}

.border04 {
    height: 23.64568081991215vw;
    width: 1px;
    background-color: #B4657A;
    bottom: -17.93557833089312vw;
    left: 9%;

    position: absolute;
}

.conceptbox {
    text-align: center;
    margin-top: 13.54319180087848vw;
    margin-bottom: 13.54319180087848vw;
    line-height: 43px;

}

@media screen and (max-width:768px) {
    .conceptbox {
        margin-top: 22.916666vw;

    }
}

@media screen and (max-width:400px) {
    .conceptbox {
        font-size: 0.7rem;
        line-height: 23px;

    }
}



/* ========================================== */
/* <!--service start --> */
/* ========================================== */
#service01{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

.service {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 17.93557833089312vw;
}

@media screen and (max-width:768px) {
    .service {
        margin-top: 39.84375vw;

    }
}

.service-heading {
    margin-bottom: 5.34407027818448vw;
    align-items: center;
    text-align: center;

}


.service-heading img {
    width: 9;
}

@media screen and (max-width:768px) {
    .service-heading img {
        width: 16.927083333vw;

    }

}
@media screen and (max-width:400px) {
    .service-heading img {
        width: 21.666vw;

    }

}



.wrapper {
    width: 73.9385065885798vw;
    max-width: 1366px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width:768px) {
    .wrapper {
        width: 49.8697916666vw;
        flex-direction: column;
        justify-content: center;

    }

}

.servicebox {
    width: 30%;
    text-align: center;
    opacity: 0;

}

@media screen and (max-width:768px) {
    .servicebox {
        width: 49.8697916666vw;
    }

    .servicebox p {
        margin-bottom: 4.2vw;
    }


}
@media screen and (max-width:400px) {
    .servicebox p {
       font-size: 0.8rem;
    }


}


.servicebox img {
    width: 100%;
    margin-bottom: 30px;
    opacity: 0.6;

}

@media screen and (max-width:768px) {
    .servicebox img {
        margin-bottom: 2px;
        margin-top: 2.342606149341142vw;
    }

}



.fadeUp02 {
    animation-name: fadeUpAnime02;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime02 {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================== */
/*  <!-- contact start --> */
/* ========================================== */

.contact {
    margin-top: 18.594436310vw;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
}

@media screen and (max-width:400px) {
    .contact{
        margin-top: 35vw;
    }

}

.boderbox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

}

.boderbox::before,
.boderbox::after {
    content: "";
    display: block;
    width: 37.77452415812592vw;
    height: 2px;
    background-color: #B4657A;
    position: absolute;
    top: 50%;
}

.boderbox::before {
    left: 0;
    transform: translateY(-50%);
}

.boderbox::after {
    right: 0;
    transform: translateY(-50%);
}

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

    .boderbox::before,
    .boderbox::after {
        width: 30.46875vw;
        height: 2px;
    }

}

.boderbox img {
    width: 16.91068814055vw;
    height: 4.75841874084vw;
}

@media screen and (max-width:768px) {
    .boderbox img {
        width: 30.078125vw;
        height: 8.4635416666vw;
    }

}

.contactbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;

    font-size: 1rem;
    text-align: center;
    line-height: 2;

    background-image: url("../images/contact-background.jpg");
    background-size: cover;
    background-position: center;


}

.contactbox img {
    width: 100%;
    width: 8.49194729vw;
    height: 1.756954612vw;
    margin-top: 4.9vw;
}

@media screen and (max-width:768px) {
    .contactbox img {
        width: 17.44791666vw;
        height: 3.6458333vw;
    }

}
@media screen and (max-width:400px) {
    .contactbox img {
        width: 22.7777vw;
        height: auto;
    }

}


.btntextchange {
    /*テキストの基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid #939292;
    border-radius: 50px;
    min-width: 21.5959004923865vw;
    padding: 40px 20px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #9c9c9c;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s;

    font-size: 1.25rem;
    margin-top: 10.80729vw;
}

@media screen and (max-width:768px) {
    .btntextchange {
        font-size: 1rem;
    }

}
@media screen and (max-width:400px) {
    .btntextchange {
        padding: 20px 40px;
        font-size: 0.8rem;
    }

}

.btntextchange img {
    padding: auto;
}

/*hoverした際の変化*/
.btntextchange:hover {
    color: #B4657A;
    background: #fff;


}

.btntextchange span {
    /*絶対配置でテキストの位置を決める*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*アニメーションの指定*/
    transition: all .5s;
    /*ブロック要素にしてテキスト折り返しなし*/
    display: block;
    white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2) {
    opacity: 0;
    /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1) {
    opacity: 0;
    /*透過0に*/
}

.btntextchange:hover span:nth-child(2) {
    opacity: 1;
    /*不透明に*/
}

.contactbox p {
    margin-top: 5.636896046852123vw;
    margin-bottom: 5.7833089vw;
}
@media screen and (max-width:400px) {
    .contactbox p {
        font-size: 0.8rem;
    }

}


footer{
    background-color: #fff;
    color: #707070;
    margin: auto;
   
    
}

footer div{
    display:flex;
    justify-content: flex-end;
    margin: auto;
    text-align: left;
    font-size: 0.8rem;
    padding: 20px  0 ;/*上下は50px、左右は0px*/
}