@charset "UTF-8";

@font-face {
  font-family: 'Good Times';
  src: url('../../static/css/fonts/GoodTimesBk-Regular.woff') format('woff'),
       url('../../static/css/fonts/GoodTimesBk-Regular.woff2') format('woff2'),
       url('../../static/css/fonts/GoodTimesBk-Regular.ttf') format('truetype');
}

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

  YT TENNIS SCHOOL Taiken PC Style

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

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

  Page Header

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

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

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

  Section Styles

----------------------------------------- */
.section > figure { text-align: center; }
.section > figure img {
  width: 100%;
  height: auto;
}
.section > figure figcaption {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 15px 0 0;
}

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

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

  Taiken Contents

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

/* Taiken Common
----------------------------------------- */
.flow-unit {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flow-item {
  background-color: #f1f7ff;
  border-top-left-radius: 25px;
  padding: 40px;
}
.flow-item dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
.flow-item dl dt {
  position: relative;
  font-size: calc(24 / 16 * 1em);
  font-weight: 600;
  color: #124ea0;
  margin: 0 0 15px;
}
.flow-item dl dd p { line-height: calc(30 / 16); }
.flow-item dl dd a {
  color: #124ea0;
  text-decoration: none;
}

/* Taiken Intro
----------------------------------------- */
.taiken-intro { padding: 0 0 130px; }
.taiken-anker {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 55px 0 145px;
}
.taiken-anker a {
  width: 330px;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--wht);
  text-decoration: none;
  border-radius: 30px;
  background-color: var(--yt-blue);
  margin: 0 40px;
  transition: all 0.3s;
}
.taiken-anker a i {
  color: #aed6ff;
  display: inline-block;
  margin: 0 10px 0 0;
}
.taiken-anker a:hover { opacity: 0.7; }

.taiken-greeting{
  position: relative;
  padding: 0 90px;
}
.taiken-greeting h4 {
  font-size: 22px;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  line-height: 2.0;
  text-align: center;
  color: var(--yt-blue);
  margin: 0 0 60px;
}
.taiken-greeting p {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: calc(30 / 16);
}
.taiken-greeting figure {
  position: absolute;
  top: -35px;
  right: 0;
}

/* Taiken Guide
----------------------------------------- */
.taiken-guide { padding: 0 0 130px; }

/* Taiken Flow
----------------------------------------- */
.taiken-flow { padding: 0 0 80px; }
.taiken-flow .flow-item {
  width: calc((100% - (60px * 2)) / 3);
  margin: 0 0 50px;
}
.taiken-flow .flow-item:last-of-type {
  background: none;
  padding: 20px 0;
}
.taiken-flow .flow-item dl dt i {
  display: block;
  margin: 0 0 5px;
}

/* Interval
----------------------------------------- */
.interval {
  height: 0;
  padding: 0 0 calc(400 / 1500 * 100%);
  background: url(../images/taiken_interval_img.png) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}

/* New Membership
----------------------------------------- */
.new-membership { padding: 130px 0; }
.new-membership > figure:not(:last-of-type) { margin: 0 0 100px; }
.new-membership > figure:last-of-type img { background-color: #f1f7ff; }

/* Membership Flow
----------------------------------------- */
.membership-flow { padding: 130px 0; }
.membership-flow .flow-unit .flow-item {
  width: calc((100% - 60px) / 2);
  margin: 0 0 60px;
}
.membership-flow .flow-item i {
  display: inline-block;
  margin: 0 10px 0 0;
}
.membership-flow .flow-item dl dt {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
}
.membership-flow .flow-item dl dd a {
  position: relative;
  display: inline-block;
  padding: 0 0 5px;
}
.membership-flow .inner > .flow-item dl dd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.membership-flow .inner > .flow-item dl dd p { width: calc(530 / 1000 * 100%); }
.membership-flow .inner > .flow-item dl dd figure img { flex-shrink: 0; }
.membership-flow .flow-item + p {
  width: 330px;
  margin: 60px auto 0;
}