@charset "UTF-8";

/* ---------------------------
    共通
--------------------------- */


/* ---------------------------
    メインV（PC）
--------------------------- */
@media (min-width: 1024px){
    .main_v{
        margin: 250px 0 0 0;
        background: url( "../images/top/main_v_pc.jpg" ) no-repeat;
        background-size: 100%;
        padding-bottom: 40px;
    }
    .main_v_txt{
        text-align: center;
    }
    .main_v_txt img{
        width: 980px;
        margin-top: -90px;
    }
    h1{
        text-align: center;
        margin: 20px auto -20px;
    }
    h1 img{
        width: 765px;
    }
    .main_v_txt_sercle{
        text-align: center;
    }
    .main_v_txt_sercle img{
        width: 620px;
    }
    .main_v_shadow{
        background: rgba(0,0,0, 0.7);
        text-align: center;
        padding: 40px;
        width: 820px;
        margin: 20px auto 0;
    }
    .main_v_shadow img{
        width: 765px;
    }
    .main_v_btn{
        margin: 15px auto 0;
        width: 660px;
    }
    .main_v_btn a{
        background: url( "../images/common/yellow_arrow.png" ) 615px 50% / 20px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 660px;
        display: block;
        padding: 25px 0;
    }
    .main_v_btn a:hover{
        color: #000;
        transition-duration: 0.8s;
        background: url( "../images/common/green_arrow.png" ) 615px 50% / 20px no-repeat #ffbf00;
    }
    .line1{
        color: #ffbf00;
        font-size: 24px;
    }
    .main_v_btn a:hover .line1{
        color: #000;
        transition-duration: 0.8s;
    }
    .line2{
        font-size: 30px;
        margin-top: 10px;
    }
}


/* ---------------------------
    メインV（SP）
--------------------------- */
@media (max-width: 1024px){
   .main_v{
        margin: 170px 0 0 0;
        background: url( "../images/top/main_v_sp.jpg" ) no-repeat;
        background-size: 100%;
        padding-bottom: 5%;
    }
    .main_v_txt{
        text-align: center;
    }
    .main_v_txt img{
        width: 90%;
        margin-top: -70px;
    }
    h1{
        text-align: center;
        margin: 0 auto -10px;
    }
    h1 img{
        width: 80%;
    }
    .main_v_txt_sercle{
        text-align: center;
    }
    .main_v_txt_sercle img{
        width: 85%;
    }
    .main_v_shadow{
        background: rgba(0,0,0, 0.7);
        text-align: center;
        padding: 5%;
        width: 70%;
        margin: 5px auto 0;
    }
    .main_v_shadow img{
        width: 100%;
    }
    .main_v_btn{
        margin: 15px auto 0;
        width: 100%;
    }
    .main_v_btn a{
        background: url( "../images/common/yellow_arrow.png" ) 615px 50% / 20px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 100%;
        display: block;
        padding: 25px 0;
    }
    .line1{
        color: #ffbf00;
        font-size: 16px;
    }
    .line2{
        font-size: 13px;
        margin-top: 10px;
    }
}



/* ---------------------------
    導入から何ができるの（PC）
--------------------------- */
@media (min-width: 1024px){
    main{
        width: 100%;
    }
    .introduction{
        width: 960px;
        margin: 60px auto;
    }
    .introduction_1{
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        color: #000;
    }
    .introduction_2{
        font-size: 18px;
        background: #f5f5f5;
        padding: 20px;
        margin-top: 60px;
    }
    .can p{
        text-align: center;
        margin: 60px auto;
    }
}


/* ---------------------------
    導入から何ができるの（SP）
--------------------------- */
@media (max-width: 1024px){
    main{
        width: 100%;
    }   
    .introduction{
        margin: 25px auto 50px;
    }
    .introduction_1{
        font-size: 14px;
        text-align: center;
        font-weight: bold;
        color: #000;
    }
    .introduction_2{
        font-size: 14px;
        background: #f5f5f5;
        padding: 5%;
        margin-top: 25px;
    }
    .can p{
        font-size: 16px;
        text-align: center;
        margin: 25px auto;
    }
}


