@charset "UTF-8";
/*--------------------------------------
メインコンテンツ
--------------------------------------*/
.bg-fixed {
  opacity: 1;
}

.course__royal .bg-fixed {
  background-image: url(../../common/img/cmn-royal-bg-pc.jpg);
}

.course__elite .bg-fixed {
  background-image: url(../../common/img/cmn-elite-bg-pc.jpg);
}

.course__regular .bg-fixed {
  background-image: url(../../common/img/cmn-regular-bg-pc.jpg);
}

.course__u12 .bg-fixed {
  background-image: url(../../common/img/cmn-u12-bg-pc.jpg);
}

/*--------------------------------------
コース切り替えナビ
--------------------------------------*/
.course__nav {
  background-color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.course__nav--list {
  display: flex;
  margin: 0 auto;
  width: 1200px;
  list-style: none;
  padding-left: 0;
}

.course__nav--btn {
  width: 300px;
  height: 92px;
  border-bottom: 4px solid black;
}
.course__nav--btn.royal {
  border-color: #A99200;
}
.course__nav--btn.royal a {
  color: #A99200;
}
.course__nav--btn.royal.active {
  background-color: #A99200;
}
.course__nav--btn.royal:hover {
  background-color: #A99200;
}
.course__nav--btn.elite {
  border-color: #01A7BA;
}
.course__nav--btn.elite a {
  color: #01A7BA;
}
.course__nav--btn.elite.active {
  background-color: #01A7BA;
}
.course__nav--btn.elite:hover {
  background-color: #01A7BA;
}
.course__nav--btn.regular {
  border-color: #9B0020;
}
.course__nav--btn.regular a {
  color: #9B0020;
}
.course__nav--btn.regular.active {
  background-color: #9B0020;
}
.course__nav--btn.regular:hover {
  background-color: #9B0020;
}
.course__nav--btn.u12 {
  border-color: #43A758;
}
.course__nav--btn.u12 a {
  color: #43A758;
}
.course__nav--btn.u12.active {
  background-color: #43A758;
}
.course__nav--btn.u12:hover {
  background-color: #43A758;
}
.course__nav--btn.active a {
  color: white;
  pointer-events: none;
}
.course__nav--btn a:link, .course__nav--btn a:visited, .course__nav--btn a:hover, .course__nav--btn a:active {
  text-decoration: none;
}
.course__nav--btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  font-family: "RakutenSans_Bd", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s;
}
.course__nav--btn a:hover {
  color: white;
}
.course__nav--btn a i {
  display: block;
  margin-top: 5px;
  width: 100%;
  font-size: 1.4rem;
  font-style: normal;
}

/*--------------------------------------
コンテンツ切り替えタブ
--------------------------------------*/
.course__tab {
  border-bottom: 2px solid white;
}

.course__tab--list {
  display: flex;
  margin: 0 auto;
  width: 1200px;
  padding-left: 0;
  list-style: none;
}

.course__tab--btn {
  width: 50%;
  text-align: center;
  transition: 0.2s;
  cursor: pointer;
}
.course__tab--btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  height: 102px;
  color: white;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  border-left: 1px solid white;
  box-sizing: border-box;
  text-decoration: none;
}
.course__tab--btn + .course__tab--btn a {
  border-right: 1px solid white;
}
.course__tab--btn.active {
  pointer-events: none;
}

/* ロイヤルクルー */
.course__royal .course__tab {
  background-color: #A99200;
}
.course__royal .course__tab--btn:hover {
  background-color: #8F7C05;
}
.course__royal .course__tab--btn.active {
  background-color: #8F7C05;
}

/* エリートクルー */
.course__elite .course__tab {
  background-color: #01A7BA;
}
.course__elite .course__tab--btn:hover {
  background-color: #168996;
}
.course__elite .course__tab--btn.active {
  background-color: #168996;
}

/* レギュラークルー */
.course__regular .course__tab {
  background-color: #9B0020;
}
.course__regular .course__tab--btn:hover {
  background-color: #530011;
}
.course__regular .course__tab--btn.active {
  background-color: #530011;
}

/* U-12クルー */
.course__u12 .course__tab {
  background-color: #43A758;
}
.course__u12 .course__tab--btn:hover {
  background-color: #0E8B43;
}
.course__u12 .course__tab--btn.active {
  background-color: #0E8B43;
}

