/* うたスキキャンペーン */

.naviapp-step{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.naviapp-step li {
    width: 400px;
    padding: 20px;
    margin: 10px;
    border-radius: 18px;
}


.utasuki-cmp-step{
  width: 90%;
  display: flex;
  border: solid 4px #c8e9ff;
  border-radius: 20px;
  padding: 30px;
  margin: auto;
}

.utasuki-cmp-step-4{
    width: 90%;
    display: block;
    border: solid 4px #c8e9ff;
    border-radius: 20px;
    padding: 30px;
    margin: auto;
}

.utasuki-cmp-step-left-4{
    text-align: center;
    width: 100%;
}

.utasuki-cmp-step-right-4{
    margin: 20px auto 0;
    width: 95%;
}

.utasuki-cmp-step-left{
  width: 55%;
}

.utasuki-cmp-step-right{
  width: 45%;
  margin: 20px 0 0 30px;
}

.utasuki-cmp-step-text{
    font-size: 18px;
    font-weight: bold;
}

.naviapp-step-btn{
    background: #3a3a3a;
    width: 37%;
    padding: 15px;
    margin: 10px 5px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 30px;
}

.utasuki-cmp-step-caution{
    font-size: 18px;
    margin-top: 10px;
}

.step-triangle{
    margin: 20px auto;
    width:0;
    height:0;
    border-style:solid;
    border-width: 20px 15px 0 15px;
    border-color: #00A5FF transparent transparent transparent;
}

.utasuki-cmp-step-store{
    font-size: 18px;
    text-align: center;
    margin: 20px;
}

.utasuki-cmp-tips{
    font-size: 18px;
    font-weight: bold;
    background: #00a5ff;
    color: #fff;
    padding: 5px 20px;
    display: inline-block;
    border-radius: 20px;
    margin-top: 5px;
}

.utasuki-cmp-about{
    background: #c8e9ff;
    padding: 20px 0;
}

.utasuki-cmp-info{
    width: 90%;
    border-radius: 20px;
    margin: 30px auto;
    background: #fff;
    border: solid 4px #00a5ff;
    padding: 20px;
}

.utasuki-cmp-text{
    font-size: 21px;
    text-align: left;
    font-weight: bold;
    color: #00a5ff;
}

.utasuki-cmp-text span{
    font-size: 24px;
    font-weight: bold;
    color: #e8404c;
}
.utasuki-cmp-text-center{
    font-size: 21px;
    text-align: center;
    font-weight: bold;
    color: #00a5ff;
}

.utasuki-cmp-info-img{
    display: flex;
    justify-content: center;
    padding: 30px;
    width: 700px;
    margin: 0 auto;
}

.utasuki-btn{
    text-align: center;
}

.utasuki-btn a{
        display: inline-block;
    background: #c8e9ff;
    color: #00a5ff;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    width: 200px;
    text-align: center;
    margin-top: 10px;
}


@media screen and (max-width: 767px) {
    .utasuki-cmp-step{
        width: 88%;
        display: block;
        padding: 20px 15px;
    }

    .utasuki-cmp-step-left {
    width: 100%;
    }

    .utasuki-cmp-step-right {
    width: 100%;
    margin: 10px auto 0;
    }

    .utasuki-cmp-step-text {
    font-size: 16px;
    }

    .utasuki-cmp-text-center{
    font-size: 16px;
    }


    .naviapp-step-btn {
    width: 80%;
    padding: 5px;
    margin: 10px auto;
    display: block;
    font-size: 14px;
    }

    .utasuki-cmp-step-caution {
    font-size: 14px;
    }

    .utasuki-cmp-step-store {
    font-size: 14px;
    margin: 10px;
    }

    .utasuki-cmp-tips {
    font-size: 14px;
    }

    .utasuki-cmp-step-4{
    width: 88%;
    padding: 20px;
    } 

    .utasuki-cmp-step-left-4 {
    width: 80%;
    margin: 0 auto;
    }

    .utasuki-cmp-step-right-4 {
    margin: 20px auto 0;
    width: 100%;
    }

    .utasuki-cmp-about {
    padding: 20px 10px;
    }

    .utasuki-cmp-text span {
    font-size: 18px;
    }

    .utasuki-cmp-text {
    font-size: 16px;
    }

    .utasuki-cmp-info {
    width: 88%;
    padding: 20px 15px;
    }

    .utasuki-cmp-info-img {
    display: block;
    padding: 0;
    width: 90%;
    margin: 0 auto;
    }

    .utasuki-btn a {
    font-size: 16px;
    }

    
}