@charset "UTF-8";

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

  YT TENNIS SCHOOL About SP Style

========================================= */
.l-contents .inner { padding: 0; }

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

  Page Header

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

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

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

  Section

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

/* Section Heading
----------------------------------------- */
.sec-heading { margin: calc(140 / 750 * 100%) 0 calc(50 / 750 * 100%); }

/* Facility Outline
----------------------------------------- */
.facility-ol { padding: 0 0 calc(200 / 750 * 100%); }
.facility-ol dl {
  padding: 0 calc((20 * 1.1) / 750 * 100%);
  font-size: calc((24 * 1.1) / 750 * 100vw);
  flex-direction: column;
}
.facility-ol dl dt {
  width: 100%;
  padding: 1em 0 0.375em;
}
.facility-ol dl dd {
  width: 100%;
  padding: 0.375em 0 1em;
}

/* Facility Introduction
----------------------------------------- */
.facility-intro { padding: 0 0 calc(200 / 750 * 100%); }
.intro-slider figure > img {
  width: calc( 100% - ((40 * 2) / 750 * 100%) );
  margin: 0 auto;
}
.intro-slider figcaption {
  position: relative;
  bottom: 0;
  width: calc(540 / 680 * 100%);
  margin: 0 0 0 calc( 100% - calc(540 / 680 * 100%) );
  height: 210px;
  padding: 0 calc(40 / 750 * 100%);
}
.intro-slider figcaption span {
  font-size: calc((24 * 1.1) / 750 * 100vw);
}
.intro-slider figcaption p {
  top: calc(95 / 750 * 100vw * -1);
  right: 0;
  width: calc(260 / 750 * 100vw);
}

@media screen and (max-width:414px) {
  .intro-slider figcaption { height: 185px; }
}
@media screen and (max-width:375px) {
  .intro-slider figcaption { height: 165px; }
}
@media screen and (max-width:320px) {
  .intro-slider figcaption { height: 145px; }
}

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

  "slick-theme.css" Overwrite

----------------------------------------- */
/* Arrows */
.intro-slider .slick-prev,
.intro-slider .slick-next {
  top: 50%;
  width: calc(70 / 750 * 100vw);
  height: calc(70 / 750 * 100vw);
}
.intro-slider .slick-prev { left: calc( 100% - calc(500 / 680 * 100%) ); }
.intro-slider .slick-next {
  left: calc( 100% - calc(410 / 680 * 100%) );
}
.intro-slider .slick-prev:before,
.intro-slider .slick-next:before {
  width: calc(70 / 750 * 100vw);
  height: calc(70 / 750 * 100vw);
}
.slick-num {
  bottom: 0;
  font-size: calc( (20 * 1.1) / 750 * 100vw );
  padding: 0.5em 1em;
}

/* Facility Access
----------------------------------------- */
.facility-access { padding: 0 0 calc(200 / 750 * 100%); }
.access-images {
  flex-direction: column;
  margin: 0;
}
.access-images figure {
  width: 100%;
  margin: 0 0 calc(60 / 750 * 100%);
}
.access-images figure img { padding: 0 calc(85 / 750 * 100%); }
.access-images figure figcaption {
  font-size: calc( (24 * 1.1) / 750 * 100vw );
  line-height: calc(40 / 24);
  margin: 15px 0 0;
}
.access-bus { padding: calc(70 / 750 * 100%) calc(40 / 750 * 100%); }
.access-bus dl { font-size: calc( (24 * 1.1) / 750 * 100vw ); }
.access-bus dl:first-of-type { margin: 0 0 calc(80 / 750 * 100%); }
.access-map {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 calc(480 / 750 * 100%);
}
.link-map {
  font-size: calc( (24 * 1.1) / 750 * 100vw );
  margin: calc(40 / 750 * 100%) auto 0;
}

/* Rental Coat
----------------------------------------- */
.rental-coat { padding: 0 0 calc(120 / 750 * 100%); }
.rental-coat > figure {
  position: relative;
  z-index: -1;
  right: -47%;
  margin: -18% 0 0;
}
.rental-coat ul li { font-size: calc((24 * 1.1) / 750 * 100vw); }
.rental-coat table {
  font-size: calc((24 * 1.1) / 750 * 100vw);
  margin: calc(40 / 750 * 100%) 0 0;
}
.rental-coat table th, .rental-coat table td { padding: 15px 0; }
.rental-coat table tfoot td { padding: 15px 0 0; }