@charset "utf-8";

body {
    margin: 0 auto;
    font-family: 'Hiragino Mincho ProN', Cochin;
}

a {
    text-decoration: none;
    /*color: #637FBD;*/
}

img {
    max-width: 100%;
    height: auto;
}

/* =======================
.menu-trigger
======================= */
.menu-trigger {
    display: none;
    /*PCの時は消しておく*/
    -webkit-appearance: none;
    /* Crome用　フォ-ム要素の初期化*/
    appearance: none;
    /*フォ-ム要素の初期化*/
    border: none;
    background: transparent;
    /* Firefox用 背景を透過させる設定*/
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    /* ブロック要素とインライン要素の中間の状態の要素*/
    transition: all .4s;
    box-sizing: border-box;
}


.fvSec {
    height: 1010px;
    background: url(../img/fv.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.fvSec header nav {
    width: 640px;
    height: 40px;
    position: absolute;
    top: 12px;
    left: 53%;
}

header nav ul {
    display: flex;
}
header ul li {
    color: #a09c9c;
    font-size: 18px;
    font-family: Cochin;
    padding: 20px;
}
header nav img {
    max-width: 50%;
}

.catchphrase {
    height: 750px;
    background-image: url(../img/キャッチコピー.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aboutSec {
    height: 600px;
    background-image: url(../img/About背景.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.aboutSec h2 {
    position: absolute;
    right: 159px;
    bottom: 147px;
}

.about-container {
    padding-top: 150px;
    justify-content: center;
    display: flex;
}

.aboutSec p {
    color: #ffffff;
    font-family: Zen Maru Gothic;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.05em;
}

.aboutSec .p-wrapper h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 30px;
    letter-spacing: 0.15em;
}

.aboutSec div img {
    max-width: 120%;
    display: block;
}

.p-wrapper {
    width: 430px;
    padding: 18px 20px 0px 20px;
}

.aboutSec .img-wrapper {
    width: 500px;
}
.btn-profile span {
    letter-spacing: 0.15em;

}

.worksSec {
    width: auto;
    background: url(../img/works背景.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
    position: relative;
}

.worksSec h2 {
    display: block;
    text-align: center;
    padding-top: 175px;
    padding-bottom: 100px;
}

.worksSec ul li a {
    color: #ffffff;
}

.worksSec h3 {
    font-size: 14px;
    background-image: url(../img/works-p-div.png);
    text-align: left;
    padding: 20px;
    letter-spacing: 0.05em;
}

.btn-works {
    text-align: center;
    margin-top: 30px;
}



.serviceSec {
    height: 960px;
    background: url(../img/Service背景.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.service-area {
    width: 923px;
    height: 602px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 5px rgb(231 103 169 / 61%);
    display: flex;
    position: absolute;
    left: 18%;
    top: 36%;
    z-index: 1;
}

.service-wrapper h2 {
    padding: 5px;
}

.service-wrapper {
    width: 250px;
    height: 380px;
    margin-left: 70px;
    margin-top: 90px;
}

.service-wrapper ul {
    color: #36546c;
    font-size: 16px;
    font-family: Zen Maru Gothic;
}

.service-wrapper li {
    width: 250px;
    background: linear-gradient(270deg, #38ebba 51%, #6fb1d2 100%, #b3f2ea 51%, #90a3f1 100%);
    padding: 15px;
    margin: 5px;
    letter-spacing: 0.05em;
}

.service-wrapper span {
    width: 250px;
    background: linear-gradient(270deg, #76e9d6 51%, #9faee6 100%, #b3f2ea 51%, #90a3f1 100%);
    margin: 5px;
}

.serviceSec h3 {
    color: #36546c;
    background: linear-gradient(270deg, #b564d9 40%, #ee609c 100%, #b3f2ea 51%, #90a3f1 100%);
    padding: 15px;
    padding: 10px;
    position: absolute;
    left: 40%;
    bottom: 19%;
}

.service-wrapper a {
    width: 170px;
    padding: 5px;
}

.tool-wrapper {
    width: 250px;
    height: 300px;
    color: #ffffff;
    margin-left: 40px;
    margin-top: 90px;
}

.tool-wrapper ul {
    color: #36546c;
    background-repeat: no-repeat;
    font-size: 16px;
    font-family: Zen Maru Gothic;
}

.tool-wrapper li {
    width: 180px;
    background: linear-gradient(270deg, #b564d9 40%, #ee609c 100%, #b3f2ea 51%, #90a3f1 100%);
    padding: 15px;
    margin: 5px;
     letter-spacing: 0.05em;
}

.tool-wrapper a {
    width: 170px;
    padding: 5px;
}

.tool-wrapper h2 {
    padding: 5px;
}

.serviceSec .p-wrapper {
    display: block;
    width: 513px;
    height: 85px;
    color: #36546c;
    position: absolute;
    left: 38%;
    bottom: 162px;
    line-height: 1.7;
}

.serviceSec .p-wrapper p {
    font-family: Zen Maru Gothic;
}

.contactSec {
    height: 529px;
    color: #3c4855;
    margin-bottom: 20px;
}

.contact-wrapper {
    position: relative;
}

.contact-wrapper h2 {
    text-align: center;
    padding-top: 100px;
}

.contact-p-wrapper {
    padding-top: 30px;
}

.contact-wrapper p {
    font-size: 18px;
    font-family: Zen Maru Gothic;
    text-align: center;
    line-height: 1.6;
}

.form-wrapper {
    text-align: center;
    padding: 30px;
}

.info-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-family: Zen Maru Gothic;
}

.info-container .item01 {
    display: flex;
    width: 100px;
    padding: 10px;
}

.info-container .item02 {
    width: 148px;
    padding: 10px;
}

.info-container .item03 {
    width: 196px;
    padding: 10px;
}

.info-container .item04 {
    width: 320px;
    padding: 10px;
}

.item-container-a {
    display: flex;
    margin-left: 121px;
}
.item-container-a .item01 p {
    letter-spacing: 0.05em;
}
.item-container-b {
    display: flex;
}
.item-container-b .item02 p {
    letter-spacing: 0.05em;
}
.item-container-b .item03 p {
    letter-spacing: 0.05em;
}



.footerSec {
    height: 250px;
    background-color: #6d6a6a;
    position: relative;
}

.footer-logo {
    position: absolute;
    left: 9%;
    top: 33%;
}
.footer-logo-rsp {
    display: none;
}
.footerSec ul {
    display: flex;
    font-family: Cochin;
    margin-left: 700px;
    padding-top: 48px;
    line-height: 1.4;
}

.footerSec ul li {
    font-size: 20px;
    margin: 20px;
}

.footerSec ul li a {
    color: #ffffff;
}

.footerSec li span {
    font-size: 14px;
    font-family: Zen Maru Gothic;
}

footer {
    background-color: #323d48;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    font-family: Zen Maru Gothic;
    letter-spacing: 3px;
    padding: 5px;
}
.footerSec ul a:hover {
        color:#93a7d1;
    }














@media screen and (max-width:1024px) {
    .fvSec {
        height: 718px;
        background-size: contain;
        position: relative;
    }

    .fvSec header nav {
        position: absolute;
        top: 0px;
        left: 36%;
    }

    .catchphrase {
        height: 464px;
        background-size: contain;
    }

    .aboutSec h2 {
        width: 200px;
        position: absolute;
        right: 101px;
        bottom: 155px;
    }

    .aboutSec h3 img {
        max-width: 80%;
    }

    .aboutSec div img {
        max-width: 100%;
        display: block;
    }

    .aboutSec .p-wrapper {
        padding: 0px 0px 20px 28px;
    }

    .worksSec h2 {
        padding-top: 135px;
        padding-bottom: 45px;
    }

    .serviceSec {
        height: 1200px;
    }

    .service-area {
        width: 650px;
        height: 800px;
        position: absolute;
        left: 19%;
        top: 23%;
    }

    .serviceSec .p-wrapper {
        position: absolute;
        left: 9%;
        bottom: 154px;
        line-height: 1.7;
    }

    .serviceSec h3 {
        position: absolute;
        left: 12%;
        bottom: 12%;
    }

    .contactSec {
        background-size: auto;
        height: 400px;
    }

    .contact-wrapper h2 {
        padding-top: 0px;
    }

    .contact-wrapper p {
        padding-top: 0px;
    }

    .item-container-a {
        font-size: 14px;
        display: flex;
        margin-left: 136px;
    }

    .item-container-b {
        font-size: 14px;
        display: flex;
        margin-left: 0px;
    }
 .footer-logo-rsp {
        display: none;
    }

    .footerSec ul {
        margin-left: 385px;
    }
}


@media screen and (max-width:768px) {
    .fvSec {
        height: 537px;
        background-image: url(../img/fv.png);
        background-repeat: no-repeat;
    }

    .fvSec header nav {
        position: absolute;
        top: -10px;
        left: 13%;
    }

    header nav ul {
        display: flex;
    }

    header nav img {
        max-width: 50%;
    }

    header nav img {
        max-width: 50%;
    }

    .catchphrase {
        height: 348px;
    }

    .aboutSec {
        height: 450px;
    }

    .about-container {
        padding: 0px 5px 0px 35px;
        justify-content: space-evenly;
    }

    .aboutSec h2 {
        position: absolute;
        right: 101px;
        bottom: 57px;
    }
    .aboutSec h4 {
        line-height: 1.4;
    }

    .aboutSec p {
        font-size: 14px;
    }

    .aboutSec p br {
        display: none;
    }

    .aboutSec .p-wrapper {
        padding: 60px 0px 20px 0px;
        width: 250px;
    }

    .aboutSec .img-wrapper {
        width: 340px;
        padding-top: 135px;
    }

    .btn-profile {
        padding-top: 15px;
        text-align: center;
    }

    .worksSec h2 {
        padding-top: 135px;
    }

    .serviceSec {
        height: 1700px;
    }

    .service-area {
        display: block;
        width: 500px;
        height: 1200px;
        position: absolute;
        left: 18%;
        top: 23%;
    }

    .service-wrapper {
        width: 250px;
        height: 380px;
        margin-left: 113px;
        margin-top: 90px;
    }
    .tool-wrapper {
        width: 250px;
        height: 205px;
        color: #ffffff;
        margin-left: 115px;
        margin-top: 140px;
    }

    .tool-wrapper h2 {
        position: absolute;
        left: 23%;
        top: 47%;
    }

    .serviceSec h3 {
        width: 250px;
        padding: 10px;
        position: absolute;
        left: 24%;
        bottom: 11%;
    }

    .serviceSec .p-wrapper {
        width: 300px;
        position: absolute;
        left: 20%;
        bottom: 260px;
        line-height: 1.7;
    }

    .serviceSec .p-wrapper br {
        display: none;
    }

    .info-container {
        display: block;
    }

    .contactSec {
        height: 460px;
    }

    .contact-wrapper {
        width: 600px;
        height: 315px;
        margin-left: 12%;
    }

    .contact-wrapper p {
        font-size: 14px;
        padding-top: 20px;
    }
    .info-container .item03 {
    width: 176px;
    padding: 10px;
}
    .item-container-a {
        font-size: 14px;
        display: flex;
        width: 552px;
        margin-left: 223px;
    }

    .item-container-b {
        font-size: 14px;
        display: flex;
        margin-left: 148px;
        margin-top: 20px;
    }

    .form-wrapper img {
        max-width: 70%;
    }

    .footerSec {
        height: 170px;
    }

    .form-rsp-wrapper {
    display: none;
}
.footer-logo-rsp {
    display: none;
}
    .footerSec ul {
        margin-left: 300px;
    }

    .footerSec ul li {
        font-size: 16px;
        margin: 10px;
    }

    .footerSec ul li span {
        font-size: 12px;
    }
}



/*--------スマホサイズ-------------*/
@media screen and (max-width:425px) {
    .fvSec {
        height: 500px;
        background-image: url(../img/fvrp.png);
        background-size: cover;
    }
    header {
        width: auto;
        height: 500px;
    }
    header ul li {
        padding: 0px;
    }

    .concept-wrapper {
        position: absolute;
        left: 35%;
        top: 50%;
    }

    .concept-wrapper img {
        max-width: 40%;
    }

    .logo-wrapper {
        position: absolute;
        left: 30%;
        top: 30%;
    }

    .logo-wrapper img {
        max-width: 100%;
    }

    .aboutSec {
        height: auto;
        padding-bottom: 40px;
    }

        .aboutSec h2 {
        position: absolute;
        left: 25%;
        top: 40px;
        padding: 10px;
    }

    .aboutSec h3 {
        font-size: 14px;
        padding: 10px;
        margin: 20px;
    }
    .aboutSec .p-wrapper {
        width:350px;
        text-align: center;
        padding-left: 50px;
        padding-top: 150px;
    }

    .about-container {
        display: block;
        padding-left: 0px;
        padding-top: 0px;
    }
    .aboutSec .p-wrapper h4 {
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 14px;
    }

    .aboutSec .img-wrapper {
        width: 340px;
        margin-left: 80px;
        padding-top: 18px;
    }
    .aboutSec div img {
        max-width: 90%;
    }

    .p-wrapper p {
        font-size: 12px;
    }

    .btn-profile {
        height: 50px;
    }

    .worksSec {
        height: auto;
        padding-bottom: 40px;
        background: none;
        background-color: #ffffff;
        position: relative;
    }

    .worksSec h2 {
        padding: 50px 0px 50px 0px;
    }


    .serviceSec {
        height: 1190px;
        background-position: center;
        position: relative;
    }

    .service-area {
        display: block;
        width: 300px;
        height: 900px;
        position: absolute;
        left: 13%;
        top: 19%;
    }

    .service-wrapper {
        width: 250px;
        height: auto;
        margin-top: 0px;
        margin-left: 0px;
    }

    .service-wrapper h2 {
        display: block;
        padding-top: 5px;
    }

    .tool-wrapper {
        margin-left: 0px;
        margin-top: 68px;
    }

    .tool-wrapper h2 {
        position: absolute;
        left: 0%;
        top: 465px;
    }

    .service-wrapper ul {
        font-size: 14px;
        text-align: left;
    }

    .tool-wrapper ul {
        font-size: 14px;
        text-align: left;
    }

    .serviceSec h3 {
        font-size: 12px;
        width: 270px;
        position: absolute;
        left: 2%;
        bottom: 4%;
    }

    .serviceSec .p-wrapper {
        width: 250px;
        padding-left: 0px;
        position: absolute;
        left: 3%;
        bottom: 93px;
    }



    .contactSec {
        text-align: center;
        height: 546px;
    }

    .contact-wrapper {
        width: auto;
        height: auto;
        text-align: center;
        margin-left: 0%;
    }
    .contact-wrapper p br {
        display: none;
    }
    .contact-p-wrapper  {
        padding: 10px 20px 20px 20px;
        margin: 0px;
    }
    .contact-wrapper h2 {
        width: auto;
        text-align: center;
    }
    .item-container-a {
        width: auto;
        margin-top: 20px;
    }

    .item-container-a img {
        display: none;
    }

    .item-container-b img {
        display: none;
    }

    .item01 p {
        font-size: 14px;
    }

    .item-container-b {
        display: block;
    }

    .form-wrapper {
        text-align: center;
        padding: 0px;
    }

    .form-wrapper img {
        max-width: 100%;
    }

    .info-container {
        margin-top: 0px;
    }

    .item-container-a {
        font-size: 12px;
        display: flex;
        margin-left: 12%;
    }

    .item-container-b {
        display: flex;
        font-size: 12px;
        margin-left: 26%;
        margin-top: 37px;
    }

    .info-container .item01 {
        width: auto;
        margin-left: 58px;
        text-align: center;
        background-color: #c6cacf;
    }

    .info-container .item02 {
        width: auto;
        padding: 10px;
        border: 1px solid #c6cacf;
    }
        .info-container .item03 {
            font-size: 10px;
        width: 72px;
        padding: 10px;
        background-color: #c6cacf;
    }
    .info-container .item04 {
        width: 100px;
        border: 1px solid #c6cacf;
    }

    .item01 p {
        font-size: 12px;
        font-weight: bold;
    }

    .item03 p {
        font-weight: bold;
    }
          .item-container-a img {
        display: none;
    }
        .item-container-b img {
        display: none;
    }
   .footerSec {
        width: auto;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
    }
.footer-logo {
    display: none;
}
.footer-logo-rsp {
    display: block;
    text-align: center;
    margin-top: 20px;
}
    .footer-logo-rsp img {
        max-width: 30%;
    }

    .footerSec ul {
        display: block;
        margin-left: 0%;
        padding-top: 10%;
        text-align: center;
    }

    .footerSec ul li {
        font-size: 16px;
    }

    .footerSec ul li span {
        font-size: 10px;
    }

    footer {
        font-size: 12px;
    }
    .footerSec img {
        max-width: 30%;
        position: absolute;
        left: 151px;
        top: 25px;
    }
}

@media screen and (max-width:375px) {
    header {
        width: auto;
        height: 537px;
    }
    .catchphrase {
        height: 175px;
    }
        .aboutSec h2 {
        position: absolute;
        left: 20%;
        top: 40px;
        padding: 10px;
    }
        .about-container {
        display: block;
        padding-left: 0px;
        padding-top: 0px;
    }
    .aboutSec .p-wrapper {
        width: 300px;
        text-align: center;
        padding: 150px 10px 0px 10px;
        letter-spacing: 0.05em;
    }
    .aboutSec div img {
        max-width: 80%;
    }
    .aboutSec .img-wrapper {
        width: 340px;
        margin-left: 37px;
        padding-top: 18px;
    }
    .aboutSec h3 {
        padding: 6px;
    }
    .about-container h4 {
        font-size: 15px;
        letter-spacing: 0.15em;
    }

    .p-wrapper {
        margin-left: 7%;
    }

    .img-wrapper {
        margin-left: 60px;
    }
    .worksSec h2 img {
        max-width: 50%;
    }
    .service-wrapper {
        margin-left: 0px;
        margin-top: 70px;
    }
    .service-wrapper h2 {
        display: block;
        position: absolute;
        left: 2%;
        top: 26px;
    }

        .tool-wrapper h2 {
        display: block;
        position: absolute;
        left: 2%;
        top: 489px;
    }
    .service-area {
        position: absolute;
        left: 10%;
        top: 20%;
    }

        .serviceSec .p-wrapper {
        width: 270px;
        padding-left: 0px;
        position: absolute;
        left: -4%;
        bottom: 78px;
    }
    .serviceSec h3 {
        font-size: 12px;
        width: 260px;
        position: absolute;
        left: 2%;
        bottom: 2%;
    }
    .tool-wrapper {
        margin-left: 0px;
    }
    .contactSec {
        height: 540px;
    }
    .contact-wrapper {
        width: 250px;
        height: 330px;
        margin-left: 15%;
    }
        .info-container .item01 {
        margin-left: 38px;
    }
    .info-container .item02 {
        margin-left: 0px;
    }
    .item-container-a {
        margin-top:  33px;
    }
    .item-container-b {
    margin-left: 86px;
    margin-top: 11px;
    }
    .item02 p {
        line-height: 1.4;
    }
    .item04 p {
        text-align: left;
        line-height: 1.4;
    }
    .item04 br {
        display: none;
    }

    .footerSec img {
        max-width: 30%;
        position: absolute;
        left: 133px;
        top: 15px;
    }
    .footerSec Ul {
        padding-top: 5%;
    }
}


@media screen and (max-width:320px) {
    .about-container {
        padding: 0px;
        margin: 0px;
    }

    .p-wrapper {
        margin-bottom: 20px;
        background-color: rgba(177, 181, 181, 0.22);
        padding: 10px;
        margin-left: 0%;
    }

    .worksSec {
        height: 529px;
    }

    .serviceSec {
        margin-top: 70px;
    }

    .service-wrapper h2,
    .tool-wrapper h2 {
        display: block;
        position: absolute;
        left: 0%;
        top: -50px;
    }

    .service-wrapper,
    .tool-wrapper {
        margin-left: 33px;
    }

    .serviceSec h3 {
        font-size: 12px;
        position: absolute;
        left: 14%;
        bottom: 5%;
    }

    .contactSec {
        margin-top: 20px;
    }

    .contact-p-wrapper {
        padding: 30px;
    }

    .contact-p-wrapper p br {
        display: none;
    }

    .form-wrapper {
        margin-top: 0px;
    }
    

    .footerSec {
        height: 250px;
    }

    .footerSec ul {
        display: block;
        padding-top: 23px;
    }

    .footerSec ul li {
        width: 300px;
        font-size: 12px;
    }
    .footerSec img {
        max-width: 30%;
        text-align: center;
    }
}





/*==================================================
スライダーのためのcss
===================================*/
.slider {
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 80%;
    margin: 0 auto;
}

.slider img {
    width: 100%;
    /*スライダー内の画像を横幅100%に*/
    height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin: 0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;
    /*絶対配置にする*/
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #637FBD;
    /*矢印の色*/
    border-right: 2px solid #637FBD;
    /*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 16px;
    /*ドットボタンのサイズ*/
    height: 16px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 20%;
    background: #ffffff;
    /*ドットボタンの色*/
}

.slick-dots .slick-active button {
    background: #637FBD;
    /*ドットボタンの現在地表示の色*/
}

/*-----------------------
矢印が動いてスクロールを促す
-------------------------*/

/*スクロールダウン全体の場所*/
.scrolldown4 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 1%;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
    0% {
        bottom: 1%;
    }

    50% {
        bottom: 3%;
    }

    100% {
        bottom: 1%;
    }
}

/*Scrollテキストの描写*/
.scrolldown4 span {
    /*描画位置*/
    position: absolute;
    left: -20px;
    bottom: 10px;
    /*テキストの形状*/
    color: #3a2c2c;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #3a2c2c;
    transform: skewX(-31deg);
}

.scrolldown4:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: 0;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #3a2c2c;
}

/* fv ふわっと上から */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

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

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

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
/*nav {
    width: 15%;}
    /*navの外側のheaderなどに横幅を指定する場合は削除してください*/



nav ul {
    list-style: none;
    text-align: center;
}


/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
    position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
    display: block;
    text-decoration: none;
    color: #243c58;
    padding: 20px;
    transition: all .3s;
}

nav ul li a:hover {
    color: #a09c9c;
}

/*==矢印の設定

*2階層目を持つliの矢印の設定
nav ul li.has-child::before {
    content: '';
    position: absolute;
    right: 115px;
    top: 45px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #243c58;
    border-right: 2px solid #243c58;
    transform: rotate(45deg);
}

/*3階層目を持つliの矢印の設定
nav ul ul li.has-child::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 21px;
    width: 6px;
    height: 6px;
    /*border-top: 2px solid #a09c9c;
    border-right: 2px solid #a09c9c;
    transform: rotate(45deg);
}

矢印はデザイン上、消す方向----*/

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
    /*絶対配置で位置を指定*/
    position: absolute;
    left: 0%;
    top: 50px;
    z-index: 4;
    /*形状を指定*/
    background: none;
    /* 枠線　*/
    /*border: 2px solid #a09c9c;*/

    width: 250px;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover>ul,
nav li.has-child ul li:hover>ul,
nav li.has-child:active>ul,
nav li.has-child ul li:active>ul {
    visibility: visible;
    opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
    font-size: 14px;
    color: #243c58;
    /*制作の流れと料金表の間の枠線*/
    border-bottom: solid 1px rgba(255, 255, 255, 0.6);
    /*Service navの下層navの余白*/
    padding: 10px;
}

nav li.has-child ul li:last-child>a {
    border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
    background: #789be69f;
}

/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul {
    top: 0;
    left: 182px;
    background: #66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active {
    background: #d78b43;
}


/*==768px以下の形状*/

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

    nav ul li.has-child::before {
        content: '';
        position: absolute;
        right: 5px;
        top: 22px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #fcf8f8;
        border-right: 2px solid #fcf8f8;
        transform: rotate(45deg);
    }

    /*矢印の向き*/
    nav ul li.has-child::before,
    nav ul ul li.has-child::before {
        transform: rotate(135deg);
        left: 20px;
    }

    nav ul li.has-child.active::before {
        transform: rotate(-45deg);
    }

}

/*==559px以下の形状*/
@media screen and (max-width:559px) {
    nav ul li a {
        color: #ffffff;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    nav li.has-child ul,
    nav li.has-child ul ul {
        width: 123px;
    }
    
    nav li.has-child ul li a {
        display: block;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 12px;
        color:  #ffffffea;
        border-bottom: none; /*目立つので消去*/
        padding: 0px;
    }
}

/*-------------------------
ボタン　グラデーションが流れる
---------------------------*/
.gradient1 {
    /*ボタンの形状*/
    display: inline-block;
    color: #fff;
    padding: 18px 60px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #253a4b 51%, #507da0 100%, #b3f2ea 51%, #90a3f1 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;
}

/*hoverした際の、背景の場所とテキスト色の変更*/
.gradient1:hover {
    color: #fff;
    background-position: 99% 50%;
}

    /*----- スマホ ハンバーガーメニュー ----- */
@media screen and (max-width: 559px) {
    .menu-trigger {
        width: 56px;
        height: 60px;
        /*positionで画面左上に絶対配置*/
        position: absolute;
        top: 0;
        left: 0;
        /*要素の重なり、上のレイヤーと同じ考えかた*/
        z-index: 2;
        /*クリックした際のボタン周りの線を消す*/
        outline: none;
    }

    .menu-trigger span {
        position: absolute;
        left: 50%;
        width: 32px;
        height: 2px;
        background-color: #2c2a2a;
        /*menu-trigger内のspan全体を中心位置に揃える設定*/
        transform: translate(-50%, -50%);
    }

    .menu-trigger span:nth-of-type(1) {
        top: 16px;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 50%;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 14px;
    }

    /*.activeが付いているものは
クリックした際した後の表示を設定しています。*/
    .menu-trigger.active span:nth-of-type(1) {
        top: 49%;
        /* 変形の設定　右側の軸は変えずに左側を傾けている */
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
        /*透過の指定で消してる*/
    }

    .menu-trigger.active span:nth-of-type(3) {
        bottom: 49%;
        /* 変形の設定　右側の軸は変えずに左側を上に傾けている */
        transform: translate(-50%, -50%) rotate(45deg);
    }

    /*----- スマホ ナビゲーション ----- */
    #global-nav {
        display: none;
        /* クリックする前は消えてほしい*/
        /*width: 100vw;
        /*画面横幅めいいっぱい広げる*/
        height: auto;
        /*画面縦幅めいいっぱい広げる*/
        background:rgb(33 33 31 / 63%);
        margin: 0;
        margin: 0;
        padding: 90px 5% 0;
        /*positionと組み合わせページをスクロールした場合も同じ位置に常に置く設定　transrateXと合わせてど真ん中に位置を合わせる設定*/
        position: fixed;
        top: 0;
        transform: translateX(-50%);
        z-index: -1;
        /* 何かしらの要素の背面に設置*/
    }

    #global-nav.active {
        display: block;
        /* クリックした時に表示*/
        z-index: 1;
        /* 何かしらの要素の全面に設置*/
        /*height: 500px;*/
    }

    #global-nav ul {
        /* display:flex;を解除して、たて並びにしている*/
        display: block;
        margin: 0;
        z-index: 2;
    }

    #global-nav li,
    #global-nav li:last-child {
        /*画面横にめいいっぱい伸ばしている設定*/
        width: auto;
        align-items: center;  /* 縦位置を揃える */
        padding-left: 41%;
    }

    #global-nav li a {
        font-size: 14px;
    }
    }

/*
@media screen and (max-width: 375px) {
        #global-nav.active {
        display: block;
        z-index: 1;
        width: 375px;
        height: 447px;
    }
    #global-nav ul {
        /* display:flex;を解除して、たて並びにしている
        display: block;
        margin: 0;
        z-index: 2;
        width: 375px;
    }
}
*/