@charset "UTF-8";

/* CSS Document */
/*スマホ版の実装*/
main {
    /*background-color: #ffffff;
    */
}

#first-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* カスタムプロパティ未対応ブラウザ用のフォールバック */
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
}
/*PC版の実装*/
#symbols {
    height: 0;
    width: 0;
    display: none;
}

#bganime {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -99999;
    /*  background-image: url(pcview.webp);
     background-size: cover;*/
}

#left-top {
    position: fixed;
    left: 0;
    width: 800px;
    height: 800px;
}

#left-top .blue {
    position: relative;
    left: -375px;
}

#left-top .yellow {
    position: relative;
    left: -300px;
    top: -490px;
}

#right-top {
    position: fixed;
    right: -270px;
    top: -200px;
    width: 700px;
    height: 700px;
}

#left-bottom {
    position: fixed;
    left: -320px;
    bottom: -350px;
    width: 650px;
    height: 650px;
}

#left-bottom .green {
    position: absolute;
    right: 0;
    top: 0;
}

#right-bottom {
    position: fixed;
    right: -50px;
    float: right;
    bottom: -670px;
    width: 700px;
    height: 700px;
}

#right-bottom .red {
    position: absolute;
    top: -145px;
    right: -190px;
}

#right-bottom .turquoise {
    position: absolute;
    top: -100px;
    right: -80px;
}

/*ブレンドモード*/
.green,
#green {
    mix-blend-mode: difference;
}

.turquoise,
#turquoise {
    mix-blend-mode: plus-lighter;
}

#right-top,
.purple,
#purple {
    mix-blend-mode: plus-lighter;
}

.yellow,
#yellow {
    mix-blend-mode: plus-lighter;
}

#left-bottom {
    mix-blend-mode: difference;
}

/*モバイル位置調整*/
@media only screen and (max-width: 767px) {
    #left-top .blue {
        position: relative;
        top: -40px;
        left: -350px;
    }

    #left-top .yellow {
        position: relative;
        left: -275px;
        top: -550px;
    }

    #left-bottom .green {
        position: absolute;
        right: 0;
        top: 0;
    }

    #right-bottom .red {
        position: absolute;
        top: -130px;
        right: -100px;
    }

    #right-bottom .turquoise {
        position: absolute;
        top: -100px;
        right: -100px;

    }

    #right-top {
        right: -475px;
        top: -485px;
        width: 1200px;
        height: 1200px;
    }

    #right-top .purple {
        position: relative;
        left: 25px;
        top: -130px;
    }

    #left-bottom {
        left: -80px;
        top: 450px;
        width: 350px;
        height: 350px;
    }

    #left-bottom .green {
        position: absolute;
        right: 150px;
        top: 20px;
    }

    #right-bottom {
        transform: rotate(-10deg);
        right: -50px;
        top: 645px;
        width: 400px;
        height: 400px;
    }

    /*モバイル色調整*/


}

/*アニメーション設定*/
.blue {
    fill: #338ACB;
    animation: moveLeftRight 8s ease-in-out infinite alternate;
}

@keyframes moveLeftRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-30px);
    }
}

.yellow {
    fill: #FFD800;
    animation: moveUpDown 8s ease-in-out infinite alternate;
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50px);
    }
}

.purple {
    fill: #7070D1;
    animation: skewAndRotate 8s ease-in-out infinite alternate;
}

@keyframes skewAndRotate {
    0% {
        transform: skewX(0deg) skewY(0deg) rotateZ(0deg);
    }

    100% {
        transform: skewX(8deg) skewY(8deg) rotateZ(2deg);
    }
}

.green {
    fill: #30B484;
    animation: scaleAndMove 4s ease-in-out infinite alternate;
}

@keyframes scaleAndMove {
    0% {
        transform: translateX(0) translateY(0) scaleX(1) scaleY(1);
    }

    100% {
        transform: translateX(2%) translateY(2%) scaleX(1.1) scaleY(1.1);
    }
}

.red {
    fill: #E9545E;
    animation:
        /*skewAnimation 6s ease-in-out infinite alternate,*/
        rotateZAnimation 10s ease-in-out infinite alternate;
    /*transform-origin: center;*/
}

@keyframes skewAnimation {
    0% {
        transform: skew(0deg, 0deg);
    }

    100% {
        transform: skew(-70deg, 10deg);
    }
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

@keyframes rotateZAnimation {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-10deg);
    }
}

.turquoise {
    fill: #0BB9D7;
    animation: scaleAndRotate 10s cubic-bezier(0.19, 1, 0.22, 1) infinite alternate, wiggle 8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes scaleAndRotate {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes wiggle {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }
}

/*アニメーション終了*/





























/*ここから実装BS*/

/*スマホの基本設定*/

/*fontisze*/
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.f10{
    font-size: 2.66vw;
}
.f11{
    font-size: 2.93vw;
}
.f12{
    font-size: 3.2vw;
}
.f1225{
    font-size: 3.266vw;
}
.f13{
    font-size: 3.46vw;
}
.f14{
    font-size: 3.73vw;
}
.f1425{
    font-size: 3.8vw;
}
.f16{
    font-size: 4.266vw;
}
.f18{
    font-size: 4.8vw;
}
.f20{
    font-size: 5.33vw;
}
.f24{
    font-size: 6.4vw;
}
.f27{
    font-size: 7.2vw;
}
.f30{
    font-size: 8vw;
}
.f32{
    font-size: 8.533vw;
}
.s-none{
    display: none;
}
.back{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*スマホでは表示をしない*/
.heder-a{
    display: none;
}
.logo svg{
    fill:#373737;
}
.ham-s1.bg-none{
    transform: translateY(1vw)rotate(40deg) ;
    transition: 0.3s;
}
.ham-s2.bg-none{
    transform: translateY(-0.75vw)rotate(-40deg);
    transition: 0.3s;
}
nav.bg-none{
    z-index: 100;
}
 #main  {
    transition: all 0.2s linear; /* 全ての変化を0.2秒かけて行う */
  }
#left-top, #right-bottom, nav{
    transition: all 0.2s ease; 
}
#bganime,.logo svg{
    transition: all 0.5s ease; 
}
  #left-top, #right-bottom, #main, .logo svg, nav {
    opacity: 1; /* 初期は不透明 */
  }

header{
    height: 17.948vw;
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}
.logo{
    width: 56.94vw;
    margin-left: 4.61538vw;
}
.hamberger{
    width: 10.256vw;
    height: 10.256vw;
    background-color: #373737;
    border-radius: 50%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    margin-right: 4.102vw;
}
.ham-s1,.ham-s2{
    background-color: #FFFFFF;
    width: 3.846vw;
    height: 0.3vw;
    display: block;
}
.ham-s1{
    margin-top: 4.1vw;
    transition: .5s;
}
.ham-s2{
    margin-bottom: 4.1vw;
    transition: .5s;
}