/* ---------------------------
    キントーンとは（PC）
--------------------------- */
@media (min-width: 1024px){
    .what{
        width: 960px;
        margin: 60px auto 20px;
    }
    .what_caption{
        margin: 60px auto;
        text-align: center;
    }
    .what_box li{
        font-size: 14px;
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
        vertical-align: middle;
        background: #fff;
        text-align: center;
        display: inline-block;
        padding: 45px 0 0;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
    }
    .what_box li:nth-child(2),.what_box li:nth-child(3),
    .what_box li:nth-child(5),.what_box li:nth-child(6){
        margin-left: 20px;
    }
    .what_box li img{
        height: 100px;
        margin-bottom: 30px;
    }
    .what_box li p{
        line-height: 1.5;
    }
    .what_result, .issue_result{
        font-size: 22px;
        font-weight: bold;
        color: #000;
        text-align: center;
        margin-top: 20px;
    }
    .triangle{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 100px 50vw 0 50vw;
        border-color: #fbfbfb transparent transparent transparent;
        background: #f5f5f5;
    }
}


/* ---------------------------
    キントーンとは（SP）
--------------------------- */
@media (max-width: 1024px){
    .what{
        width: 90%;
        margin: 50px auto 25px;
    }
    .what_caption{
        margin: 25px auto;
        font-size: 16px;
    }
    .what_box li{
        font-size: 14px;
        box-sizing: border-box;
        width: 46%;
        margin-bottom: 20px;
        vertical-align: middle;
        background: #fff;
        text-align: center;
        display: inline-block;
        padding: 20px 0;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
    }
    .what_box li:nth-child(2n){
        margin-left: 5%;
    }
    .what_box li img{
        height: 80px;
        margin-bottom: 5%;
    }
    .what_box li p{
        line-height: 1.5;
        font-weight: bold;
        font-size: 10px;
    }
    .what_result, .issue_result{
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-top: 20px;
        text-align: center;
    }
    .triangle{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 60px 50vw 0 50vw;
        border-color: #fbfbfb transparent transparent transparent;
        background: #f5f5f5;
    }
}

/* ---------------------------
    キントーンでできることとはからメリット（PC）
--------------------------- */
@media (min-width: 1024px){
    .can2_wrapper{
        background: #f5f5f5;
    }
    .can2{
        margin: 0 auto;
        width: 960px;
        padding: 60px 0;
    }
    .can2_caption{
        text-align: center;
        margin: 60px auto;
    }
    .two_btn a{
        line-height: 1.5;
        padding: 8px 0;
    }
    .can2_detail{
        margin-top: 60px;
    }
    .can2_detail p{
        line-height: 1.5;
    }
    .can2_detail span{
        font-size: 22px;
        font-weight: bold;
        color: #ed731f;
    }
    .merit{
        margin: 60px auto 80px;
    }
    .merit_1{
        margin: 60px auto;
        display: flex;
        justify-content: end;
        flex-flow: row-reverse;
    }
    .merit_2{
        display: flex;
    }
    .merit_1 img, .merit_2 img{
        width: 470px;
        height: 280px;
    }
    .merit_1 div, .merit_2 div{
        width: 650px;
    }
    .merit_1 div{
        margin-right: 60px;
        align-self: center;
    }
    .merit_2 div{
        margin-left: 60px;
        align-self: center;
    }
    .merit h3{
        font-size: 22px;
        margin-bottom: 40px;
    }
    .merit h3:before{
        content: '';
        width: 30px;
        height: 30px;
        background: url("../images/top/check_1.png");
        background-size: contain;
        vertical-align: middle;
        display: inline-block;
        margin: -4px 10px 0 0;
    }
    .merit span{
        font-weight: bold;
    }
}

