/*****************************************************************************
CSS only for Fanclub free page
*****************************************************************************/

.CategoryNav {
  border-bottom: 1px solid #D6D6D6;
}

/* Fanclub
-----------------------------------------*/
.Fanclub  {
  margin: 0 auto;
  max-width: 976px;
}
@media screen and (max-width: 976px) {
  .Fanclub  {
    margin: 0 20px;
  }
}

/* InfoArea
-----------------------------------------*/
.InfoArea {
  text-align: center;
  border: solid 1px #d6d6d6;
  padding: 25px;
  margin-top: 64px;
}
.InfoArea + .InfoArea {
  margin-top: 24px;
}
.InfoArea p {
  font-size: 18px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .InfoArea p {
    font-size: 16px;
    text-align: left;
  }
}

/* SecTitle
-----------------------------------------*/
.SecTitle {
  font-weight: bold;
  text-align: center;
  padding-top: 118px;
  margin-bottom: 68px;
}
@media screen and (max-width: 767px) {
  .SecTitle {
    padding-top: 80px;
    margin-bottom: 40px;
  }
}
.SecTitle > strong {
  font-size: 42px;
  display: block;
  position: relative;
  padding-top: 25px;
}
@media screen and (max-width: 767px) {
  .SecTitle > strong {
    font-size: 25px;
  }
}
.SecTitle > strong::before {
  content: "";
  background-color: #004ea2;
  width: 75px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.SecTitle strong > span {
  background:linear-gradient(transparent 75%, #f7e178 75%)
}
.SecTitle small {
  font-size: 28px;
  display: block;
}
@media screen and (max-width: 767px) {
  .SecTitle small {
    font-size: 22px;
  }
}
.SecSubtitle {
  font-size: 20px;
  color: #fff;
  background-color: #004ea2;
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 39px;
}
@media screen and (max-width: 767px) {
  .SecSubtitle {
    font-size: 16px;
    margin-bottom: 24px;
  }
}
.SecSubtitle > span {
  position: relative;
  display: inline-block;
  padding-left: 16px;
}
.SecSubtitle > span::before {
  content: '';
  display:inline-block;
  background-color: #fff;
  width: 5px;
  height: 67%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  position: absolute;
}
@media screen and (max-width: 767px) {
  .SecSubtitle > span::before {
    width: 4px;
  }
}

/* Desc
-----------------------------------------*/
.Desc {
  margin-top: 90px;
}
@media screen and (max-width: 767px) {
  .Desc {
    margin-top: 60px;
  }
}
.Desc__inner:not(:first-child) {
  margin-top: 65px;
}
@media screen and (max-width: 767px) {
  .Desc__inner:not(:first-child) {
    margin-top: 55px;
  }
}
.Desc__inner > p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .Desc__inner > p {
    font-size: 14px;
  }
}

/* CircleList
-----------------------------------------*/
.CircleList {
  margin-bottom: 1.1em;
}
.CircleList li {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  padding-left: 1em;
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .CircleList li {
    font-size: 14px;
  }
}
.CircleList li::before {
  position: absolute;
  top: 3px;
  left: 1px;
  content: "●";
  color: #AAA;
  font-size: 12px;
}

/* Free
-----------------------------------------*/
.Lead {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Lead {
    font-size: 16px;
  }
}
.BnrBox {
  margin-top: 100px;
}
.BnrBox a:hover {
  opacity: .8;
}
.BnrBox img {
  max-width: 100%;
  height: auto;
}

/* Free Invite
-----------------------------------------*/
.Invite {
  margin-top: 75px;
}
@media screen and (max-width: 767px) {
  .Invite {
    margin-top: 50px;
  }
}
.Invite__inner {
  background-color: #fff;
  padding: 60px;
}
@media screen and (max-width: 767px) {
  .Invite__inner {
    padding: 30px 20px;
  }
}
.SecSubtitle--invert {
  font-size: 18px;
  color: #000;
  background-color: #fff;
  margin-bottom: 1em;
}
.SecSubtitle--invert > span::before {
  background-color: #004ea2;
}
.Invite__text > p {
  line-height: 1.8;
  margin-bottom: 2em;
}
.Invite__subTitle {
  font-weight: bold;
  color: #004ea2;
  font-size: 18px;
  margin-top: 1.5em;
  margin-bottom: .4em;
}
.Invite__list {
  margin-bottom: 32px;
}
.Invite__list li {
  line-height: 1.75;
  text-indent: -1em;
  padding-left: 1em;
}

/* NextBtn
-----------------------------------------*/
.Apply {
  text-align: center;
  margin-top: 66px;
}
@media screen and (max-width: 767px) {
  .Apply {
    margin-top: 40px;
  }
}

.NextBtn {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  display: inline-block;
}
@media screen and (max-width: 976px) {
  .NextBtn {
    font-size: 22px;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn {
    font-size: 13px;
    display: block;
  }
}
.NextBtn + .NextBtn {
  margin-top: 32px;
}
.NextBtn span {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 696px;
  max-width: 100%;
  min-height: 85px;
  position: relative;
  border-radius: 61px;
  padding: 0.73em 2.3em 0.73em 1.8em;
  box-sizing: border-box;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .NextBtn span {
    width: 560px;
    border-radius: 40px;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn span {
    width: 100%;
    min-height: 45px;
  }
}
.NextBtn span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 27px;
  width: 23px;
  height: 23px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 976px) {
  .NextBtn span::after {
    width: 18px;
    height: 18px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn span::after {
    right: 11px;
    width: 13px;
    height: 13px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
  }
}

.NextBtn a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  pointer-events: none;
}

.NextBtn a:link    { color: #fff; text-decoration: none; }
.NextBtn a:visited { color: #fff; text-decoration: none; }
.NextBtn a:hover   { color: #fff; text-decoration: none; }
.NextBtn a:focus   { color: #fff; text-decoration: none; }
.NextBtn a:active  { color: #fff; text-decoration: none; }

.NextBtn small {
  font-size: 18px;
  display: block;
}
@media screen and (max-width: 976px) {
  .NextBtn small {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .NextBtn small {
    font-size: 10px;
  }
}

.NextBtn--active span {
  background-color: #f5515a;
  box-shadow: 3px 5px #e62933;
}
.NextBtn--active span:hover {
  background-color: rgba(245, 81, 90, .8);
}
.NextBtn--active a {
  pointer-events: auto;
}

.NextBtn.active span {
  background-color: #d63951;
}
.NextBtn.active span:hover,
.NextBtn.active span a:focus,
.NextBtn.active span a:active {
  background-color: rgba(214, 57, 81, .8);
}
.NextBtn.active a {
  pointer-events: auto;
}

/* LinkBtn
-----------------------------------------*/
.LinkBtn {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .LinkBtn {
    font-size: 14px;
    display: block;
  }
}
.LinkBtn span {
  background-color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  min-height: 59px;
  position: relative;
  padding: 0.5em 2em 0.5em 1.5em;
  box-sizing: border-box;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .LinkBtn span {
    width: 100%;
    min-height: 48px;
  }
}
.LinkBtn span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .LinkBtn span::after {
    right: 14px;
    width: 8px;
    height: 8px;
  }
}
.LinkBtn a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  pointer-events: none;
}
.LinkBtn a:hover {
  opacity: .8;
}

.LinkBtn a:link    { color: #fff; text-decoration: none; }
.LinkBtn a:visited { color: #fff; text-decoration: none; }
.LinkBtn a:hover   { color: #fff; text-decoration: none; }
.LinkBtn a:focus   { color: #fff; text-decoration: none; }
.LinkBtn a:active  { color: #fff; text-decoration: none; }

.LinkBtn--active a {
  pointer-events: auto;
}
.LinkBtn--active span {
  background-color: #000;
}