/*グローバルメニュー*/
nav{
    z-index: -10000;
    position: fixed;
    opacity: 0;
    width: 100%;
    height: 100vh;
}
.nav-in{
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}
.nav1{
    top: 32.8vw;
    color: #ffffff;
}
.nav2{
    top: 49.8vw;
    color: #ffffff;
}
.nav3{
    top: 66.4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 27.46vw;
    font-weight: 300;
    color: #ffffff;
}
.nav3 a{
        color: #ffffff;
}
.nav4{
    top:105.3vw;
    color: #ffffff;
}
.nav5{
    top: 122.1vw;
    color: #FFD800;
}
.nav6{
    top: 32.8vw;
    left: 57.8vw;
    color: #ffffff;
}
.nav7{
    top:105.3vw;
    left: 57.8vw;
    color: #ffffff;
}
.nav8{
    top: 122.1vw;
    left: 57.8vw;
    color: #ffffff;
}
.nav9{
    top: 151.46vw;
    left: 4.8vw;
    color: #ffffff;
}
.nav1,.nav2,.nav3,.nav4,.nav5{
    left: 12.533vw;
}

/*ファーストビューFV*/
.first-view h1{
    line-height: 1.6;
    top: 54vw;
    left: 4.8vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
}
.first-view p{
    top: 82.5vw;
    left: 5.9vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
}


