@charset "utf-8";


/*
----------------------------------------
10px  font-size: 62.5%;
11px  font-size: 68.75%;
12px  font-size: 75%;
13px  font-size: 81.25%;
14px  font-size: 87.5%;
15px  font-size: 93.75%;
16px  font-size: 100%;
17px  font-size: 106.25%;
18px  font-size: 112.5%;
19px  font-size: 118.75%;
20px  font-size: 125%;
22px  font-size: 137.5%;
24px  font-size: 150%;
26px  font-size: 162.5%;
28px  font-size: 175%;
30px  font-size: 187.5%;
32px  font-size: 200%;
34px  font-size: 212.5%;
36px  font-size: 225%;
38px  font-size: 237.5%;
40px  font-size: 250%;
----------------------------------------
*/


/******************************************
コメント大
******************************************/

/* コメント中
---------------------------------------- */

/* コメント小 */



/******************************************
PC表示&共通
******************************************/

/* top
---------------------------------------- */

.visible-sp {
  display: none;
}

.top-wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1247px;
  padding: 60px 0 65px;
  position: relative;
  text-align: center;
  width: 100%;
}

.top-wrapper img {
  width: 100%;
}

.top-title {
  margin: 0 auto 20px;
  max-width: 555px;
  width: 44.5068163%;
}

.top-title img {
  margin-left: -7.927927927927928%;
}

.top-mainvisual01 {
  left: 0;
  max-width: 335px;
  position: absolute;
  top: 30px;
  width: 28.4683239%;
}

.top-mainvisual02 {
  max-width: 382px;
  position: absolute;
  right: 0;
  top: 65px;
  width: 30.6335204%;
}

.top-lead {
  font-weight: bold;
  line-height: 1.7;
  margin: 0 auto 30px;
  max-width: 448px;
  text-align: center;
  width: 35.8460304%;
}

.top-lead > span{
  font-size: 125%;
  font-weight: inherit;

}

.top-lead-emphasis {
  color: #de4f47;
  font-size: 187.5%;
  font-weight: inherit;
}

.top-sub-lead {
  display: inline-block;
  margin: 20px 12px 0;
  text-align: left;
}

.top-btn-start {
  margin: 0 auto;
  max-width: 448px;
  transition: all .3s;
  width: 35.8460304%;
}

.top-btn-start:hover {
  background: url(../images/top/btn-start-on.png) 0 0 no-repeat;
  background-size: contain;
  opacity: .7;
}

.top-btn-start:hover img {
  opacity: 0;
}

.top-share {
  box-sizing: border-box;
  margin: 0 auto 30px;
  max-width: 1140px;
  padding-right: 18px;
  width: 100%;
}

.top-share .share-btns {
  float: right;
}

.top-share .share-btns > li {
  float: left;
  line-height: 0;
  margin-right: 10px;
}

.top-share .share-btns > li:last-child {
  margin-right: 0;
}

/******************************************
TB表示（W1024px 以下の場合）
******************************************/
@media screen and (max-width:1024px) {
  /* top
  ---------------------------------------- */
  .top-lead {
    font-size: 87.5%;
  }

  .top-lead-emphasis {
    font-size: 125%;
  }

}

/******************************************
SP表示（W580px 以下の場合）
******************************************/
@media screen and (max-width:580px) {
  /* top
  ---------------------------------------- */
  .visible-pc {
    display: none;
  }

  .visible-sp {
    display: block;
  }

  .top-wrapper {
    padding: 10px 0 30px;
  }

  .top-title {
    margin-bottom: 10px;
    max-width: 750px;
    width: 100%;
  }

  .top-title img {
    margin-left: 0;
  }

  .top-mainvisual01 {
    display: none;
  }

  .top-mainvisual02 {
    max-width: 750px;
    position: static;
    width: 100%;
  }

  .top-lead {
    margin-bottom: 15px;
    max-width: 750px;
    width: 100%;
  }

  .top-sub-lead {
    margin-bottom: 30px;
  }

  .top-btn-start {
    max-width: 600px;
    width: 80%;
  }

  .top-share {
    margin-bottom: 15px;
    padding-right: 0;
    text-align: center;
  }

  .top-share .share-btns {
    display: inline-block;
    float: none;
  }
}