/*--------------------------------------
メインビジュアル
--------------------------------------*/
.hero__lead--wrap {
  background-color: white;
  text-align: center;
}

.hero__lead--txt {
  padding: 100px 0;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ロイヤルクルー */
.course__royal .hero__lead--txt {
  color: #A99200;
}

/* エリートクルー */
.course__elite .hero__lead--txt {
  color: #01A7BA;
}

/* レギュラークルー */
.course__regular .hero__lead--txt {
  color: #9B0020;
}

/* U12クルー */
.course__u12 .hero__lead--txt {
  color: #43A758;
}

/*--------------------------------------
特典紹介
--------------------------------------*/
.course__tab--content {
  margin: 0 auto;
  width: 1296px;
}

.course__tab--head {
  padding-top: 80px;
  color: white;
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.course__tab--head + .course__content--box {
  margin-top: 80px;
}

.course__content--box {
  padding: 0 48px 80px;
  background-color: white;
  border-radius: 8px;
}
.course__content--box + .course__content--box {
  margin-top: 100px;
}

.course__content--head {
  padding: 80px 0;
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border-bottom: 4px solid black;
}
.course__content--head i {
  display: block;
  margin-top: 10px;
  font-size: 1.6rem;
  font-style: normal;
  letter-spacing: 0.04em;
}

.course__article--wrap {
  padding-top: 80px;
}
.course__article--wrap + .course__article--wrap .course__content--threelines {
  padding-top: 80px;
}

.course__content--line + .course__article--head {
  padding-top: 80px;
}

.course__content--twolines {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.course__content--twolines + .course__content--twolines {
  margin-top: 48px;
}
.course__content--twolines .course__content--article {
  width: 576px;
}
.course__content--twolines + .course__content--line {
  margin-top: 80px;
}

.course__content--threelines {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: -80px;
}
.course__content--threelines .course__content--article {
  width: 368px;
}
.course__content--threelines + .course__content--line {
  margin-top: 80px;
}

.course__article--head {
  width: 100%;
  text-align: center;
  line-height: 1;
}
.course__article--head span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0.5em;
  height: 88px;
  color: white;
  font-family: "RakutenSans_Bd", sans-serif;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  background-color: black;
}
.course__article--head span::before, .course__article--head span::after {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 88px;
  height: 88px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}
.course__article--head span::before {
  left: -87px;
}
.course__article--head span::after {
  right: -87px;
}
.course__article--head + .course__article--fig {
  margin-top: 48px;
}

.course__article--head + .course__content--line {
  margin-top: 48px;
}
.course__article--head + .course__content--twolines {
  margin-top: 48px;
}
.course__article--head + .course__content--threelines {
  margin-top: 48px;
}

/* ロイヤルクルー */
.course__royal .course__content--head {
  color: #A99200;
  border-bottom-color: #A99200;
}
.course__royal .course__article--head span {
  background-color: #A99200;
}
.course__royal .course__article--head span::before {
  background-image: url(../../course/img/royal-event-head-bg01-pc.png);
}
.course__royal .course__article--head span::after {
  background-image: url(../../course/img/royal-event-head-bg02-pc.png);
}

/* エリートクルー */
.course__elite .course__content--head {
  color: #01A7BA;
  border-bottom-color: #01A7BA;
}
.course__elite .course__article--head span {
  background-color: #01A7BA;
}
.course__elite .course__article--head span::before {
  background-image: url(../../course/img/elite-event-head-bg01-pc.png);
}
.course__elite .course__article--head span::after {
  background-image: url(../../course/img/elite-event-head-bg02-pc.png);
}

/* レギュラークルー */
.course__regular .course__content--head {
  color: #9B0020;
  border-bottom-color: #9B0020;
}
.course__regular .course__article--head span {
  background-color: #9B0020;
}
.course__regular .course__article--head span::before {
  background-image: url(../../course/img/regular-event-head-bg01-pc.png);
}
.course__regular .course__article--head span::after {
  background-image: url(../../course/img/regular-event-head-bg02-pc.png);
}

/* レギュラークルー */
.course__u12 .course__content--head {
  color: #43A758;
  border-bottom-color: #43A758;
}
.course__u12 .course__article--head span {
  background-color: #43A758;
}
.course__u12 .course__article--head span::before {
  background-image: url(../../course/img/u12-event-head-bg01-pc.png);
}
.course__u12 .course__article--head span::after {
  background-image: url(../../course/img/u12-event-head-bg02-pc.png);
}

.course__article--fig {
  position: relative;
}
.course__article--fig figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 0;
  width: 100%;
  min-height: 64px;
  color: white;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background-color: rgba(155, 0, 32, 0.8);
}
.course__article--fig figcaption span {
  text-align: center;
}
.course__article--fig figcaption span i {
  display: block;
  margin: 0;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.course__article--fig figcaption i {
  display: inline-block;
  margin-left: 1em;
}
.course__article--fig figcaption i.ico-set {
  width: 79px;
}
.course__article--fig figcaption i.ico-network {
  width: 30px;
}
.course__article--fig figcaption i.ico-stadium {
  width: 33px;
}
.course__article--fig + .course__article--desc {
  margin-top: 16px;
}

.course__article--desc {
  display: block;
  font-size: 1.4rem;
}
.course__article--desc ul {
  padding-left: 0;
  list-style: none;
}
.course__article--desc ul li {
  position: relative;
  padding-left: 1em;
}
.course__article--desc ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "・";
}
.course__article--desc .supplement__wrap {
  margin-top: 16px;
}
.course__article--desc .supplement__wrap.right {
  text-align: right;
}
.course__article--desc .supplement {
  display: block;
}
.course__article--desc .supplement span {
  display: inline-flex;
  align-items: center;
  padding: 0 1.5em;
  height: 48px;
  color: #9B0020;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid #9B0020;
  border-radius: 24px;
}
.course__article--desc .supplement i {
  display: inline-block;
  margin-right: 0.5em;
}
.course__article--desc .supplement .ico-mail {
  width: 20px;
}
.course__article--desc .supplement .ico-set {
  width: 89px;
}
.course__article--desc .supplement + .supplement {
  margin-top: 16px;
}
.course__article--desc .course__article-notes {
  list-style: none;
}
.course__article--desc .course__article-notes li {
  position: relative;
}
.course__article--desc .course__article-notes li::before {
  content: "※";
}

/*--------------------------------------
コース／特典ボタン群
--------------------------------------*/
.course__join--wrap {
  margin-top: 100px;
  background-color: white;
}

.course__join--link {
  margin: 0 auto;
  padding: 80px 0;
  width: 576px;
  list-style: none;
}

.course__join--btn {
  width: auto;
  height: 96px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.course__join--btn + .course__join--btn {
  margin-top: 48px;
}
.course__join--btn.course-unique a {
  color: white;
}
.course__join--btn.course-unique a .newopen svg {
  fill: white;
}
.course__join--btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.course__join--btn a .arrow {
  position: absolute;
  right: 20px;
}

/* ロイヤルクルー */
.course__royal .course-unique {
  background-color: #A99200;
}

/* エリートクルー */
.course__elite .course-unique {
  background-color: #01A7BA;
}

/* レギュラークルー */
.course__regular .course-unique {
  background-color: #9B0020;
}

/* U-12クルー */
.course__u12 .course-unique {
  background-color: #43A758;
}

/*--------------------------------------
特典引換について
--------------------------------------*/
.course__exchange--wrap {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.course__exchange--ttl {
  padding: 20px 0;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 40px;
  font-weight: 900;
  text-align: center;
}

.course__exchange--link {
  background-color: rgba(255, 255, 255, 0.32);
}

.course__exchange--list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 64px 0 100px;
  width: 1200px;
  list-style: none;
}

.course__exchange--btn {
  width: 368px;
  height: 80px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.course__exchange--btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.course__exchange--btn a span {
  display: block;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
}
.course__exchange--btn a span i {
  display: block;
  width: 100%;
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 500;
}
.course__exchange--btn a .arrow {
  position: absolute;
  right: 20px;
}
.course__exchange--btn + .course__exchange--btn {
  margin-left: 48px;
}

/* ロイヤルクルー */
.course__royal .course__exchange--ttl {
  color: #530011;
}
.course__royal .course__exchange--wrap {
  background-image: url(../../common/img/cmn-royal-bg-pc.jpg);
}

/* エリートクルー */
.course__elite .course__exchange--ttl {
  color: #01A7BA;
}
.course__elite .course__exchange--wrap {
  background-image: url(../../common/img/cmn-elite-bg-pc.jpg);
}

/* レギュラークルー */
.course__regular .course__exchange--ttl {
  color: #9B0020;
}
.course__regular .course__exchange--wrap {
  background-image: url(../../common/img/cmn-regular-bg-pc.jpg);
}

/* U-12クルー */
.course__u12 .course__exchange--ttl {
  color: #43A758;
}
.course__u12 .course__exchange--wrap {
  background-image: url(../../common/img/cmn-u12-bg-pc.jpg);
}

@media (max-width: 768px) {
  /*--------------------------------------
  メインコンテンツ
  --------------------------------------*/
  .bg-fixed {
    opacity: 1;
  }
  .course__royal .bg-fixed {
    background-image: url(../../common/img/cmn-royal-bg-sp.jpg);
  }
  .course__elite .bg-fixed {
    background-image: url(../../common/img/cmn-elite-bg-sp.jpg);
  }
  .course__regular .bg-fixed {
    background-image: url(../../common/img/cmn-regular-bg-sp.jpg);
  }
  .course__u12 .bg-fixed {
    background-image: url(../../common/img/cmn-u12-bg-sp.jpg);
  }
  /*--------------------------------------
  コース切り替えナビ
  --------------------------------------*/
  .course__nav--list {
    width: auto;
  }
  .course__nav--btn {
    width: 25%;
    height: auto;
  }
  .course__nav--btn a {
    padding: 2.5641025641vw 0;
    font-size: 5.1282051282vw;
  }
  .course__nav--btn a i {
    margin-top: 1.2820512821vw;
    font-size: 3.0769230769vw;
  }
  /*--------------------------------------
  コンテンツ切り替えタブ
  --------------------------------------*/
  .course__tab {
    border-bottom: 1px solid white;
  }
  .course__tab--list {
    width: auto;
    border-right: none;
  }
  .course__tab--btn a {
    margin: 0;
    height: 17.4358974359vw;
    font-size: 5.1282051282vw;
    border-left: none;
  }
  .course__tab--btn + .course__tab--btn a {
    border-right: none;
    border-left: 1px solid white;
  }
  /*--------------------------------------
  メインビジュアル
  --------------------------------------*/
  .hero__lead--txt {
    padding: 10.2564102564vw 5.1282051282vw;
    font-size: 2.2rem;
    line-height: 1.8;
  }
  /*--------------------------------------
  特典紹介
  --------------------------------------*/
  .course__tab--content {
    margin: 0 auto;
    width: auto;
  }
  .course__tab--head {
    padding-top: 20.5128205128vw;
    font-size: 4rem;
  }
  .course__tab--head + .course__content--box {
    margin-top: 20.5128205128vw;
  }
  .course__content--box {
    margin: 5.1282051282vw;
    padding: 0 5.1282051282vw 10.2564102564vw;
  }
  .course__content--box + .course__content--box {
    margin-top: 10.2564102564vw;
  }
  .course__content--head {
    padding: 10.2564102564vw 0;
    font-size: 7.1794871795vw;
    border-bottom-width: 2px;
  }
  .course__content--head i {
    margin-top: 1em;
    font-size: 3.0769230769vw;
  }
  .course__article--wrap {
    padding-top: 10.2564102564vw;
  }
  .course__content--line + .course__article--head {
    padding-top: 10.2564102564vw;
  }
  .course__content--twolines {
    display: block;
  }
  .course__content--twolines + .course__content--twolines {
    margin-top: 10.2564102564vw;
  }
  .course__content--twolines .course__content--article {
    width: auto;
  }
  .course__content--twolines .course__content--article + .course__content--article {
    margin-top: 10.2564102564vw;
  }
  .course__content--twolines + .course__content--line {
    margin-top: 10.2564102564vw;
  }
  .course__content--threelines .course__content--article {
    margin-top: 3.0769230769vw;
    width: 38.4615384615vw;
  }
  .course__content--threelines + .course__content--line {
    margin-top: 10.2564102564vw;
  }
  .course__article--head span {
    height: 16.4102564103vw;
    font-size: 2rem;
    line-height: 1.2;
  }
  .course__article--head span::before, .course__article--head span::after {
    width: 6.1538461538vw;
    height: 16.4102564103vw;
    background-size: auto 100%;
  }
  .course__article--head span::before {
    left: -5.641025641vw;
  }
  .course__article--head span::after {
    right: -5.641025641vw;
  }
  /* ロイヤルクルー */
  .course__royal .course__article--head span::before {
    background-image: url(../../course/img/royal-event-head-bg01-sp.png);
  }
  .course__royal .course__article--head span::after {
    background-image: url(../../course/img/royal-event-head-bg02-sp.png);
  }
  /* エリートクルー */
  .course__elite .course__article--head span::before {
    background-image: url(../../course/img/elite-event-head-bg01-sp.png);
  }
  .course__elite .course__article--head span::after {
    background-image: url(../../course/img/elite-event-head-bg02-sp.png);
  }
  /* レギュラークルー */
  .course__regular .course__article--head span::before {
    background-image: url(../../course/img/regular-event-head-bg01-sp.png);
  }
  .course__regular .course__article--head span::after {
    background-image: url(../../course/img/regular-event-head-bg02-sp.png);
  }
  /* U12クルー */
  .course__u12 .course__article--head span::before {
    background-image: url(../../course/img/u12-event-head-bg01-sp.png);
  }
  .course__u12 .course__article--head span::after {
    background-image: url(../../course/img/u12-event-head-bg02-sp.png);
  }
  .course__article--fig figcaption {
    padding: 2.0512820513vw 2.0512820513vw;
    min-height: 14.358974359vw;
    font-size: 4.1025641026vw;
    line-height: 1.4;
    letter-spacing: 0;
  }
  .course__article--fig figcaption span i {
    font-size: 3.0769230769vw;
  }
  .course__article--fig figcaption i.ico-set {
    width: 17.1794871795vw;
  }
  .course__article--fig figcaption i.ico-network {
    width: 7.6923076923vw;
  }
  .course__article--fig figcaption i.ico-stadium {
    width: 7.6923076923vw;
  }
  .course__article--desc {
    font-size: 3.5897435897vw;
  }
  .course__article--desc .supplement__wrap {
    margin-top: 4.1025641026vw;
  }
  .course__article--desc .supplement span {
    height: 9.2307692308vw;
    font-size: 3.0769230769vw;
    border-radius: 6.1538461538vw;
  }
  .course__article--desc .supplement .ico-mail {
    width: 4.1025641026vw;
  }
  .course__article--desc .supplement .ico-set {
    width: 20.5128205128vw;
  }
  .course__article--desc .supplement + .supplement {
    margin-top: 4.1025641026vw;
  }
  /*--------------------------------------
  コース／特典ボタン群
  --------------------------------------*/
  .course__join--wrap {
    margin-top: 10.2564102564vw;
  }
  .course__join--link {
    display: block;
    margin: 0 5.1282051282vw;
    padding: 10.2564102564vw 0;
    width: auto;
  }
  .course__join--btn {
    width: auto;
    height: 16.4102564103vw;
  }
  .course__join--btn + .course__join--btn {
    margin-top: 6.1538461538vw;
  }
  .course__join--btn a {
    font-size: 5.1282051282vw;
  }
  /*--------------------------------------
  特典引換について
  --------------------------------------*/
  .course__exchange--ttl {
    padding: 4.1025641026vw 0;
    font-size: 6.1538461538vw;
  }
  .course__exchange--list {
    display: block;
    margin: 0 5.1282051282vw;
    padding: 10.2564102564vw 0 10.2564102564vw;
    width: auto;
  }
  .course__exchange--btn {
    width: auto;
    height: 16.4102564103vw;
  }
  .course__exchange--btn + .course__exchange--btn {
    margin-top: 6.1538461538vw;
    margin-left: 0;
  }
  .course__exchange--btn a span {
    font-size: 5.1282051282vw;
  }
  .course__exchange--btn a span i {
    font-size: 3.0769230769vw;
  }
  /* ロイヤルクルー */
  .course__royal .course__exchange--ttl {
    color: #530011;
  }
  .course__royal .course__exchange--wrap {
    background-image: url(../../common/img/cmn-royal-bg-sp.jpg);
  }
  /* エリートクルー */
  .course__elite .course__exchange--wrap {
    background-image: url(../../common/img/cmn-elite-bg-sp.jpg);
  }
  /* レギュラークルー */
  .course__regular .course__exchange--wrap {
    background-image: url(../../common/img/cmn-regular-bg-sp.jpg);
  }
  /* U-12クルー */
  .course__u12 .course__exchange--wrap {
    background-image: url(../../common/img/cmn-u12-bg-sp.jpg);
  }
}