@charset "UTF-8";

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

  YT TENNIS SCHOOL Class Top PC Style

========================================= */
body {
  background: url(../../common/images/bg_pattern.png) no-repeat 0 0;
  background-size: contain;
}
.l-contents { padding: 120px 0; }
.l-contents .inner { padding: 0 60px; }

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

  Page Header

----------------------------------------- */
.page-header {
  padding: 0;
  background: none;
}

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

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

  Section Styles

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

/* Section Heading
----------------------------------------- */
.sec-heading::before { background-color: var(--l-blue); }

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

  Class Top Contents

----------------------------------------- */
.lesson-class-unit {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 55px 0 110px;
}
.lesson-class {
  position: relative;
  width: calc((100% - 60px) / 2);
  background-color: var(--wht);
  box-shadow: 0 0 10px 5px rgba(3,55,128,0.09);
}
.lesson-class:first-of-type, .lesson-class:nth-of-type(2) { margin: 0 0 60px; }
.outerline {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 20px rgba(237,247,255,1);
  mix-blend-mode: multiply;
  transition: all 0.3s;
  display: none;
}
.lesson-class figure { position: relative; }
.lesson-class figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #269fdd;
  background-color: var(--wht);
  padding: 10px 20px 0 10px;
  display: flex;
  align-items: center;
}
.lesson-class figure figcaption span {
  position: relative;
  font-size: 12px;
  font-size: 1.2rem;
  color: #ffffff;
  letter-spacing: 0.05em;
  background-color: #269fdd;
  display: flex;
  align-items: center;
  padding: 5px 12.5px;
  border-radius: 15px;
  margin: 0 7.5px 0 0;
}
.lesson-class figure figcaption span i {
  width: 13px;
  display: inline-block;
  margin: 0 7.5px 0 0;
}
.lesson-class > div { padding: 45px 30px 60px; }
.lesson-class > div dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin: 0 0 35px;
}
.lesson-class > div dl dt {
  font-size: calc(24 / 16 * 1em);
  font-weight: 600;
  color: var(--yt-blue);
  margin: 0 0 25px;
}
.lesson-class > div dl dd { line-height: calc(30 / 16 * 1em); }
.lesson-class > div dl dd span {
  font-size: calc(14 / 16 * 1em);
  line-height: calc(24 / 14 * 1em);
  display: inline-block;
  margin: 30px 0 0;
}
.lesson-class > div dl dd sup {
  position: relative;
  top: -5px;
  font-size: calc(8 / 16 * 1em);
}
.lesson-class .link-btn {
  position: relative;
  z-index: 2;
  width: 330px;
  margin: 0 auto;
}

.inquiry-unit::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 411px;
  height: 110px;
  background: url(../images/class_foot_txt.png) no-repeat 50% 50%;
  background-size: cover;
}