@charset "UTF-8";

/* =========================================

  YT TENNIS SCHOOL Class Lesson SP Style

========================================= */
.l-contents { padding: calc(120 / 750 * 100%) 0 calc(40 / 750 * 100%); }
.l-contents .inner { padding: 0; }

/* ----------------------------------------

  Page Header

----------------------------------------- */

/* Main Visual
----------------------------------------- */
.main-visual { height: auto; }

/* ----------------------------------------

  Class Lesson Contents

----------------------------------------- */

/* Lesson Intro
----------------------------------------- */
.lesson-intro { padding: calc(60 / 750 * 100%) 0 calc(90 / 750 * 100%); }
.lesson-intro h3 {
  font-size: calc(40 / 750 * 100vw);
}
.lesson-intro h3 small { font-size: calc(20 / 40 * 1em); }
.lesson-intro h3 span {
  font-size: calc(28 / 40 * 1em);
  margin: 10px 0 0;
}
.lesson-intro .inner > div { flex-direction: column; }
.lesson-intro p {
  font-size: calc((24 * 1.1) / 750 * 100vw);
  line-height: calc(40 / 24);
  padding: 0;
  margin: 0 0 calc(40 / 750 * 100%);
}
.lesson-intro figure { padding: 0 calc(70 / 750 * 100%); }

.lesson-intro.private .inner > div div {
  flex-direction: column-reverse;
  padding: 0;
}
.lesson-intro.private .inner > div div img {
  width: calc(420 / 750 * 100vw);
  margin: 0 0 calc(70 / 750 * 100%);
}
.lesson-intro.private figure { padding: 0; }

/* Lesson Contents
----------------------------------------- */
.lesson-cont { padding: calc(130 / 750 * 100%) 0; }

/* Lesson Summary */
.lesson-summary {
  width: calc(640 / 750 * 100vw);
  padding: calc(135 / 750 * 100vw) calc(30 / 750 * 100vw);
}
.lesson-summary h4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-top-left-radius: 15px;
  background-image: none;
}
.lesson-summary h4 span {
  display: flex;
  align-items: center;
  padding: calc(35 / 750 * 100%) 0 calc(20 / 750 * 100%) calc(30 / 750 * 100%);
}
.lesson-summary h4 span i {
  width: calc(40 / 750 * 100vw);
  height: calc(40 / 750 * 100vw);
  display: inline-block;
  margin: 0 10px 0 0;
}
.lesson-summary h4 span {
  font-size: calc(40 / 750 * 100vw);
  color: #ffffff;
  letter-spacing: 0.05em;
}
.lesson-summary h4 span small {
  position: relative;
  top: 0.25em;
  font-size: calc(24 / 40 * 1em);
  margin: 0 0 0 0.25em;
  display: inline-block;
}