/* ---------------------------
    キントーンでできることとはからメリット（SP）
--------------------------- */
@media (max-width: 1024px){
    .can2_wrapper{
        background: #f5f5f5;
    }
    .can2{
        margin: 0 auto;
        width: 90%;
        padding: 25px 0;
    }
    .can2_caption{
        font-size: 16px;
        margin: 20px auto;
    }
    .two_btn a{
        line-height: 1.5;
        padding: 12px 0;
    }
    .can2_detail{
        margin-top: 25px;
    }
    .can2_detail p{
        line-height: 1.5;
    }
    .can2_detail span{
        font-weight: bold;
        color: #ed731f;
    }
    .merit{
        width: 90%;
        margin: 40px auto 60px;
    }
    .merit_1{
        margin: 60px auto;
    }
    .merit_2{
        
    }
    .merit_1 img, .merit_2 img{
        width: 100%;
    }
    .merit_1 div, .merit_2 div{
        width: 100%;
    }
    .merit h3{
        font-size: 22px;
        margin: 30px 0;
    }
    .merit h3:before{
        content: '';
        width: 30px;
        height: 30px;
        background: url("../images/top/check_1.png");
        background-size: contain;
        vertical-align: middle;
        display: inline-block;
        margin: -4px 10px 0 0;
    }
    .merit span{
        font-weight: bold;
    }
}


/* ---------------------------
    導入の流れからこんな問題（PC）
--------------------------- */
@media (min-width: 1024px){
    .flow{
        width: 960px;
        margin: auto;
        position: relative;
    }
    .flow ul{
        margin: 60px auto 90px;
        display: flex;
        justify-content: space-between;
    }
    .not_arrow{
        font-size: 14px;
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
        vertical-align: middle;
        background: #fff;
        text-align: center;
        padding: 40px 0 0;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
    }
    .not_arrow img{
        height: 100px;
        margin-bottom: 15px;
    }
    .not_arrow p{
        line-height: 1.5;
    }
    .not_arrow div{
        background: #ccc;
        color: #fff;
        height: 40px;
        width: 40px;
        text-align: center;
        font-weight: bold;
        border-radius: 40px;
        font-size: 16px;
        line-height: 2.5;
        margin: 0 auto 20px
    }
    .arrow img{
        width: 20px;
        margin: 135px 7px 0;
    }
    .link_sercle{
        position: absolute;
        top: 73px;
        left: 198px;
    }
    .link_sercle a{
        background: #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        height: 90px;
        width: 120px;
        border-radius: 100px;
        display: block;
        line-height: 1.3;
        padding-top: 30px;
    }
    .link_sercle a:hover{
        color: #000;
        transition-duration: 0.8s;
        background: #ffbf00;
    }
    .issue{
        width: 960px;
        margin: 0 auto;
    }
    .issue h2{
        margin-bottom: 40px;
    }
    .issue_1, .issue_2{
        display: table;
        border-spacing: 20px 10px;
        border-collapse: separate;
    }
    .issue p{
        background: #f5f5f5;
        display: table-cell;
        width: 467px;
        height: 105px;
        align-self: center;
        vertical-align: middle;
        padding: 0 25px;
        position: relative;
    }
    .issue p:before{
        content: "";
        top: 0;
        left: 0;
        border-bottom: 1.8em solid transparent;
        border-left: 1.8em solid #ed731f;
        position: absolute;
        z-index: 100;
    }
    .issue_result{
        margin-top: 30px;
    }
}

