@charset "UTF-8";
/* ブレイクポイント
   ========================================================================== */
/* フォント
   ========================================================================== */
/* 色
   ========================================================================== */
/* トップページ
   ========================================================================== */
main > article {
  background-color: #000; }

/* メインイメージ
   ========================================================================== */
.main-image {
  height: auto;
  background: url("../img/main-img_bg.png") repeat-x left 0 bottom 0; }
  .main-image .wrap {
    position: relative;
    height: 340px; }
    .main-image .wrap img {
      position: absolute; }
      .main-image .wrap img:nth-child(1) {
        z-index: 1;
        height: 90px;
        top: 50%;
        transform: translateY(-50%); }
      .main-image .wrap img:nth-child(2) {
        z-index: 2;
        bottom: 0;
        right: 10px;
        height: 210px; }
      .main-image .wrap img:nth-child(3) {
        z-index: 3;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto; }
      .main-image .wrap img:nth-child(4) {
        z-index: 4;
        right: 16px;
        bottom: 16px;
        height: 60px; }
  @media (min-width: 768px) {
    .main-image {
      background-size: 100% 400px; }
      .main-image .wrap {
        height: 400px; }
        .main-image .wrap img:nth-child(1) {
          top: 30px;
          height: 170px;
          left: 40px;
          transform: translateX(0); }
        .main-image .wrap img:nth-child(2) {
          top: auto;
          right: 40px;
          left: auto;
          bottom: 0;
          height: 372px;
          transform: translateX(0); }
        .main-image .wrap img:nth-child(3) {
          top: auto;
          left: 40px;
          bottom: 30px;
          width: auto;
          height: 100px;
          transform: translateX(0); }
        .main-image .wrap img:nth-child(4) {
          right: 40px;
          bottom: 30px;
          height: 90px; } }
  @media (min-width: 1025px) {
    .main-image {
      background-size: 100% 600px; }
      .main-image .wrap {
        width: 1200px;
        height: 600px;
        margin: 0 auto; }
        .main-image .wrap img:nth-child(1) {
          top: 80px;
          left: 0;
          height: auto; }
        .main-image .wrap img:nth-child(2) {
          right: 0;
          bottom: 0;
          height: auto; }
        .main-image .wrap img:nth-child(3) {
          left: 0;
          bottom: 35px;
          height: auto; }
        .main-image .wrap img:nth-child(4) {
          right: 50px;
          bottom: 56px;
          height: auto; } }

/* アニメーション
========================================= */
.main-image {
  opacity: 0;
  animation: fadeIn 2s ease forwards; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* 2コンテンツ共通
   ========================================================================== */
.specialized,
.experts {
  display: flex;
  margin-top: 0; }
  .specialized__txt,
  .experts__txt {
    background-color: #fff; }
    .specialized__txt > div,
    .experts__txt > div {
      padding: 20px; }
  .specialized__image img,
  .experts__image img {
    height: 200px; }
  .specialized__ttl,
  .experts__ttl {
    font-size: clamp(2.4rem, 3vw, 4.8rem);
    font-weight: bold;
    text-align: center; }
  .specialized p,
  .experts p {
    font-size: 1.6rem;
    margin-top: 1em; }
  .specialized__btn,
  .experts__btn {
    text-align: center;
    padding: 0; }
    .specialized__btn a,
    .experts__btn a {
      display: inline-block;
      font-weight: bold;
      padding: .35em 1em;
      margin-top: 1em;
      border: 2px solid #000;
      transition: .3s; }
      @media (hover: hover) {
        .specialized__btn a:hover,
        .experts__btn a:hover {
          opacity: .5; } }
  @media (min-width: 768px) {
    .specialized,
    .experts {
      position: relative;
      overflow: hidden;
      min-height: 400px;
      margin-top: 30px; }
      .specialized__txt,
      .experts__txt {
        flex: 1;
        display: flex;
        align-items: center;
        max-width: 50%; }
        .specialized__txt > div,
        .experts__txt > div {
          padding: 20px 30px; }
      .specialized__image,
      .experts__image {
        flex: 1;
        display: flex;
        align-items: center;
        max-width: 50%; }
      .specialized::after,
      .experts::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0; }
      .specialized__ttl,
      .experts__ttl {
        text-align: left;
        line-height: 1; }
      .specialized p,
      .experts p {
        font-size: 1.4rem; }
      .specialized__btn,
      .experts__btn {
        text-align: left; }
        .specialized__btn a,
        .experts__btn a {
          font-size: 1.6rem;
          padding: .35em 2em; } }
  @media (min-width: 1025px) {
    .specialized,
    .experts {
      min-height: 600px;
      margin-top: 40px; }
      .specialized__txt > div,
      .experts__txt > div {
        padding: 40px; }
      .specialized p,
      .experts p {
        font-size: 1.8rem;
        line-height: 2; }
      .specialized__btn,
      .experts__btn {
        text-align: left; }
        .specialized__btn a,
        .experts__btn a {
          font-size: 2rem;
          padding: .75em 2.5em; }
      .specialized .notice,
      .experts .notice {
        font-size: 1.6rem; } }

/* RE:DRIVEがテニス特化である理由
   ========================================================================== */
.specialized {
  flex-direction: column; }
  .specialized__lead {
    margin-top: 1em; }
    .specialized__lead p {
      font-weight: bold;
      text-align: center;
      line-height: 1.6;
      margin-top: .5em; }
      .specialized__lead p:last-of-type {
        font-weight: normal;
        text-align: left;
        margin-top: 1em; }
  .specialized__image {
    background: #1f1f1f url("../img/specialized-bg.png") repeat top left/50px auto; }
    .specialized__image img {
      margin: 0 auto; }
  @media (min-width: 768px) {
    .specialized {
      flex-direction: row;
      background: #fff; }
      .specialized__txt {
        justify-content: flex-end; }
      .specialized__lead {
        padding-right: 40px;
        margin-top: 1.5em; }
        .specialized__lead p {
          text-align: left;
          line-height: 1.7; }
      .specialized__image {
        background: none;
        justify-content: flex-start;
        z-index: 2; }
        .specialized__image img {
          max-height: 630px;
          height: auto; }
      .specialized::after {
        background: #1f1f1f url("../img/specialized-bg.png") repeat top left/100px auto;
        clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
        z-index: 0; } }
  @media (min-width: 1025px) {
    .specialized__lead {
      padding-right: 80px;
      margin-top: 2em; }
    .specialized::after {
      background-size: auto; } }

/* 栄養補給の効率をあげる技術
   ========================================================================== */
.experts {
  flex-direction: column-reverse; }
  .experts__txt figure {
    margin-top: 20px; }
    .experts__txt figure img {
      width: 80%;
      margin: 0 auto; }
  .experts__txt .notes {
    font-size: 80%;
    margin-top: .25em; }
  .experts__image {
    background: url("../img/experts-img_01.jpg") no-repeat center left/cover;
    height: 200px; }
  @media (min-width: 768px) {
    .experts {
      flex-direction: row;
      background: #fff; }
      .experts__txt {
        justify-content: flex-start;
        background: transparent;
        z-index: 2; }
        .experts__txt > div {
          padding-left: 60px; }
        .experts__txt figure {
          margin-top: 20px; }
          .experts__txt figure img {
            width: auto;
            margin: 0 0; }
        .experts__txt .notes {
          font-size: 80%; }
      .experts__image {
        justify-content: flex-start;
        background: none;
        z-index: 2; }
        .experts__image img {
          height: auto; }
      .experts::after {
        background: transparent url("../img/experts-img_01.jpg") no-repeat center left -50px/auto 500px;
        clip-path: polygon(0 0, 45% 0, 55% 100%, 0 100%);
        z-index: 1; } }
  @media (min-width: 1025px) {
    .experts__txt > div {
      padding-left: 120px; }
    .experts__txt figure {
      margin-top: 30px; }
    .experts::after {
      background-position: center left 0;
      background-size: auto 800px; } }

/* ニュースエリア
   ========================================================================== */
.news-area {
  color: #fff;
  margin-top: 40px; }
  .news-area .ttl {
    font-size: clamp(2rem, 3vw, 3.6rem);
    font-weight: bold;
    line-height: 1;
    text-align: center; }
  .news-area a {
    color: #fff;
    font-weight: normal; }
  .news-area ul {
    margin-top: 20px; }
  @media (min-width: 768px) {
    .news-area {
      margin-top: 80px; }
      .news-area ul {
        margin-top: 40px; } }
  @media (min-width: 1025px) {
    .news-area {
      margin-top: 100px; }
      .news-area ul {
        margin-top: 60px; } }

/* バナー
   ========================================================================== */
.bnr-area {
  text-align: center;
  margin-top: 40px; }
  .bnr-area a {
    display: inline-block;
    background-color: #fff; }
    .bnr-area a img {
      transition: .3s; }
      @media (hover: hover) {
        .bnr-area a img:hover {
          opacity: .8; } }
  @media (min-width: 768px) {
    .bnr-area {
      margin-top: 80px; } }
  @media (min-width: 1025px) {
    .bnr-area {
      margin-top: 100px; } }