/* Kids Class */
.lesson-summary.red1 h4 { background-color: #f44336; }
.lesson-summary.red2 h4 { background-color: #f44336; }
.lesson-summary.red12 h4 { background-color: #f44336; }
.lesson-summary.blue h4 { background-color: #269fdd; }
.lesson-summary.green h4 { background-color: #43a047; }
.lesson-summary.ore1 h4 { background-color: #f57f17; }
.lesson-summary.ore2 h4 { background-color: #ffb300; }

/* Normal Class */
.lesson-summary.nov h4 { background-color: #50d789; }
.lesson-summary.ele h4 { background-color: #4dd0e1; }
.lesson-summary.p-int h4 { background-color: #f48fb1; }
.lesson-summary.int h4 { background-color: #ffc107; }
.lesson-summary.u-int h4 { background-color: #e91e63; }
.lesson-summary.singles h4 { background-color: #8c8d93; }
.lesson-summary.stroke h4 { background-color: #c9b980; }
.lesson-summary.ladies h4 { background-color: #9966cc; }


/* Players Class */
.lesson-summary.pl1 h4 { background-color: #091271; }
.lesson-summary.pl2 h4 { background-color: #5508ac; }
.lesson-summary.pl3 h4 { background-color: #9c0669; }

.lesson-summary > figure {
  top: initial;
  right: 10px;
  bottom: 10px;
  width: calc(241 / 750 * 100vw);
  height: calc(241 / 750 * 100vw);
}
.lesson-summary dl {
  font-size: calc((24 * 1.1) / 750 * 100vw);
}
.lesson-summary dl dt span {
  height: 25px;
  line-height: 25px;
}
.lesson-summary dl dd {
  line-height: calc(40 / 24);
  margin: 10px 0 calc(50 / 750 * 100%);
}
.lesson-summary dl dd ul li {
  text-align: center;
  margin: 0 calc(40 / 750 * 100%) 0 0;
}
.lesson-summary dl dd ul li:not(:first-of-type) { margin: 0 calc(40 / 750 * 100%) 0 0; }
.lesson-summary dl dd ul li i {
  width: calc(60 / 750 * 100vw);
}

/* ----------------------------------------

  "slick-theme.css" Overwrite

----------------------------------------- */
.lesson-slider .slick-slide { margin: calc(50 / 750 * 100vw) calc(75 / 750 * 100vw * -1) 0; }
.lesson-slider .slick-center { margin: 0 calc(75 / 750 * 100vw * -1); }

/* Arrows
----------------------------------------- */
.lesson-slider .slick-prev, .lesson-slider .slick-next {
  top: 35%;
  width: calc(72 / 750 * 100vw);
  height: calc(72 / 750 * 100vw);
}
.lesson-slider .slick-prev { left: 5px; }
.lesson-slider .slick-next { right: 5px; }

.lesson-slider .slick-prev:before,
.lesson-slider .slick-next:before {
  top: calc(35% - 30px);
  width: calc(72 / 750 * 100vw);
  height: calc(72 / 750 * 100vw);
  transform: translateY(-35%);
}

/* Time Table
----------------------------------------- */
.time-table {
  padding: calc(130 / 750 * 100%) 0;
  font-size: calc((24 * 1.1) / 750 * 100vw);
  line-height: calc(40 / 24);
}
.time-table .scroll:first-of-type { margin: 0 0 calc(60 / 750 * 100%); }
.time-table .scroll {
  width: calc((100 + 4.666666) * 1%);
  overflow-x: scroll;
  padding: 0 0 15px;
}
.time-table table.weekday { width: 1080px; }
.time-table table.weekend { width: 540px; }
.time-table figure {
  position: relative;
  right: initial;
  bottom: initial;
  width: calc(290 / 750 * 100vw);
  margin: calc(30 / 750 * 100%) auto;
  text-align: center;
}
.time-table p {
  font-size: calc((22 * 1.1) / 750 * 100vw);;
  margin: calc(30 / 750 * 100%) 0 0;
}

/* Price List
----------------------------------------- */
.price-list {
  padding: calc(130 / 750 * 100%) 0 calc(90 / 750 * 100%);
  margin: 0 0 calc(60 / 750 * 100%);
  font-size: calc((24 * 1.1) / 750 * 100vw);
  line-height: calc(40 / 24);
}
.admission-fee {
  width: 100%;
  float: none;
}
.admission-fee table { width: 100%; }
.admission-fee img {
  width: calc(465 / 750 * 100vw);
}
.pl-unit .scroll {
  width: calc((100 + 4.666666) * 1%);
  overflow-x: scroll;
  padding: 0 0 15px;
  margin: 0 0 calc(60 / 750 * 100%);
}
.pl-unit .scroll table { width: 730px; }

.attention {
  margin: calc(55 / 750 * 100%) 0 0;
}

/* Course Guide
----------------------------------------- */
.guide { padding: calc(130 / 750 * 100%) 0; }
.course-unit { flex-direction: column; }
.course {
  width: 100%;
  padding: 0 calc(85 / 750 * 100%);
}
.course:first-of-type { margin: 0 0 calc(60 / 750 * 100%); }
.course dl {
  font-size: calc((24 * 1.1) / 750 * 100vw);
  line-height: calc(30 / 16);
}
.course dl dt { font-size: calc((28 * 1.1) / (24 * 1.1) * 1em); }
.course dl dd { line-height: calc(40 / 24); }

/* Reserve Banner
----------------------------------------- */
.reserve-unit {
  width: 100%;
  height: 0;
  padding: 0 0 calc(270 / 680 * 100%);
  background-image: url(../images/class_private_reserve_bg_sp.png);
}
.lesson-intro.private .reserve-unit { margin: calc(80 / 750 * 100%) 0 calc(40 / 750 * 100%); }
.l-footer .reserve-unit { margin: calc(100 / 750 * 100%) 0; }
.reserve-unit ul {
  position: relative;
  top: calc(140 / 750 * 100vw);
  left: 0;
  transform: translateX(0);
  width: 100%;
}
.reserve-unit ul li {
  font-size: calc((18 * 1.1) / 750 * 100vw);
  margin: 0 0 0.5em;
}
.reserve-unit ul li a { pointer-events: auto; }
.reserve-unit ul li a img { width: calc(440 / 750 * 100vw) }

/* Contents Slider
----------------------------------------- */
.cont-slider { margin: 0 0 calc(130 / 750 * 100%); }

.inquiry-unit::before {
  top: 0;
  margin: -8.5% 0 0;
  transform: translateX(-50%);
  width: calc(520 / 750 * 100vw);
  height: calc(140 / 750 * 100vw);
}

/* To Top
----------------------------------------- */
.totop {
  width: calc(495 / 750 * 100vw);
  margin: 0 auto calc(100 / 750 * 100%);
}
.private .totop { margin: calc(80 / 750 * 100%) auto 0; }