/*ここからコンテンツ０*/
.content0{
    height: 405.06vw;
    background-color: rgba(16,40,107,0.8);
    border-radius: 6vw;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.c0h1,.c0h2,.c0in h3{
    color: #FFD800;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 600;
}
.c0h1{
    top: 12.53vw;
    left: 4.26vw
}
.c0h2{
    top: 23.46vw;
    left: 4.26vw;
}
.c0in p{
    color: #D5D3D3;
    display: inline;
    margin-left: 5.7vw;
    line-height: 1.65;
    margin-top: 3vw;
    font-weight: 600;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
}
.maru{
    background-color: #FFB100;
    width: 4.266vw;
    height: 4.266vw;
    border-radius: 3vw;
}
.c0{
    height: 132vw;
    top: 37.333vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 4.26vw;
}
.c0in{
    display: flex;
    flex-direction: column;
}
.c0in-in{
    display: flex;
    align-items: center;
}
.c0in-in h3{
    margin-left: 1.3vw;
}
.c0in2{
    width:  86.6vw;
    height: 37.93vw;
    background-image: url("../images/c0@3x.webp");
    top: 170.93vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.c0in3-h3, .c0in3-p{
    color: #070753;
    font-weight: 600;
}
.c0in3-h3{
    top: 245.3vw;
    left: 16.46vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c0in3-p{
    left: 16.46vw;
    top: 255vw;
    line-height: 2.5;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c0in3,.c0in4{
    background-color: #EDF2F8;
    height: 70.4vw;
    width: 70.4vw;
    border-radius: 3vw;
    transform: rotate(-22deg);
    top: 231vw;
    left: 6.5vw;
}
.c0in4{
    background-color: #D9E6F5;
    transform: rotate(-35deg);
}
.c0in5{
    background-image: url("../images/c0imag-bottom@3x.webp");
    height: 56.53vw;
    width: 84.26vw;
    right: 0;
    top: 312.26vw;
}

.content0-1{
    margin-top: -30vw;
}

.slide1 .sl1img1,.slide1 .sl1img2{
    width: 148.5vw;
     margin-left: 10vw;
}
.content0-2{
    margin-bottom: auto;
}

/*svgスクロールアニメーション*/
.content1{
    height: 160vw;
    background-image: url("../images/make-s@3x.webp");
    display: flex;
    justify-content: center;
    align-items: center;
}
.content1 img{
    width: 98.62vw;
}
/*コンテンツ２、プランとか*/
.content2{
    height: 765.5vw;
    background-color: rgba(255,255,255,0.35);
    border-top-left-radius: 6vw;
    border-top-right-radius: 6vw;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-top: -8vw;
    overflow: hidden;
}
.c2in-plan{
    margin-top: 9vw;
}
.c2h3{
    text-align: center;
    color:#373737;
    margin-top: 5vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2h3 span{
    color: #FF9300;
}
.c2h3:before{
    content: "";
    border-top: 0.6vw solid #373737;
    display: inline-block;
    width: 15vw;
    height: 0.1vw;
    margin-bottom: 1vw;
    margin-right: 2vw;
}
.c2h3:after{
    content: "";
    border-top: 0.6vw solid #373737;
    display: inline-block;
    width: 15vw;
    height: 0.1vw;
    margin-bottom: 1vw;
    margin-left: 2vw;
}
.plantop-svg{
    background-image: url("../images/Plan.svg");
    width: 40.8vw;
    height: 14.93vw;
    margin-top: 14.66vw;
    margin-left: 54vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2h2{
    text-align: center;
    line-height: 1.65;
    color: #373737;
    margin-right: 11vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2h2-2{
    margin-left: 16vw;
    margin-right: auto;
}
.plan1{
    height: 100vw;
    background-color: aqua;
}
.plan2{
    background-color: aquamarine;
}
.plan3{
    background-color: black;
}
.slick-next:before,.slick-prev:before{
    background-image: url("../images/next.svg");
    height: 10.13vw;
    width: 4.152vw;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}
.slick-prev:before{
    background-image: url("../images/prev.svg");
}
.slick-next:before ,.slick-prev:before{
    font-family: none;
    font-size: 0;
    line-height: 0;
    opacity: none;
    color: none;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing:none;
}
.c2in-plan .slick-next{
    right: 7.2vw;
    top: 132.2vw;
}
.c2in-plan .slick-prev{
    left: 7.2vw;
    top: 132.2vw;
}
.slick-dots {
    top: 135vw;
    display: flex;
    justify-content: space-evenly;
}
.slick-dots li button:before {
    line-height: 0;
    font-size: 3.9vw;
    width: 3.9vw;
    height:  3.9vw;
    opacity: 0.45;
}
#slick-slide-control10:before{
    color: #23BC46;
    left: 4vw;
}
#slick-slide-control11:before{
    color: #2364BC;
}#slick-slide-control12:before{
    color: #E04166;
    left: -4vw;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
}
.c2in-plan .draggable{
    height: 124vw;
}
/*料金プラン*/
.slick2{
    text-align: center;
}
.plan1{
    width: 75.26vw!important;
    height: 117.6vw;
    border-radius: 4vw;
    background-color: #FFFFFF;
}
.plan-top{
    width: 100%;
    height: 5.06vw;
    background-color: #23BC46;
    top: 0;
    border-top-left-radius: 4vw;
    border-top-right-radius: 4vw;
}
.plan2 .plan-top{
    background-color: #2364BC;
}
.plan3 .plan-top{
    background-color: #E04166;
}
.plan1 h3{
    top: 13vw;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    white-space: nowrap;
}
.plan1 .plan-top-p{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: 600;
    top: 26.13vw;
        left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
     white-space: nowrap;
}
.plan1 .plan-top-p span{
   font-family: "Sawarabi Gothic";
   font-weight: 300;
}
.plan2 .plan-top-p span{
    color: #E04166;
}
.plan-mid{
    height: 33.6vw;
    width: 59.46vw;
    border-top: solid 0.6vw #23BC46;
    border-bottom: solid 0.6vw #23BC46;
    top: 37.8vw;
    box-sizing: border-box;
        left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.plan-mid .s-none{
        display: none!important;
    }
.plan2 .plan-mid{
    border-top: solid 0.6vw #2364BC;
    border-bottom: solid 0.6vw #2364BC;
}
.plan3 .plan-mid{
    border-top: solid 0.6vw  #E04166;
    border-bottom: solid 0.6vw  #E04166;
}
.plan1 .plan-mid img{
    width: 43.82vw;
    height: 11.11vw;
}
.plan2 .plan-mid img, .plan3 .plan-mid img{
    width: 43.82vw;
    height: 26.4vw;
}
.plan-bottom{
    height: 30.933vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 600;
    top: 79.2vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    white-space: nowrap;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.plan3 .plan-bottom{
    height: 36.53vw;
    top: 76vw;
}
.plan-bottom div{
    width: 60.93vw;
    height: 6.933vw;
    background-color: #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4vw;
}
.plan-back{
    width: 57.3vw;
    height: 52vw;
    background-color: #23BC46;
    z-index: -1;
    top: 70.5vw;
    right: -5.5vw;
    border-bottom-right-radius: 4vw;
}
.plan2 .plan-back{
    background-color: #2364BC;
}
.plan3 .plan-back{
    background-color: #E04166;
}
/*オプション箇所*/
.c2in-option{
    background-color: #C6C6C6;
    width: 85.33vw;
    height: 70.933vw;
    border-radius: 4vw;
    overflow: auto;
    margin: 0 auto;
    margin-top: 27vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2in-option h3{
    text-align: center;
    margin-top: 5.6vw;
    color: #373737;
}
.c2in-option ul{
    margin-top: 4.1vw;
    margin-left: 10.8vw;
    color: #373737;
    font-weight: 600;
}
.c2in-option li{
    margin-top: 3vw;
    letter-spacing: 0.15vw;
    list-style: none;
}
.c2in-option li:before{
    content: "";
    display: inline-block;
    background-color: #373737;
    height: 1.7vw;
    width: 1.7vw;
    border-radius: 4vw;
    margin-right: 2vw;
    margin-bottom: 0.3vw;
}

/*その他サービス*/
.c2in-option2{
    width: 85.33vw;
    height: 104.2vw;
    background-color: #C6C6C6;
    margin: 0 auto;
    border-radius: 4vw;
     overflow: auto;
    text-align: center;
    margin-top: 5.5vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2in-option2 h3{
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin-top: 5.6vw;
    color: #373737;
}
.c2inop2h3{
    line-height: 1.9;
    font-weight: 600;
    display: inline-block;
    text-align: left;
    color: #373737;
}

.c2in-option2 .c2-2-seconddiv,.c2-2first-div{
    width: 75.136vw;
    height: 12vw;
    background-color: #FFFFFF;
    border-radius: 3vw;
    margin-top: 3.73vw;
    margin-left: 7vw;
    text-align: left;
}
.c2in-option2 .c2-2first-div {
   margin-top: 4.7vw;
   line-height: 1.4;
}
.c2in-option2 .c2-2first-div p{
    margin-top: 0.8vw;
    margin-left: 25vw;
    font-weight: 600;
}
.c2in-option2 .c2-2-seconddiv p{
    margin-left: 25vw;
    font-weight: 600;
}
.c2in-option2 p{
    text-align: left;
    display: inline-block;
    margin-top: 4.1vw;
    color: #373737;
}
.c2in-option2 img{
    height: 59.688vw;
    width: 24.221vw;
    margin-top: -60.5vw;
    display: inline-block;
    text-align: left;
    position: absolute;
    margin-left: -38vw;
}
/*ステップの見出しと大文字英語*/
.steptop-svg{
    height: 14.6vw;
    width: 43.73vw;
    background-image: url("../images/flow.svg");
    margin-left: 54vw;
    margin-top: 10vw;
}
.c2oh2{
    color: #373737;
    margin-top: -10vw;
    margin-left: 18vw;
    letter-spacing: 0.1vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.c2oh2-2{
    margin-top: 4.5vw;
    margin-left: 25vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
/*ステップスライダー*/
.c2in-step{
    margin-top: 8vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.slider-step{
    
}
.step1{
    height: 130.4vw;
    width: 68.53vw!important;
    background-color: #ffffff;
    position: relative;
}


.c2in-step .slick-list {
   padding: 0 15vw!important;
}
/*ステップの中身*/
.step-top{
    background-color: #23BC46;
    height: 7.94vw;
    width: 68.53vw;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2vw;
    top: 0;
}
.step2 .step-top{
    background-color: #2399BC;
}
.step3 .step-top{
    background-color: #2346BC;
}
.step4 .step-top{
    background-color: #7523BC;
}
.step5 .step-top{
    background-color: #E04166;
}

.step-vijual{
    height: 65.6vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    top: 7.94vw;
    background-image: url("../images/step1@3x.webp");
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.25vw;
}
.step2 .step-vijual{
     background-image: url("../images/step2@3x.webp");
}
.step3 .step-vijual{
     background-image: url("../images/step3@3x.webp");
}
.step4 .step-vijual{
     background-image: url("../images/step4@3x.webp");
}
.step5 .step-vijual{
     background-image: url("../images/step5@3x.webp");
}
.spuere{
    top: 78.93vw;
    left: 2vw;
    background-color: #23BC46;
    height: 1.986vw;
    width: 1.986vw;
}
.step2 .spuere{
    background-color: #2399BC;
}
.step3 .spuere{
    background-color: #2346BC;
}
.step4 .spuere{
    background-color: #7523BC;
}
.step5 .spuere{
    background-color: #E04166;
}

.step-h4-1{
    left: 5vw;
    top: 77.7vw;
    font-weight: 600;
    color: #373737;
}
.step-h4-2{
    left: 5vw;
    font-weight: 600;
    top: 86.5vw;
    color: #373737;
}
.steo-p{
    left: 5vw;
    top: 93.5vw;
    font-weight: 600;
    color: #373737;
    line-height: 1.9;
}
.step-bottom1{
    height: 34.13vw;
    width: 1.242vw;
    background-color: #23BC46;
    bottom: 0;
}
.step2 .step-bottom1{
    background-color: #2399BC;
}
.step3 .step-bottom1{
    background-color: #2346BC;
}
.step4 .step-bottom1{
    background-color: #7523BC;
}
.step5 .step-bottom1{
    background-color: #E04166;
}

.step-bottom2{
    height: 1.242vw;
    width: 34.13vw;
    background-color: #23BC46;
    bottom: 0;
}
.step2 .step-bottom2{
    background-color: #2399BC;
}
.step3 .step-bottom2{
    background-color: #2346BC;
}
.step4 .step-bottom2{
    background-color: #7523BC;
}
.step5 .step-bottom2{
    background-color: #E04166;
}
.c2in-step .slick-dots {
    top: 142vw;
    width: 56.26vw;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.c2in-step .slick-next{
    top: 139vw;
    right: 7.2vw;
}
.c2in-step .slick-prev{
    top: 139vw;
    left: 7.2vw;
}
#slick-slide-control20::before{
   color: #23BC46;
}
#slick-slide-control21::before{
    color: #2399BC;
}
#slick-slide-control22::before{
    color: #2346BC;
}
#slick-slide-control23::before{
    color: #7523BC;
}
#slick-slide-control24::before{
    color: #E04166;
}
/*黄金比箇所*/
.c2in-ougon{
    color: #373737;
    height: 161.6vw;
    width: 100%;
    background-color: #EDF2F8;
    overflow: hidden;
    margin-top: 28vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.puality{
    background-image: url("../images/Quality.svg");
    width: 59.2vw;
    height: 16vw;
    top: 7.46vw;
    transform:rotate(10deg);
    left: 36.53vw;
}
.c2onh2{
    top: 17.6vw;
    left: 9.6vw;
}
.c2onh2-2{
    top: 28.26vw;
    left: 28.53vw;
}
.c2in-ougon p{
    line-height: 2;
    font-weight: 600;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    white-space: nowrap;
    top: 44.26vw;
}
.ougon-img{
    background-image: url("../images/ougon.svg");
    width: 100%;
    height: 62.5vw;
    bottom: 0;
}
/*ポートフォリオのスライド*/
.portforio{
    color: #373737;
    height: 62.933vw;
    text-align: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
}
.portforio h2{
    top: 12vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    white-space: nowrap;
}
.portforio h3{
    line-height: 1.65;
    top: 25.33vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    white-space: nowrap;
    letter-spacing: 0.4vw;
}
.portforio h3 span{
    color: #E04166;
}
.portforio-under{
    width:44vw;
    height: 0.53vw;
    background-color: #E04166;
    top: 48vw;
    left: 28vw;
    border-radius: 2vw;
}

.sli3img1, .sli3img2{
    width: 207.336vw;
    height: 61.648vw;
    margin-left: 15.506vw;
}

.portforio-a{
    background-image: url("../images/portfolio.svg");
    width: 66.66vw;
    height: 10.66vw;
    background-color: #373737;
    display: block;
    border-radius: 7vw;
    margin: 0 auto;
    margin-top: 18.2vw;
}
.portforio-a div{
    height: 8.26vw;
    width: 8.26vw;
    background-color: #30B484;
    border-radius: 6vw;
    background-image: url("../images/port-yajirusi.svg");
    right: 1vw;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/*お客様の声*/
.koe{
   font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
   overflow: hidden;
   color: #373737;
}
.koe h2{
   margin-top: 13.33vw;
   margin-left: 14.66vw;
}
.koe-border{
    margin-top: 5.06vw;
    width: 54.4vw;
    height: 0.26vw;
    background-color: #707070;
}
.koe-in{
    height: 181.6vw;
    width: 84vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 8vw;
}
.koe1{
    height: 53.06vw;
    width: 100%;
    background-color: #D5F5FA;
    border-radius: 4vw;
}
.koe2{
    height: 42.4vw;
    width: 100%;
    background-color: #D5F5FA;
    border-radius: 4vw;

}
.koe3, .koe4{
    height: 37.06vw;
    width: 100%;
    background-color: #D5F5FA;
    border-radius: 4vw;

}
.koe h3{
    margin-left: 6.6vw;
    margin-top: 6.6vw;
}
.koe1 p, .koe2 p, .koe3 p, .koe4 p{
    width: 69.33vw;
    width: 67vw;
    text-align: justify;
    line-height: 1.7;
    font-weight: 600;
    margin-left: 6.6vw;
    margin-top: 2.3vw;
}
.koe-in-box1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 99.46vw;
}
.koe-in-box2{
    height: 78.1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*Q＆A*/
.question-box{
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 6vw;
    overflow: hidden;
    padding-bottom: 6vw;
    padding-top: 6vw;
    margin-top: 14.66vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";

}
.question-box h2{
    color: #373737;
    margin-left: 11.2vw;
}
.q-border{
    width: 54.4vw;
    height: 0.27vw;
    background-color: #707070;
    margin-top: 5.06vw;
}
.qanda{
    margin-top: 8vw;
}
.question{
   height: 3vw
}
.question img{
    width: 5.043vw;
    top: 50%;
    left: 85vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.answer{
    display: none;
    height: 26vw;
}
.answer-in{
    width: 100%;
    height: 100%;
}
.qanda-in{
    border-radius: 2vw;
    background-color: #FAFAFA;
    width: 94.6vw;
    margin: 0 auto;
    margin-top: -2.6vw;
}
.q-icon, .a-icon{
    font-family: "Noto Sans JP", sans-serif;
    height: 5.86vw;
    width: 5.86vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7070D1;
    border-radius: 2vw;
    color: #ffffff;
    top: 50%;
    left: 3vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.a-icon{
    background-color: #000000;
    top: 2vw;
}
.q-p{
    font-weight: 600;
    top: 50%;
    left: 12vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.a-p{
    text-align: justify;
    width: 80vw;
    letter-spacing: 0.1vw;
    line-height: 1.65;
    left: 12vw;
    top: 11.8vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/*大きさが違うやつ*/
.answer2 {
    height: 11vw;
}
.answer2 .a-p{
    top: 4.5vw;
}
.answer3{
    height: 15.6vw;
}
.answer3 .a-p{
    top: 6.6vw;
}

/*コンタクト*/
.contact-contain{
    height: 319.73vw;
    background-color: rgba(235,250,216,0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 6vw;
    margin-top: 13.33vw;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "sans-serif";
    overflow: hidden;
}
.radio-button{
    margin: 0;
    margin-top: 0.5vw;
    margin-right: 0.6vw;
}
.c-toph2{
    margin-top: 6.6vw;
    margin-left: 11.2vw;
    color: #373737;
}
.c-topline{
    margin-top: 5.06vw;
    width: 54.4vw;
    height: 0.26vw;
    background-color: #707070;
}
.c-bottomline{
    width: 93.33vw;
    margin: 0 auto;
    margin-top: 2vw;
}
.c-topp{
    width: 82.4vw;
    text-align: justify;
    margin: 0 auto;
    line-height: 1.65;
    letter-spacing: 0.1vw;
    margin-top: 2vw;
}

form{
    accent-color:#B43030;
}
.radio-contain{
    display: flex;
    width: 28vw;
    margin-left: 5.86vw;
    margin-top: 5.86vw;
    flex-direction: column;
}
.input-radio{
    inline-size: 2vw;
    display: flex;
    align-items: center;
    margin-right: -17vw;
}
.input-radio p{
    white-space: nowrap;
    margin-top: 1vw;
}
.formh-box{
    display: flex;
    align-items: center;
    margin-top: 6.66vw;
    margin-left: 4.26vw;
}
.formh1{
    height: 4vw;
    width: 9.33vw;
    background-color: #B43030;
    border-radius: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding-top: 0.3vw;
}
.formh1-2{
    background-color: #373737;
}
.formh2{
    margin-left: 5.86vw;
    margin-top: 0.1vw;
    font-weight: 600;
    color: #373737;
}
.formh2 span{
    color: #B43030;
}
.form-label{
    margin-top: 1.71vw;
    display: inline-block;
}
.input-area, .textarea{
    width: 92.8vw;
    height: 9.33vw;
    margin-left: 4.26vw;
    box-sizing: border-box;
    background-color: #F5F5F5;
    border: solid 0.28vw #EDEBEB;
    border-radius: 1vw;
    padding: 0;
    padding-left: 3vw;
    letter-spacing: 0.1vw;
    
}
.textarea{
    height: 40.53vw;
    padding-top: 2vw;
}

input:focus, textarea:focus {
outline: 0.3vw solid #2399BC;
}
.form-submit{
    background-color: #373737;
    color: #FFFFFF;
    width: 66.66vw;
    height: 10.6667vw;
    border-radius: 6vw;
    margin: 0 auto;
    margin-top: 8vw;
    display: block;
    font-weight: 600;
    background-image: url("../images/c-buttn-back@3x.webp");
    border: 0;
    padding: 0;
}

/*ライン*/
.c-line{
    position: relative;
    width: 92.9vw;
    height: 45.6vw;
    background-color: #FCFCFC;
    border-radius: 6vw;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
    margin: 0 auto;
    margin-top: 16vw;
}
.c-line .c-square{
    width: 1.8667vw;
    height: 1.8667vw;
    background-color: #7070D1;
    position: absolute;
    left: 4vw;
    border-radius: 4vw;
    top: 9.05vw;
}
.c-line .cp1{
    position: absolute;
    font-weight: 600;
    top: 8.533vw;
    left: 7.2vw;
}
.c-line .cp2{
    position: absolute;
    font-weight: 600;
    top: 16.8vw;
    left: 7.2vw;
    line-height: 1.8
    
}
.c-line img{
    width: 36.2667vw;
    height: 36.2667vw;
    position: absolute;
    top: 5.333vw;
    right: 10.1333vw;
}
footer{
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
    height: 64.8vw;
    overflow: auto;
    background-image: url("../images/footer.svg");
    margin-top: 10.666vw;
}
footer img{
    width: 84.6853vw;
    margin: 0 auto;
    display: block;
    margin-top: 13.3333vw;
}
footer a{
    display: block;
    color: #373737;
    margin-left: 8vw;
}
footer .fa1{
    margin-top: 21.066vw;
}
footer small{
    margin-top: 8.86vw;
    display: block;
    margin-left: 8vw;
}
/*サンクスページ*/
.thankspage{
    background-color: #172867;
    width: 100%;
    min-height: 100vh;
    /* カスタムプロパティ未対応ブラウザ用のフォールバック */
    min-height: calc(var(--vh, 1vh) * 100);
     font-family: "Noto Sans JP", sans-serif;
    overflow: auto;
}
.thankspage h1{
    color: #F88906;
    text-align: center;
    margin-top: 24.26vw;
    line-height: 1.6;
}
.thankspage .thkp{
    color: #FFFFFF;
    text-align: justify;
    display: flex;
    justify-content: center;
    line-height: 1.8;
    margin-top: 10.66vw;
}
.thankspage div{
    width: 59.2vw;
    height: 12vw;
    background-image: url("../images/thanks.svg");
    margin: 0 auto;
    margin-top:18vw;
}
.thankspage a{
    background-color: #F88906;
    width: 66.66vw;
    height: 10.5vw;
    border-radius: 5vw;
    display: block;
    margin: 0 auto;
    margin-top: 17vw;
}
.thankspage a p{
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
/*ポリシーページ*/
#policy{
    color: #373737;
    overflow: auto;
    background-color: #D5F5FA;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
}
#policy p{
    width: 85%;
    text-align: justify;
    margin: 0 auto;
    line-height: 1.6;
    margin-top: 2vw;
}
.policy0 h2{
    text-align: center;
    margin-top: 19vw;
}
#policy .policy0 p{
    margin-top: 6vw;
}
#policy .policy8 p{
    margin-bottom: 10vw;
}
#policy h3{
    margin-top: 8vw;
    margin-left: 7.5vw;
}
#policy ul{
    width: 80%;
    margin: 0 auto;
    list-style: decimal;
    margin-left: 13vw;
}
#policy ul li{
    margin-top: 2vw;
    line-height: 1.6;
}
/*ポートフォリオページ*/
.portforio-page{
    overflow: auto;
}
.portfolio-p-h{
    width: 43.2vw;
    margin-top: 24vw;
    margin-left: 5vw;
}
.portforio-pagebox{
    margin-top: 3.47vw;
}
.portfolio-pbox-in{
    height: 125.333vw;
    position: relative;
}
.pfpb-inin{
    width: 100%;
    height: 78.933vw;
    background-color: #373737;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}
.p-slayhive .pfpb-inin{
    background-color: #FFD155;
}
.p-radiant .pfpb-inin{
    background-color: #FAA147;
}
.p-suzuki .pfpb-inin{
    background-color: #338ACB;    
}
.p-kuroobi img{
    width: 90.8053vw;
}
.p-slayhive img{
    width: 90.8vw;
}
.p-radiant img{
    width: 91.173vw;
}
.p-suzuki img{
    width: 91.048vw
}
.pfpb-inin2{
    width: 77.333vw;
    height: 54.933vw;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(30, 30, 30, 0.5);
    bottom: 0;
    left: 5vw;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.1vw;
}
.pfpb-inin2 ul{
    list-style: none;
    margin-left: 6.66vw;
}
.pfpb-inin2 ul li{
    line-height: 1.55;
}
.p-slayhive .pfpb-inin2{
    background-color: rgba(230, 184, 60, 0.5);
    color: #10100E;
}
.p-radiant .pfpb-inin2{
    background-color: rgba(225, 136, 46, 0.5);
    color: #10100E;
}
.p-suzuki .pfpb-inin2{
    background-color: rgba(88, 155, 188, 0.5);
    color: #10100E;
}.pfpb-inin2 p{
    width: 64vw;
    text-align: justify;
    line-height: 1.59;
    margin-top: 2.2vw;
    margin-left: 6.66vw;
}
.p-suzuki .pfpb-inin2 p{
    margin: 0 auto;
    margin-top: 2.2vw;
}
.p-suzuki .pfpb-inin2 p{
    width: 68vw;
}
.p-radiant,.p-slayhive,.p-suzuki{
    margin-top: 3vw;
}
/*PC版*/
@media screen and (min-width:960px) {
  
    .pc-none{
        display: none;
    }
    .s-none{
        display: block;
    }
/*14px*/
    .pcf13{
        font-size: 0.67vw;
    }
    .pcf14{
        font-size: 0.729vw;
    }
    .pcf15{
        font-size: 0.78125vw;
    }
/*16px*/
    .pcf16{
        font-size: 0.833vw;
    }
/*18px*/
    .pcf18{
        font-size: 0.9375vw;
    }
/*20px*/
    .pcf20{
        font-size: 1.0416vw;
    }
/*21px*/
    .pcf21{
        font-size: 1.093vw;
    }
/*24px*/
    .pcf24{
        font-size: 1.25vw;
    }
/*25px*/
    .pcf25{
        font-size: 1.302vw;
    }
/*28px*/
    .pcf28{
        font-size: 1.453vw;
    }
/*30px*/
    .pcf30{
        font-size: 1.5625vw;
    }
/*35px*/
    .pcf35{
        font-size: 1.822vw;
    }
/*41px*/
    .pcf41{
        font-size: 2.135vw;
    }
/*43px*/
    .pcf43{
        font-size: 2.23958vw;
    }
/*46px*/
    .pcf46{
        font-size: 2.3958vw;
    }
/*55px*/
    .pcf55{
        font-size: 2.8645vw;
    }
/*60px*/
    .pcf60{
        font-size: 3.125vw;
    }
/*65px*/
    .pcf65{
        font-size: 3.385vw;
    }
/*66px*/
    .pcf66{
        font-size: 3.4375vw;
    }
/*100px*/
    .pcf100{
        font-size: 5.208vw;
    }
    header{
        height: 5.72vw;
    }
    .heder-a{
        margin-left: 63vw;
    }
    .logo{
        width: 15.9vw;
        margin-left: 2.343vw;
    }
    .hamberger{
        height: 3.125vw;
        width: 3.125vw;
        margin-right: 1.71vw;
    }
    .ham-s1,.ham-s2{
        width: 1vw;
        height: 0.06vw;
    }
    .ham-s1{
        margin-top: 1.3vw;
    }
    .ham-s2{
        margin-bottom: 1.3vw;
    }
    .heder-a{
        display: flex;
        width: 11.979vw;
        height: 3.125vw;
        background-color: #0BB9D7;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        border-radius: 3vw;
        letter-spacing: 0.05vw;
    }
/* PC版ハンバーガー*/
    .ham-s2.bg-none {
    transform: translateY(-0.2vw) rotate(-40deg);
}
    .ham-s1.bg-none {
    transform: translateY(0.3vw) rotate(40deg);
}
    
    .nav1{
        left: 9.27vw;
    }
    .nav2{
        left: 31.09vw;
    }
    .nav3{
        left: 31.09vw;
        top: 20.364vw;
        height: 12.395vw;
    }
    .nav4{
        left: 42.76vw;
    }
    .nav5{
        left: auto;
        right: 9.27vw;
    }
    .nav6{
        left: 19.3vw;
    }
    .nav7{
        left: auto;
        right: 37.5vw;
    }
    .nav8{
        left: auto;
        right: 22.65vw;
    }
    .nav9{
        
    }
    .nav1,.nav6,.nav2,.nav4,.nav7,.nav8,.nav5{
        top: 14.84vw;
    }
    
/*ファーストビュー FV*/
    .first-view h1{
        top: 16.468vw;
        left: 6.61vw;
    }
    .first-view p{
        top: 22.5vw;
        left: 6.9vw;
    }
/*ここからコンテンツ０*/
    .content0{
        height: 124.4vw;
        border-radius: 3vw;
    }
    .maru{
        width: 1.302vw;
        height: 1.302vw;
    }
    .c0h1{
        top: 7.916vw;
        left: 7.8125vw;
    }
    .c0h2{
        top: 13vw;
        left: 14.65vw;
    }
    .c0{
        height: 41.09vw;
        top: 21.14vw;
        margin-left: 7.9vw;
    }
    .c0in p{
        line-height: 1.7;
        margin-top: 2vw;
        margin-left: 2.3vw;
    }
    .c0in-in h3{
    margin-left: 0.9375vw;
    }
    .c0in3, .c0in4 {
    height: 31.4vw;
    width: 31.4vw;
    border-radius: 1vw;
    transform: rotate(5deg);
    top: 72.7vw;
    left: 9.114vw;
    }
    .c0in4 {
        transform: rotate(13deg);
    }
    .c0in3-h3 {
    top: 79vw;
    left: 13.5vw;
}
    .c0in3-p {
    left: 13.6vw;
    top: 83.5vw;
    line-height: 2.5;
}
    .slide1 .sl1img1, .slide1 .sl1img2 {
    width: 95.83vw;
    margin-left: 10vw;
}
    .content0-1{
        margin-top: -16vw;
    }
    .content0-2 {
    margin-bottom: -15.6vw;
}
    .c0in2{
        background-image: url("../images/pc-c0@2x.webp");
        width: 36.5vw;
        height: 50.625vw;
        left: auto;
        transform: none;
        -webkit-transform: none;
        top: 9.6875vw;
        left: 62.05vw;
        z-index: 2;
    }
    .c0in6{
        width: 28.125vw;
        height: 28.125vw;
        background-color: #FAFAFA;
        border-radius: 15vw;
        top: 20.989vw;
        left: 66.145vw;
        z-index: 1;
    }
    .c0in7{
        background-image: url("../images/c0in-donat.svg");
        width: 23.489vw;
        height: 28.333vw;
        top: 0;
        right: 0;
    }
    .c0in5{
        background-image: url("../images/pc-c0img-bottom@2x.webp");
        width: 46.275vw;
        height: 30.8843vw;
        top: 73.541vw;
        left: 49.0625vw;
    }
/*    PCスクロールアニメーション*/
    .content1{
    height: 72.3958vw;
    background-image: url("../images/make-pc@2x.webp");
}
/* ここからコンテンツ２*/
    .content2{
        height:  168.0729vw;
        position: relative;
        border-radius: 3vw;
    }
    .plantop-svg{
        background-image: url("../images/plantop-pc.svg");
        width: 16.8vw;
        height: 6.51vw;
        position: absolute;
        margin: 0;
        left: 40.5vw;
        top: 9.9vw;
    }
    .c2h3:before {
        height: 0.308vw;
        width: 12.33vw;
        border-top: 0.3vw solid #373737;
    }
    .c2h3:after
    {
        height: 0.308vw;
        width: 12.33vw;
        border-top: 0.3vw solid #373737;
    }
    .c2h2{
        position: absolute;
        top: 9.375vw;
        left: 12.344vw;
    }
    .c2h2-2{
        margin: 0;
        position: absolute;
        top: 14.063vw;
        left: 24.74vw;
    }
    .c2h3{
        position: absolute;
        margin: 0;
        top: 20.46875vw;
        left: 12.344vw;
    }
    .slick2{
        display: flex;
        position: absolute;
        top: 29.21875vw;
        left: 3.6458vw;
    }
    .plan1{
        height: 29.16vw;
        width: 17.91vw!important;
        border-radius: 1vw;
        margin-right: 2.656vw;
    }
    .plan-top{
     border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
        height: 1.302vw;
    }
    .plan1 h3{
        top: 3vw;
    }
    .plan1 .plan-top-p{
        top: 6vw;
    }
    .plan-mid{
        height: 8.33vw;
        width: 14.80vw;
        border-top: solid 0.052vw #23BC46;
        border-bottom: solid 0.052vw #23BC46;
        top: 8.8vw;
    }
    .plan-mid .s-none{
        display: block!important;
    }
    .plan2 .plan-mid{
        border-top: solid 0.052vw #2364BC;
        border-bottom: solid 0.052vw #2364BC;  
    }
    .plan3 .plan-mid{
        border-top: solid 0.052vw #E04166;
        border-bottom: solid 0.052vw #E04166;
    }
    .plan1 .plan-mid img{
        width: 10.869vw;
        height: 2.754vw;
    }
    .plan2 .plan-mid img, .plan3 .plan-mid img{
        width: 10.1989vw;
        height: 6.566vw;
    }
    .plan-bottom{
        height: 7.7vw;
        top: 19.3vw;
    }
    .plan3 .plan-bottom{
        height: 9.114vw;
        top: 18.6vw;
    }
    .plan-bottom div{
        width: 15.1vw;
        height: 1.718vw;
    }
    .plan-back{
        width: 14.32vw;
        height: 12.78vw;
        top: 17.8vw;
        border-bottom-right-radius: 1vw;
        right: -1.3vw;
    }
    .c2in-plan{
        margin: 0;
    }
    .c2in-option{
        height: 11.354vw;
        width: 28.854vw;
        border-radius: 1vw;
        position: absolute;
        margin: 0;
        right: 3.6458vw;
        top: 29.21875vw;
    }
    .c2in-option h3{
        margin-top: 1.1vw;
    }
    .c2in-option ul{
        display: flex;
        margin-top: 0;
        margin-left: 0;
        justify-content: space-evenly;
        align-items: baseline;
    }
    .c2in-option li {
        margin-top: 0.9vw;
    }
    .c2in-option li:before{
        width: 0.4vw;
        height: 0.4vw;
        margin-right: 0.5vw;
        margin-bottom: 0.05vw;
    }
    .c2in-option2{
        width: 28.854vw;
        height: 27.65625vw;
        border-radius: 1vw;
        position: absolute;
        margin: 0;
        right: 3.6458vw;
        top: 41.510vw;
    }
    .c2in-option2 .c2-2-seconddiv, .c2-2first-div{
        width: 24.79vw;
        height: 4.375vw;
        border-radius: 1vw;
        margin: 0 auto;
        margin-top: 0.52vw;
    }
    .c2in-option2 .c2-2first-div{
        margin-top: 1.1vw;
    }
    .c2in-option2 img{
        width: 7.96875vw;
        height: 19.0625vw;
        margin-top: -19.4vw;
        margin-left: -12.6vw;
    }
    .c2in-option2 h3{
        margin-top: 1.1vw;
    }
    .c2in-option2 p{
        margin-top: 1.1vw;
    }
    .c2in-option2 .c2-2first-div p{
        margin-left: 8.8vw;
    }
    .c2in-option2 .c2-2-seconddiv p{
        margin-left: 8.8vw;
        margin-top: 1.7vw;
    }
/* ステップ箇所*/
    .steptop-svg{
        background-image: url("../images/flow-pc.svg");
        width: 18.2703125vw;
        height: 6.0593vw;
        position: absolute;
        margin: 0;
        top: 70.677vw;
        left: 36.4vw;
    }
    .c2oh2{
        margin: 0;
        position: absolute;
       top:  71.71875vw;
        left: 12.344vw;
    }
    .c2oh2-2{
        margin: 0;
        position: absolute;
        top: 75.78125vw;
        left: 19.948vw;
    }
/*    ステップの実装*/
    .slider-step{
        display: flex;
        position: absolute;
        top: 83.33vw;
            left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    }
    .step1{
        width: 14.323vw!important;
        height: 29.322vw;
    }
    .step-top{
        width: 14.323vw;
        height: 1.666vw;
    }
    .step-h4-1{
        top: 17.135vw;
        left: 1.302vw;
    }
    .step-h4-2{
        top: 18.906vw;
        left: 1.302vw;
    }
    .steo-p{
        top: 21.406vw;
        left: 1.302vw;
    }
    .spuere{
        width: 0.417vw;
        height: 0.417vw;
        top: 17.4vw;
    left: 0.6vw;
    }
    .step-vijual{
        height: 13.75vw;
        top: 1.666vw;
    }
    .step-bottom1{
        height: 7.1875vw;
        width: 0.25vw;
    }
    .step-bottom2{
        width: 7.4478vw;
        height: 0.25vw;
    }
/*黄金比の箇所*/
    .c2in-ougon{
        width: 92.8125vw;
        height: 42.083vw;
        position: absolute;
        border-radius: 1vw;
        top: 119.375vw;
                    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        margin: 0;
    }
    .puality{
        background-image: url("../images/Quality-pc.svg");
        height: 7.8276vw;
        width: 27.267vw;
        transform: rotate(0deg);
        top: 3.5vw;
        right: 12.3854vw;
        left: auto;
    }
    .ougon-img{
        width: 42.1286vw;
        height: 26.054vw;
        background-color: #ffffff;
        right: 5.98958vw;
        bottom: 2.552vw;
    }
    .c2onh2{
        top: 3.2vw;
        left: 8.4895vw;
    }
    .c2onh2-2{
        top: 7.666vw;
        left: 15.78vw;
    }
    .c2in-ougon p{
        transform: none;
    -webkit-transform: none;
    -ms-transform: none;
        top: 12.6vw;
        left: 6.354vw;
        width: 30.625vw;
        text-align: justify;
        white-space: normal;
        line-height: 2.4;
    }
/*ごめんなさいコンテンツ*/
    .portforio{
        height: 24.917vw;
    }
    .portforio h2{
        top: 5.15625vw;
    }
    .portforio h3{
        top: 11.40625vw;
        line-height: 2;
    }
    .portforio-under{
        width: 19.6vw;
        height: 0.25vw;
        left: 49.3vw;
        top: 19.8vw;
    }
    .sli3img1{
        margin: 0 auto;
        width: 86.9723958vw;
        height: 25.8593vw;
        display: block;
    }
    .portforio-a{
        width: 23.4375vw;
        height: 4.1667vw;
        margin-top: 5.2vw;
    }
    .portforio-a div{
        width: 3.125vw;
        height: 3.125vw;
    }
/*ここからお客様の声*/
    .koe h2{
        margin-top: 5.72916vw;
        margin-left: 4.3229vw;
    }
    
    .koe-border,.q-border,.c-topline{
        width: 28.64583vw;
        height: 0.052vw;
        margin-top: 1.5625vw;
    }
    .koe1,.koe2,.koe3,.koe4{
        width: 36.1979vw;
        height: 15vw;
        border-radius: 2vw;
    }
    .koe3,.koe4{
        height: 12.3958vw;
    }
    .koe-in-box1{
        flex-direction: row;
        height: 15vw;
    }
    .koe-in-box2{
        flex-direction: row;
        height: 12.3958vw;
    }
    .koe-in{
        height: 31.5104vw;
        margin-top: 4.84375vw;
    }
    .koe h3{
        margin-top: 2.23958vw;
        margin-left: 2.60416vw;
    }
    .koe1 p, .koe2 p, .koe3 p, .koe4 p{
        margin-left: 2.60416vw;
        margin-top: 0.8vw;
        width: 29.6875vw;
        line-height: 2.4;
    }
/*    Q&A*/
    .question-box{
        border-radius: 3vw;
        padding: 3.6458vw 0;
        margin-top: 5.72916vw;
        width: 90.625vw;
    }
    .question-box h2{
        margin-left: 4.3229vw;
    }
    .qanda{
        margin-top: 3.6458vw;
    }
    .qanda-in{
        width: 65.21875vw;
        margin-top: 0;
        border-radius: 0.6vw;
    }
    .q-icon, .a-icon {
        width: 1.875vw;
        height: 1.875vw;
        border-radius: 0.6vw;
        left: 1.71875vw;
    }
    .q-p,.a-p{
        left: 4.6875vw;
    }
    .a-p{
        top: 2.7vw;
        width: 59vw;
    }
    .answer{
        height: 6vw;
    }
    .answer2{
        height: 3vw;
    }
    .answer2 p{
        top: 0.8vw!important;
    }
    .answer3 .a-p{
        top: 2.7vw;
    }
    .question img {
    width: 2vw;
    left: 60vw;
}
/*お問い合わせフォームPC*/
    .contact-contain{
        border-radius: 3vw;
        height: 81.5vw;
        width: 90.625vw;
        margin-top: 5.72916vw;
    }
    .formflex-in1{
        width: 60.5729vw;
    }
    .c-topp{
        margin-top: 3.0208vw;
    }
    .c-toph2{
        margin-left: 4.3229vw;
        margin-top: 3.6458vw;
    }
    .formflex{
        display: flex;
        flex-direction: row-reverse;
    }
    .c-topp{
        width: 44vw;
        margin-top: 3.5416vw;
        line-height: 1.8;
        margin-left: 0;
    }
    .formh1{
        width: 3.3854vw;
        height: 1.5625vw;
        padding: 0.1vw 0;
    }
    .input-area, .textarea{
        width: 33.8541vw;
        height: 2.34375vw;
        border: solid 0.05vw #EDEBEB;
        border-radius: 0.3vw;
        padding-left: 1vw;
    }
    .textarea {
        height: 13.0208vw;
        padding-top: 0.6vw;
    }
    .c-line{
        width: 13.90625vw;
        height: 14.89583vw;
        border-radius: 1.5vw;
        margin-top: 3.5416vw;
    }
    .c-line .c-square{
        top: 2.48vw;
        width: 0.36458vw;
        height: 0.36458vw;
        left: 2.5vw;
    }
    .c-line p{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    }
    .c-line .cp1{
        top: 2.2916vw;
        white-space: nowrap;
        font-weight: 300;
    }
    .c-line .cp2{
        top: 11.979vw;
        white-space: nowrap;
        font-weight: 300;
    }
    .c-line img{
        width: 6.71875vw;
        height: 6.71875vw;
            top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    margin: 0 auto;
        right: 3.59375vw;
    }
    .formh-box{
        margin-top: 1.5625vw;
        margin-left: 4.235vw;
    }
    .radio-contain{
        margin-top: 1.041vw;
        margin-left: 14.3vw;
        flex-direction: row;
    }
    .c-bottomline{
        width: 44vw;
        margin-left: 0;
    }
    .form-submit{
        width: 23.4375vw;
        height: 4.1667vw;
        background-image: url("../images/c-buttn-back-pc@2x.webp");
        margin: 0;
        margin-top: 3.64583vw;
        margin-left: 9.11458vw
    }
    .radio-button{
        margin-top: 1vw;
        margin-right: 1vw;
    }
    .formh2{
        margin-left: 1.3vw;
    }
    input:focus, textarea:focus {
        outline: 0.08vw solid #2399BC;
    }
    .form-label{
        margin-top:1.0416vw;
    }
/*ここからフッター*/
    footer{
        height: 20.833vw;
        background-image: url("../images/footer-pc.svg");
        position: relative;
    }
    footer img{
        width: 16.51458vw;
        top: 7.39583vw;
        left: 7.7604vw;
        position: absolute;
        margin-top: 0;
    }
    footer a{
        margin-left: 0;
    }
    footer .fa1{
        position: absolute;
        margin-top: 0;
        top: 13vw;
        left: 8vw;
    }
    footer small{
        margin-top: 0;
        top: 16.25vw;
        position: absolute;
    }
/*サンクスページ*/
    .thankspage h1{
        margin-top: 9.73958vw;
    }
    .thankspage .thkp{
        margin-top: 6.34516vw;
    }
    .thankspage div{
        width: 25.9375vw;
        height: 5.2604166vw;
        margin-top: 7.96875vw;
    }
    .thankspage a{
        width: 20.625vw;
        height: 4.1667vw;
        margin-top: 8vw;
    }
/*ポリシーページ*/
    .policy0 h2 {
        margin-top: 6vw;
    }
    #policy .policy0 p {
    margin-top: 4vw;
}
    #policy h3 {
    margin-top: 3vw;
}
    #policy p {
    margin-top: 1vw;
}
    #policy ul li {
    margin-top: 1vw;
}
/*ポートフォリオページ*/
    .portfolio-p-h{
        width: 41.875vw;
        margin-top: 4.84375vw;
        margin-left: 9.1145vw;
    }
    .pfpb-inin{
        width: 57.29vw;
        height: 37.5vw;
        right: 7.79375vw;
    }
    .p-kuroobi img,.p-suzuki img{
        width: 41.66vw;
    }
    .p-slayhive img,.p-radiant img{
        width: 41.6656vw;
    }
    .pfpb-inin2{
        width: 33.22917vw;
        height: 24.375vw;
        left: 7.79375vw;
        bottom: 1.7vw;
    }
    .portfolio-pbox-in{
        height: 37.5vw;
        width: 100%;
    }
    .pfpb-inin2 p{
        width: 25.8vw;
        margin: 0 auto;
        margin-top: 2.08vw;
    }
    .p-suzuki .pfpb-inin2 p{
        width: 28.75vw;
    }
    .pfpb-inin2 ul{
        margin-top: 1vw;
        margin-left: 3.6vw;
    }
}