/*--------------------------------------------body*/
html {
  font-size: 100%;
}

body {
  background: #fff;
  font-family: "a-otf-jun-pro", sans-serif;
  font-weight: normal;
  color: #000;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0 auto;
  padding: 0;
}

.wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  min-width: 1200px;
  position: relative;
}

img {
  width: 100%;
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

.noto_j {
  font-family: "Noto Sans Japanese";
}

/*--------------------------------------------base*/
article {
  padding: 2% 0 0;
  background-image: url(../img/bg.png);
}

h2 {
  background: linear-gradient(transparent 40%, #fff900 40%);
}

h2 img {
  width: 20%;
  margin-left: 3em;
  padding-bottom: 3px;
}

.container {
  padding-bottom: 10%;
}

.container ul {
  padding: 1% 5%;
  display: flex;
  flex-wrap: wrap;
}

.container ul li {
  width: 226.5px;
  text-align: center;
  padding: 0 2%;
  position: relative;
  margin-bottom: 25px;
}

.container ul img {
  width: 100%;
  border: solid 2px #ff45ba;
  box-sizing: border-box;
}

.container .name {
  color: #fff;
  background: #ff45ba;
  padding: .1em 0 .2em;
  margin: .5em 0 .1em;
}

.container .size {
  font-size: .9em;
  font-weight: bold;
  color: #ff45ba;
  margin: 0 0 .2em;
}

.container .time {
  color: #ff45ba;
  border: solid 2px #ff45ba;
  font-weight: bold;
  font-size: 1.1em;
  position: relative;
  margin: 2% 0 4%;
  padding-left: 1em;
}

.container .time::before {
  content: "";
  background: url(../img/icon_time.png) no-repeat;
  background-size: 100%;
  width: 31px;
  height: 38px;
  position: absolute;
  left: -1px;
  top: -2px;
}

.container .beginner {
  border: none;
  width: 40px;
  position: absolute;
  bottom: 31%;
  right: 13%;
}

[class^="tenpo-"] {
  margin: .2em 0 .4em;
  font-size: 1.2em;
  color: #fff;
}

.tenpo-ni {
  background: #1445ba;
}

.tenpo-na {
  background: #ff45ba;
}

.tenpo-um {
  background: #ff0000;
}

.tenpo-ky {
  background: #007300;
}

.tenpo-ten {
  background: #9345ba;
}

.tenpo-tani {
  background: #804500;
}

[class^="rank_"] {
  width: 48%;
  color: #fff;
  margin: 1% 0;
  display: inline-block;
}

.rank_black {
  background: #000;
}

.rank_platinum {
  background: #ff4400;
}

.rank_master {
  background: #01b800;
}

/*--------------------------------------------header*/
header {
  border-bottom: solid 1px #ff45ba;
}

header .logo {
  display: inline-block;
  width: 30%;
  padding: 1% 28% 2% 3%;
}

header .h_cta {
  display: inline-block;
  width: 30%;
  padding: 1% 2% 1% 6%;
}

/*--------------------------------------------h_nav*/
.h_nav {
  border-bottom: solid 1px #ff45ba;
}

nav ul {
  display: flex;
  padding: 2% 5%;
}

nav ul li {
  padding: 0 5%;
  width: calc(90% / 6);
}

nav ul li:last-child {
  padding-top: 2px;
}

nav ul li:hover {
  opacity: 0.6;
}

/*--------------------------------------------top*/
/*slider*/
.m_slider {
  margin-bottom: 5%;
}

.m_slider h3 {
  color: #ff45ba;
  border-radius: 5px 5px 0 0;
  border: solid 2px #ff45ba;
  display: inline-block;
  font-size: 1.1em;
  margin-left: 2em;
  margin-bottom: -3px;
  padding: .1em 1.5em .2em;
  letter-spacing: 2px;
}

.m_slider .left {
  display: inline-block;
  width: 50%;
  position: relative;
}

.m_slider .left .slider_box {
  background: #ff45ba;
  padding: 1% 0;
}

.m_slider .left .slider_box .date {
  margin: 0 0 0.5em 0;
  font-size: .85em;
  color: #fff;
}

.m_slider .left .slider_box .name {
  font-size: .9em;
  color: #fff;
  margin: 0;
}

.m_slider .left .slider_box ul {
  padding: 0 2% .5%;
  justify-content: space-around;
  overflow: hidden;
}

.m_slider .left .slider_box ul li {
  display: inline-block;
  text-align: center;
  margin: 5px 4px 0;
}

.m_slider .left .slider_box ul li img {
  width: 85%;
}

.m_slider .left .slider_box .btm p {
  background: #fff;
  color: #ff45ba;
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  padding: .4% 0;
  margin: 1% 3%;
  position: relative;
}

.m_slider .left .slider_box .btm img {
  position: absolute;
  width: 1em;
  top: 6px;
  left: 15%;
}

.m_slider .right {
  display: inline-block;
  width: 47.5%;
  float: right;
  overflow: hidden;
  position: relative;
}

.m_slider .right h3 {
  color: #000098;
  border-color: #000098;
  float: right;
  margin-right: 2em;
}

.m_slider .right img {
  border: solid 2px #000098;
  box-sizing: border-box;
}

.m_slider .right .slider_box02 {
  padding-bottom: 10%;
}

.m_slider .right .slide02_items {
  padding-left: 0;
}

.m_slider .right .slide02_items li {
  display: inline-block;
  margin: 0 0;
}

.m_slider .right .slide02_items .slick-dots {
  bottom: 21px;
}

.m_slider .right .slide02_items .slick-dots li {
  margin: 3px 5px 0;
}

.slick-prev,
.slick-arrow {
  display: none !important;
}

.slick-dots {
  width: 100%;
  padding: 0 !important;
  bottom: -37px;
}

.slick-dots li {
  display: inline-block;
  width: 20px;
  margin: 0 5px;
}

.btn {
  text-align: center;
}

.btn p {
  margin: 0 0 3% 0;
}

.btn p a {
  font-size: 1.2em;
  color: #fff;
  border-radius: 5px;
  display: inline-block;
  background: #000;
  background: -webkit-linear-gradient(top, #353535 1%, #3f3f3f 13%, #383838 27%, #2d2d2d 40%, #0f0f0f 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  background: linear-gradient(to bottom, #353535 1%, #3f3f3f 13%, #383838 27%, #2d2d2d 40%, #0f0f0f 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  line-height: 1;
  padding: 1.5% 0;
  width: 30%;
}

/*--------------------------------------------schedule*/
#schedule h2 {
  margin-bottom: 4%;
}

.week {
  display: flex;
  justify-content: space-around;
  margin: 1% auto 0;
  padding: 0 6% .5%;
}

.week li {
  background: #8f7e64;
  text-align: center;
  width: 13%;
}

.week li a {
  color: #fff;
  letter-spacing: 1px;
  font-size: 1.1em;
  display: block;
  padding: 6% 2% 7%;
}

.week li .day {
  font-size: 2.2em;
  letter-spacing: 4px;
  font-weight: 900;
  line-height: 1;
}

.week .active a {
  background: #ff897b;
}

/*--------------------------------------------about*/
.about_inr {
  background: url(../img/about_bg.png) no-repeat;
  margin: 3% 5%;
  background-size: 100%;
  height: 1700px;
}

.about_inr h3 {
  width: 40%;
  padding: 18% 0 0 9%;
}

.about_inr .content {
  padding-top: 12%;
  width: 80%;
  margin-left: 10%;
}

.about_inr .content02 {
  padding-top: 12%;
  width: 64%;
  margin-left: 18%;
}

/*--------------------------------------------event*/
.event_inr {
  width: 92%;
  margin: 0 4%;
}

.event_inr ul {
  padding: 1% 0 10% 0;
}

.event_inr ul li {
  padding: 3% 0;
}

.event_inr img {
  border: solid 2px #000098;
}

/*--------------------------------------------system*/
.system_inr {
  background: url(../img/about_bg.png) no-repeat;
  margin: 3% 5%;
  background-size: 100%;
  height: 1700px;
}

.system_inr h3 {
  width: 40%;
  padding: 18% 0 0 9%;
}

.system_inr .content01 {
  width: 86%;
  margin-left: calc(calc(100% - 86%) / 2);
  padding-top: 7%;
}

.system_inr .content02 {
  width: 70%;
  margin-left: 11%;
  padding-top: 3%;
}

.system_inr .content03,
.system_inr .content04 {
  width: 82%;
  margin-left: calc(calc(100% - 82%) / 2);
  padding-top: 3%;
}

/*--------------------------------------------footer*/
footer {
  background-image: url(../img/footer_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ff45ba;
  color: #fff;
  text-align: center;
}

footer .logo {
  margin: 2% auto 1%;
  width: 30%;
}

footer .text {
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: 5px;
  padding-bottom: 2%;
}

footer .text p {
  margin: .1em;
}

footer .link {
  text-align: center;
  width: 50%;
  margin: 0 auto 2%;
}

footer .link p {
  font-size: .8em;
  margin-bottom: .5em;
}

footer .link img {
  display: block;
}

footer .copyright {
  font-size: .8em;
}

.noexpand {
  width: auto;
}

/*--------------------------------------------pager*/
.pager {
  padding: 1% 2%;
  text-align: center;
  font-size: 1.2em;
  width: 1200px;
}

.pager .next a,
.pager .prev a {
  background: #ff45ba;
  display: inline-block;
  width: 40%;
  color: #fff;
  padding: 1% 0;
  float: right;
}

.pager .prev a {
  float: left;
}

/*--------------------------------------------pagetop*/
.pagetop {
  margin: 0;
  border-radius: 5px 5px 0 0;
  border: solid 2px #ff45ba;
  display: inline-block;
  font-size: 1.1em;
  letter-spacing: 2px;
  margin-right: 5em;
  margin-bottom: -2px;
  padding: .4em 1em;
  background: #fff;
  float: right;
}

.pagetop a {
  color: #ff45ba;
  font-weight: bold;
}

/*# sourceMappingURL=style.css.map */

.bannerWrapper {
  border: 1px solid #fff;
  padding: 30px;
}

.banner {
  text-align: left;
  width: 80%;
  margin: 0px auto 8px;
}