@charset "utf-8";
/* CSS Document */

#flowFrame {
  position:relative;
}
  #flowFrame li {
    position:absolute;
    display:none;
    text-indent:-9999px;
  }
  #flowFrame li.step1 {
  }
  #flowFrame li.step2 {
  }
  #flowFrame li.step3 {
  }
  #flowFrame li.step4 {
  }
  #flowFrame li.active {
    display:block;
  }

.shueiiDFrame {
}
  .shueiiDFrame dt {
  }
    .shueiiDFrame dt img {
    }
  .shueiiDFrame dd {
  }
    .shueiiDFrame dd p {
    }
    .shueiiDBtn {
      background:url("../images/btn_shueiid.png") no-repeat 0 0;
      text-indent:-9999px;
    }


a.designBtn {
  border:0;
  border-radius:8px;
  background-color:#005eae;
  color:#fff;
  font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size:1.1em;
  letter-spacing:1px;
  font-weight:bold;
  -webkit-appearance:none;
  cursor:pointer;
  padding:10px 0;
  text-align:center;
  display:block;
}
a.designBtn:hover {
  background-color:#4b8dc4;
}


/* PC */
@media screen and (min-width:769px) {
  #flowFrame {
    width:640px;
    height:50px;
    margin:24px auto 20px;
  }
    #flowFrame li {
      width:640px;
      height:50px;
    }
    #flowFrame li.step1 {
      background:url("../images/img_step1.png") no-repeat 0 0;
      background-size:640px 50px;
    }
    #flowFrame li.step2 {
      background:url("../images/img_step2.png") no-repeat 0 0;
      background-size:640px 50px;
    }
    #flowFrame li.step3 {
      background:url("../images/img_step3.png") no-repeat 0 0;
      background-size:640px 50px;
    }
    #flowFrame li.step4 {
      background:url("../images/img_step4.png") no-repeat 0 0;
      background-size:640px 50px;
    }
    #flowFrame li.active {
    }
  
  .shueiiDFrame {
    width:600px;
    margin:0 auto 40px;
    padding:24px;
    text-align:center;
    background:#fbfaf2;
    border:1px solid #eee;
  }
    .shueiiDFrame dt {
      width:240px;
      float:left;
    }
      .shueiiDFrame dt img {
        width:100%;
      }
    .shueiiDFrame dd {
      float:right;
    }
      .shueiiDFrame dd p {
        margin-bottom:8px;
      }
      .shueiiDBtn {
        width:154px;
        height:30px;
        display:block;
        background-size:154px 30px;
      }
  
  
  a.designBtn {
    width:300px;
  }
  a.designBtn:hover {
  }
}

/* Tablet */
@media screen and (max-width:768px) {
  #flowFrame {
    width:100%;
    height:50px;
    margin:24px auto 20px;
  }
    #flowFrame li {
      width:100%;
      height:50px;
    }
    #flowFrame li.step1 {
      background:url("../images/sp/img_step1.png") no-repeat 0 0;
      background-size:100% auto;
    }
    #flowFrame li.step2 {
      background:url("../images/sp/img_step2.png") no-repeat 0 0;
      background-size:100% auto;
    }
    #flowFrame li.step3 {
      background:url("../images/sp/img_step3.png") no-repeat 0 0;
      background-size:100% auto;
    }
    #flowFrame li.step4 {
      background:url("../images/sp/img_step4.png") no-repeat 0 0;
      background-size:100% auto;
    }
    #flowFrame li.active {
    }
  
  .shueiiDFrame {
    width:100%;
    margin:0 auto 40px;
    padding:24px;
    text-align:center;
    background:#fbfaf2;
    border:1px solid #eee;
  }
    .shueiiDFrame dt {
      width:100%;
      text-align:center;
    }
      .shueiiDFrame dt img {
        width:100%;
        max-width:240px;
      }
    .shueiiDFrame dd {
      width:100%;
      text-align:center;
    }
      .shueiiDFrame dd p {
        margin-bottom:8px;
      }
      .shueiiDBtn {
        width:154px;
        height:30px;
        display:block;
        background-size:154px 30px;
        margin:0 auto;
      }
  
  
  a.designBtn {
    width:300px;
  }
  a.designBtn:hover {
  }
}


#otherLinksFrame{
  margin-top: 50px;
}
#otherLinksFrame ul li a{
  margin: 0 auto 10px;
}

/* 公開実力テスト LINEリンク */
.linearea {
  background: #d9f4d9;
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
}
@media all and (max-width: 480px) {
  .linearea {
    padding: 15px;
  }
}
.linearea__copy {
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 0 !important;
}
@media all and (max-width: 896px) {
  .linearea__copy {
    text-align: left;
  }
}
.linearea__link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}
@media all and (max-width: 480px) {
  .linearea__link {
    gap: 20px;
  }
}
.linearea__link a {
  display: block;
  color: #06c755;
}
.linearea__icon {
  margin-bottom: 0 !important;
}
.linearea__icon img {
  max-width: 100px;
}
.linearea__txt {
  font-weight: 700;
  font-size: 2.5rem;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 0 !important;
}
@media all and (max-width: 480px) {
  .linearea__txt {
    font-size: 5vw;
  }
}