/* ---------------------------
    導入の流れからこんな問題（SP）
--------------------------- */
@media (max-width: 1024px){
    .flow{
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    .flow h2{
        margin-bottom: 50px;
    }
    .flow li{
        display: flex;
        font-weight: bold;
    }
    .not_arrow{
        width: 100%;
        vertical-align: middle;
        background: #fff;
        text-align: center;
        padding: 40px 0 0;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
    }
    .not_arrow img{
        height: 80px;
        margin-bottom: 15px;
    }
    .not_arrow div{
        background: #ccc;
        color: #fff;
        height: 40px;
        width: 40px;
        text-align: center;
        font-weight: bold;
        border-radius: 40px;
        font-size: 16px;
        line-height: 2.5;
        margin: -20px 20px 0 20px;
    }
    .not_arrow p{
        margin: 0 auto;
    }
    .arrow img{
        width: 20px;
        height: 20px;
        margin: 10px auto;
    }
    .not_arrow_2 img{
        margin-left: 25px;
        margin-right: 20px;
    }
    .not_arrow_2 p{
        margin-top: -10px;
    }
    .not_arrow_3 p{
        margin-top: -25px;
    }
    .link_sercle{
        position: absolute;
        top: 25px;
        right: -2%;
    }
    .link_sercle a{
        background: #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        font-size: 12px;
        height: 75px;
        width: 100px;
        border-radius: 100px;
        display: block;
        line-height: 1.3;
        padding-top: 25px;
    }
    .issue{
        width: 90%;
        margin: 0 auto;
        margin-top: 45px;
    }
    .issue h2{
        text-align: center;
    }
    .issue p{
        background: #f5f5f5;
        align-self: center;
        vertical-align: middle;
        padding: 25px;
        position: relative;
        margin-top: 20px;
    }
    .issue p:before{
        content: "";
        top: 0;
        left: 0;
        border-bottom: 1.8em solid transparent;
        border-left: 1.8em solid #ed731f;
        position: absolute;
        z-index: 100;
    }
    .issue_result{
        margin-top: 30px;
    }
}

/* ---------------------------
    効果（PC）
--------------------------- */
@media (min-width: 1024px){
    .effect_wrapper{
        background: #f5f5f5;
    }
    .effect{
        width: 960px;
        margin: 0 auto;
    }
    .effect h2{
        padding-top: 65px;
    }
    .effect ul{
        padding: 60px 0;
    }
    .effect li{
        background: url("../images/top/check_2.png") 20px 50% / 24px no-repeat;
        padding: 20px 20px 20px 60px;
        line-height: 2;
    }
    .effect li:nth-child(2n-1){
        background-color: #fff;
    }
    .online{
        width: 960px;
        margin: 70px auto 0;
    }
    .online_caption{
        text-align: center;
        margin: 60px auto;
    }
    .seminar_btn{
        width: 280px;
        margin: 60px auto 30px;
    }
    .seminar_btn a{
        width: 280px;
        background: url( "../images/common/yellow_arrow.png" ) 250px 50% / 12px no-repeat #47aaa1;
    }
    .seminar_btn a:hover{
        color: #000;
        transition-duration: 0.8s;
        background: url( "../images/common/green_arrow.png" ) 250px 50% / 12px no-repeat #ffbf00;
    }
    figure:target{
          display: block;
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 9999;
        overflow-y: auto;
    }
    figure:target #overlay{
        color: inherit;
        width: 80%;
        margin: 150px auto;
        text-align: left;
        background: #fff;
        padding: 40px;
    }
    figure{
      margin: 0;
      display: none;
    }
    figure:target{
        animation: fadein .3s;
    }
    @keyframes fadein{
      0%{
        transform: scale(0.2);
        opacity: 0.2;
      }
      100%{
        transform: scale(1);
        opacity: 1;
      }
    }
    .teacher{
        width: 960px;
        background: #f5f5f5;
        margin: 60px auto -20px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        padding-bottom: 80px;
    }
    .teacher h3{
        background: #344149;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 25px 0 35px;
        border-radius: 0 0 800px 800px;
        width: 160px;
        margin: 0 auto 30px;
    }
    .teacher_wrapper{
        display: flex;
        justify-content: space-evenly;
    }
    .yamana{
        margin-left: 100px;
    }
    .teacher img{
        width: 160px;
        display: inline-block;
    }
    .teacher_detail{
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
    }
    .teacher_caption{
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .teacher_name{
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    .teacher_name_caption{
        font-size: 16px;
        font-weight: normal;
        line-height: 1.2;
    }
    .teacher a{
        background: url( "../images/common/yellow_arrow.png" ) 165px 50% / 10px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 175px;
        display: block;
        padding: 15px 15px 15px 0;
        margin-top: 15px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
    }
    .teacher a:hover{
        color: #000;
        transition-duration: 0.8s;
        background: url( "../images/common/green_arrow.png" ) 165px 50% / 10px no-repeat #ffbf00;
    }
    .teacher_txt{
        font-weight: normal;
        margin-top: 20px;
        font-size: 14px;
    }
    .teacher_close{
        width: 175px;
        margin: 20px  auto 0;
        padding: 10px  0;
        background: #47aaa1;
        text-align: center;
        border-radius: 10px;
        color: #fff;
    }
    .teacher_close:hover{
        color: #000;
        transition-duration: 0.8s;
        background: #ffbf00;
    }
}

/* ---------------------------
    効果（SP）
--------------------------- */
@media (max-width: 1024px){
    .effect_wrapper{
        background: #f5f5f5;
    }
    .effect{
        width: 90%;
        margin: 0 auto;
    }
    .effect h2{
        padding-top: 40px;
    }
    .effect ul{
        padding: 30px 0;
    }
    .effect li{
        background: url("../images/top/check_2.png") 20px 50% / 24px no-repeat;
        padding: 20px 20px 20px 60px;
        line-height: 2;
    }
    .effect li:nth-child(2n-1){
        background-color: #fff;
    }
    .online{
        width: 90%;
        margin: 50px auto 0;
    }
    .online_caption{
        text-align: center;
        margin: 50px auto;
    }
    .seminar_btn{
        margin: 40px 0 20px;
    }
    figure:target{
          display: block;
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 9999;
        overflow-y: auto;
    }
    figure:target #overlay{
        color: inherit;
        width: 80%;
        margin: 60px auto;
        text-align: left;
        background: #fff;
        padding: 40px;
    }
    figure{
      margin: 0;
      display: none;
    }
    figure:target{
        animation: fadein .3s;
    }
    @keyframes fadein{
      0%{
        transform: scale(0.2);
        opacity: 0.2;
      }
      100%{
        transform: scale(1);
        opacity: 1;
      }
    }
    .teacher{
        background: #f5f5f5;
        margin: 60px auto -20px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        padding-bottom: 80px;
    }
    .teacher h3{
        background: #344149;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 25px 0 35px;
        border-radius: 0 0 800px 800px;
        width: 160px;
        margin: 0 auto 30px;
    }
    .hayashi, .yamana{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .hayashi{
        margin-bottom: 40px;
    }
    .teacher img{
        width: 130px;
        display: inline-block;
    }
    .teacher_detail{
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
        text-align: left;
    }
    .teacher_caption{
        line-height: 1.5;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .teacher_name{
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    .teacher_name_caption{
        font-size: 16px;
        font-weight: normal;
        line-height: 1.2;
    }
    .teacher a{
        background: url( "../images/common/yellow_arrow.png" ) 165px 50% / 10px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 175px;
        display: block;
        padding: 15px 15px 15px 0;
        margin-top: 15px;
        /* -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15); */
    }
    .teacher_txt{
        font-weight: normal;
        margin-top: 20px;
        font-size: 14px;
    }
    .teacher_close{
        width: 175px;
        margin: 20px  auto 0;
        padding: 10px  0;
        background: #47aaa1;
        text-align: center;
        border-radius: 10px;
        color: #fff;
    }
}

/* ---------------------------
    サービス一覧から活用例（PC）
--------------------------- */
@media (min-width: 1024px){
    .service{
        margin: -50px auto 0;
        width: 960px;
        padding-top: 150px;
    }
    .service ul{
        margin: 60px auto;
        display: flex;
        justify-content: space-between;
    }
    .service .not_arrow{
        height: 265px;
        margin-bottom: 0;
    }
    .service_caption{
        text-align: center;
    }
    .support{
        background: #f5f5f5;
    }
    .support_wrapper{
        width: 960px;
        margin: 60px auto;
        padding: 60px 0;
    }
    .support h2{
        margin-bottom: 60px;
    }
    .support img{
        width: 960px;
        margin-bottom: 60px;
    }
    .case{
        width: 960px;
        margin: 0 auto;
    }
    .case h2{
        margin-bottom: 60px;
    }
    .case_btn{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .case_btn:nth-child(1),.case_btn:nth-child(2),.case_btn:nth-child(3){
        margin-bottom: 25px;
    }
    .case_btn:nth-child(2),.case_btn:nth-child(3),
    .case_btn:nth-child(5),.case_btn:nth-child(6){
        margin-left: 25px;
    }
    .case_btn img{
        width: 300px;
        height: 200px;
        border-radius: 10px 10px 0 0;
    }
    .case a{
        display: inline-block;
        width: 300px;
        height: 260px;
        border-radius: 10px;
        background: url( "../images/common/yellow_arrow.png" ) 270px 50% / 15px no-repeat #47aaa1;
    }
    .case a:hover{
        color: #000;
        transition-duration: 0.8s;
        background: url( "../images/common/green_arrow.png" ) 270px 50% / 15px  no-repeat #ffbf00;
    }
    .case p{
        line-height: 3;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }
    .tenpo p{
        line-height: 1.2 !important;
        padding-top: 5px;
    }
    .tenpo p span{
        font-size: 14px !important;
    }
    .tenpo a{
        background: url( "../images/common/yellow_arrow.png" ) 230px 50% / 10px no-repeat #47aaa1 !important;
    }
    .tenpo a:hover{
        background: url( "../images/common/green_arrow.png" ) 230px 50% / 10px  no-repeat #ffbf00 !important;
    }
}

/* ---------------------------
    サービス一覧（SP）
--------------------------- */
@media (max-width: 1024px){
    .service{
        margin: -50px auto 0;
        width: 90%;
        padding-top: 130px;
    }
    .service ul{
        margin: 40px auto;
    }
    .service .not_arrow{
        height: max-content;
        padding: 30px 0;
        margin-bottom: 20px;
    }
    .service .not_arrow_3 p{
        margin-top: 0;
    }
.support{
        background: #f5f5f5;
    }
    .support_wrapper{
        width: 90%;
        margin: 50px auto;
        padding: 50px 0;
    }
    .support h2{
        margin-bottom: 50px;
    }
    .support img{
        width: 100%;
        margin-bottom: 50px;
    }
    .case{
        width: 90%;
        margin: 0 auto;
    }
    .case h2{
        margin-bottom: 50px;
    }
    .case_box{
        text-align: center;
    }
    .case_btn{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        width: 45%;
    }
    .case_btn:nth-child(1),.case_btn:nth-child(2),
    .case_btn:nth-child(3),.case_btn:nth-child(4){
        margin-bottom: 2.5%;
    }
    .case_btn:nth-child(2),.case_btn:nth-child(4),
    .case_btn:nth-child(6){
        margin-left: 2.5%;
    }
    .case_btn img{
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
    .case a{
        display: inline-block;
        border-radius: 10px;
        background: url( "../images/common/yellow_arrow.png" ) 270px 50% / 15px no-repeat #47aaa1;
    }
    .case p{
        line-height: 3;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }
    .tenpo p{
        line-height: 1 !important;
        padding: 6px 0;
    }
    .tenpo p span{
        font-size: 7px !important;
    }
    .tenpo a{
        background: url( "../images/common/yellow_arrow.png" ) 230px 50% / 10px no-repeat #47aaa1 !important;
    }
}

/* ---------------------------
    よくある質問（PC）
--------------------------- */
@media (min-width: 1024px){
    .qa{
        margin: 80px auto;
        width: 960px;
        line-height: 1.5;
    }
    .qa h2{
        margin-bottom: 60px;
    }
    .qa1, .qa3{
        background: #f5f5f5;
    }
    .qa1, .qa2, .qa3, .qa4{
        padding: 30px 30px 30px 90px;
    }
    .qa_question{
        position: relative;
    }
    .qa_list1 .qa_question,.qa_list3 .qa_question{
        font-weight: bold;
        background: url( "../images/top/question.png" ) 20px 50% / 45px no-repeat #f5f5f5;
    }
    .qa_list2 .qa_question,.qa_list4 .qa_question{
        font-weight: bold;
        background: url( "../images/top/question.png" ) 20px 50% / 45px no-repeat #fbfbfb;
    }
    .answer{
        display: none;
        padding-top: 0;
        padding-left: 150px;
    }
    .qa_list1 .answer,.qa_list3 .answer{
        background: url( "../images/top/answer.png" ) 90px 0px / 45px no-repeat #f5f5f5;
    }
    .qa_list2 .answer,.qa_list4 .answer{
        background: url( "../images/top/answer.png" ) 90px 0px / 45px no-repeat #fbfbfb;
    }
    .qa_question::after{
        content: url("../images/top/green_arrow.png");
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .active::after{
        content: url("../images/top/green_arrow_bottom.png");
    }
    .qa_list_wrapper{
        margin-bottom: 50px;
    }
}

/* ---------------------------
    よくある質問（SP）
--------------------------- */
@media (max-width: 1024px){
    .qa{
        margin: 60px auto;
        width: 90%;
        line-height: 1.5;
    }
    .qa h2{
        margin-bottom: 40px;
    }
    .qa1, .qa3{
        background: #f5f5f5;
    }
    .qa1, .qa2, .qa3, .qa4{
        padding: 30px 50px 30px 80px;
    }
    .qa_question{
        position: relative;
    }
    .qa_list1 .qa_question,.qa_list3 .qa_question{
        font-weight: bold;
        background: url( "../images/top/question.png" ) 20px 50% / 45px no-repeat #f5f5f5;
    }
    .qa_list2 .qa_question,.qa_list4 .qa_question{
        font-weight: bold;
        background: url( "../images/top/question.png" ) 20px 50% / 45px no-repeat #fbfbfb;
    }
    .answer{
        display: none;
        padding-top: 0;
        padding-left: 100px;
    }
    .qa_list1 .answer,.qa_list3 .answer{
        background: url( "../images/top/answer.png" ) 40px 0px / 45px no-repeat #f5f5f5;
    }
    .qa_list2 .answer,.qa_list4 .answer{
        background: url( "../images/top/answer.png" ) 40px 0px / 45px no-repeat #fbfbfb;
    }
    .qa_question::after{
        content: url("../images/top/green_arrow_mini.png");
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        right: 20px;
        top: 30px;
    }
    .active::after{
        content: url("../images/top/green_arrow_bottom_mini.png");
    }
    .qa_list_wrapper{
        margin-bottom: 30px;
    }
}

/* ---------------------------
    お問い合わせ（PC）
--------------------------- */
@media (min-width: 1024px){
    .contact_form{
        width: 960px;
        margin: -50px auto 60px;
        padding-top: 130px;
    }
    .contact_form h2{
        margin-bottom: 60px;
    }
    .contact_form p{
        font-weight: bold;
        margin-bottom: 20px;
        font-size: 18px;
    }
    .contact_form span{
        line-height: 1.5;
    }
    .form{
        width: 660px;
        margin: 60px auto 0;
        font-size: 18px;
        background: #fff;
        padding: 60px 150px;
    }
    .form dt{
        margin-bottom: 20px;
    }
    .form dd{
        margin-bottom: 40px;
    }
    .form span{
        font-size: 16px;
        text-align: center;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
    }
    .hissu{
        background: #ef7e1b;
    }
    .nini{
        background: #ffbf00;
    }
    input, select, textarea{
        background: #eee;
        color: #666;
        border-radius: 5px;
        padding: 15px 10px;
        border: none;
        width: 305px;
    }
    textarea{
        width: 640px;
        height: 150px;
    }
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url( "../images/top/gray_arrow_bottom_mini.png" ) 270px 50% / 15px no-repeat #eee;
    }
    #company, #mail_address, #contact{
        width: 100%;
    }
    #name_1, #name_2, #read_1, #read_2,
    #content, #date, #phone {
        width: 300px;
    }
    #name_2, #read_2{
        margin-left: 10px;
    }
    .submit_btn input{
        background: url( "../images/common/yellow_arrow.png" ) 270px 50% / 12px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 300px;
        display: block;
        padding: 25px 0;
        margin: 0 auto;
        cursor: pointer;
    }
    .submit_btn input:hover{
        color: #000;
        transition-duration: 0.8s;
        background: url( "../images/common/green_arrow.png" ) 270px 50% / 12px no-repeat #ffbf00;
    }
    .form_name1, .form_furigana1,
    .form_name2, .form_furigana2{
        display: inline-block;
    }
    .input_radio input{
        width: auto;
        margin: 0 10px 10px 0;
    }
}

/* ---------------------------
    お問い合わせ（SP）
--------------------------- */
@media (max-width: 1024px){
    .contact_form{
        width: 90%;
        margin: -40px auto 40px;
        padding-top: 100px;
    }
    .contact_form h2{
        margin-bottom: 25px;
    }
    .contact_form p{
        font-weight: bold;
        margin-bottom: 20px;
    }
    .contact_form span{
        line-height: 1.5;
        font-size: 12px;
    }
    .form{
        margin: 30px auto 0;
        font-size: 16px !important;
        background: #fff;
        padding: 10% 5%;
    }
    .form dt{
        margin-bottom: 20px;
    }
    .form dd{
        margin-bottom: 40px;
    }
    .form span{
        font-size: 16px;
        text-align: center;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
    }
    .hissu{
        background: #ef7e1b;
        font-size: 16px !important;
    }
    .nini{
        background: #ffbf00;
        font-size: 16px !important;
    }
    input, select, textarea{
        background: #eee;
        color: #666;
        border-radius: 5px;
        padding: 5%;
        border: none;
        width: 90%;
    }
    textarea{
        height: 100px;
    }
    select{
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url( "../images/top/gray_arrow_bottom_mini.png" ) 95% 50% / 2.5% no-repeat #eee;
    }

    #name_1, #read_1{
        margin-bottom: 5%;
    }
    .submit_btn input{
        background: url( "../images/common/yellow_arrow.png" ) 270px 50% / 12px no-repeat #47aaa1;
        color: #fff;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        width: 300px;
        display: block;
        padding: 25px 0;
        margin: 0 auto;
    }
    .form_name1, .form_furigana1,
    .form_name2, .form_furigana2{
        display: inline-block;
    }
    .form_name1 input, .form_furigana1 input,
    .form_name2 input, .form_furigana2 input{
        padding: 10% 0;
        width: 100%;
    }
    .form_name1, .form_furigana1, .form_name2, .form_furigana2{
        width: 45%;
    }
    .form_name1, .form_furigana1{
        margin-right: 2.5%;
    }
    .input_radio input{
        width: auto;
        height: auto;
        vertical-align: middle;
        background: #fff !important;
        border: 2px solid #ccc;
        border-radius: 100px;
        box-shadow: none;
    }
    .lh_plus{
        line-height: 2;
    }
}