@charset "UTF-8";
/* ブレイクポイント
   ========================================================================== */
/* フォント
   ========================================================================== */
/* 色
   ========================================================================== */
/* RE:DRIVEとは
   ========================================================================== */
.about__ttl {
  font-weight: bold;
  font-size: clamp(2.4rem, 3vw, 4.8rem);
  line-height: 1.4;
  margin-bottom: 20px; }
.about p {
  margin-top: 1em; }
  .about p a {
    text-decoration: underline; }
    @media (hover: hover) {
      .about p a:hover {
        text-decoration: none; } }
.about .notes {
  margin-top: .5em; }
@media (min-width: 768px) {
  .about__ttl {
    text-align: center;
    margin-bottom: 30px; } }
@media (min-width: 1025px) {
  .about__ttl {
    margin-bottom: 40px; } }

/* LEAD
   ========================================================================== */
.about__lead .wrap div {
  background: url("../img/lead-bg.png") no-repeat center/200px auto; }
  .about__lead .wrap div p {
    margin-top: 1.5em; }
    .about__lead .wrap div p:first-of-type {
      margin-top: 0; }
.about__lead .wrap figure {
  margin-top: clamp(10px, 3vw, 40px); }
@media (min-width: 768px) {
  .about__lead .wrap div {
    background-size: contain; }
    .about__lead .wrap div p {
      text-align: center;
      margin-top: 2em; } }

/* テニスプレーヤーに必要な栄養素にこだわった専用処方
   ========================================================================== */
.prescription p {
  margin-top: 1.5em; }
  .prescription p:first-of-type {
    margin-top: 0; }
.prescription .notes {
  margin-top: .5em; }
.prescription__image {
  display: flex;
  flex-direction: column;
  background: url("../img/prescription-bg.png") repeat-y center/cover;
  padding: 20px;
  margin-top: clamp(20px, 3vw, 60px); }
  .prescription__image figure img {
    margin: clamp(20px, 3vw, 40px) auto 0 auto; }
  .prescription__image figure:last-of-type {
    margin-top: clamp(30px, 3vw, 60px); }
.prescription__ttl {
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: bold;
  text-align: center; }
  .prescription__ttl.color-base {
    color: #7dd91a; }
  .prescription__ttl.color-topping {
    color: #ff5533; }
  .prescription__ttl span {
    display: block;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: normal;
    color: #fff; }
@media (min-width: 768px) {
  .prescription p {
    margin-top: 2em; }
  .prescription__image {
    padding: 30px; } }
@media (min-width: 1025px) {
  .prescription__image {
    padding: 40px; } }

/* POINT
   ========================================================================== */
.point section {
  margin-top: 20px; }
.point__ttl {
  font-weight: bold;
  font-size: clamp(2.4rem, 3vw, 4.8rem);
  text-align: center;
  line-height: 1.4; }
  .point__ttl div {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 20px; }
    .point__ttl div span {
      display: block;
      font-size: 4.4rem; }
.point__sec-ttl {
  background-color: #000;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  padding: .5em 1em; }
@media (min-width: 768px) {
  .point section {
    margin-top: 40px; }
  .point__ttl div {
    font-size: 2rem;
    margin-bottom: 30px; }
    .point__ttl div span {
      font-size: 5.6rem; }
  .point__sec-ttl {
    font-size: 2rem;
    line-height: 1.6;
    padding: .75em 1em; } }
@media (min-width: 1025px) {
  .point section {
    margin-top: 60px; }
  .point__ttl div {
    font-size: 2.4rem;
    margin-bottom: 40px; }
    .point__ttl div span {
      font-size: 7.2rem; }
  .point__sec-ttl {
    font-size: 3rem; } }

/* 図表
   ====================================== */
.fig {
  margin-top: 20px; }
  .fig__box {
    margin-top: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000; }
    .fig__box span {
      font-weight: bold;
      margin-right: 10px; }
  .fig__btn {
    position: relative;
    display: block;
    width: 100%;
    background-color: #fff;
    color: #000;
    font-weight: bold;
    padding: .5em 2em .5em 1em;
    border-top: 1px solid #000;
    cursor: pointer; }
    .fig__btn::after {
      position: absolute;
      display: block;
      top: 50%;
      right: 1em;
      content: '';
      width: 6px;
      height: 6px;
      margin-top: -4px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
      transform: rotate(135deg); }
    .fig__btn.active::after {
      transform: rotate(-45deg); }
    .fig__btn span {
      color: #000; }
    @media (hover: hover) {
      .fig__btn:hover {
        opacity: .6; } }
  .fig__conts {
    display: none;
    padding: 0 20px 20px 20px; }
    .fig__conts p {
      font-size: 1.4rem; }
    .fig__conts__ttl {
      font-size: 1.6rem;
      font-weight: bold; }
    .fig__conts figure {
      margin-top: 20px; }
      .fig__conts figure figcaption {
        font-size: 1.4rem;
        font-weight: bold; }
      .fig__conts figure img {
        margin: 20px auto; }
    .fig__conts .quote {
      font-size: 1.4rem;
      margin-top: 1em; }
      .fig__conts .quote a {
        text-decoration: underline; }
        @media (hover: hover) {
          .fig__conts .quote a:hover {
            text-decoration: none; } }
  @media (min-width: 768px) {
    .fig {
      margin-top: 30px; }
      .fig__box {
        margin-top: 0; }
      .fig__btn {
        font-size: 2rem;
        padding: .5em 2.5em .5em 1em; }
        .fig__btn:after {
          right: 1em;
          width: 8px;
          height: 8px;
          margin-top: -4px; }
        .fig__btn span {
          font-size: 2rem; }
      .fig__conts {
        padding: 0 30px 30px 30px; }
        .fig__conts p {
          font-size: 1.6rem; }
        .fig__conts__ttl {
          font-size: 2rem;
          text-align: center; }
        .fig__conts figure {
          margin-top: 30px; }
          .fig__conts figure figcaption {
            font-size: 1.6rem;
            text-align: center; }
          .fig__conts figure img {
            width: 60%;
            margin: 30px auto; }
        .fig__conts .quote {
          font-size: 1.4rem; } }
  @media (min-width: 1025px) {
    .fig {
      margin-top: 40px; }
      .fig__btn {
        font-size: 3rem;
        padding: .5em 3em .5em 1em; }
        .fig__btn:after {
          right: 1em;
          width: 12px;
          height: 12px;
          margin-top: -7px;
          border-top-width: 3px;
          border-right-width: 3px; }
      .fig__conts {
        padding: 0 60px 60px 60px; }
        .fig__conts p {
          font-size: 2rem; }
        .fig__conts__ttl {
          font-size: 3rem; }
        .fig__conts figure {
          margin-top: 40px; }
          .fig__conts figure figcaption {
            font-size: 2rem; }
          .fig__conts figure img {
            width: auto;
            margin: 40px auto; }
        .fig__conts .quote {
          font-size: 1.8rem; } }

/* POINT 02
   ====================================== */
.point-02 .kiwi .fig__conts > div {
  margin-top: 20px; }
  .point-02 .kiwi .fig__conts > div:last-of-type {
    margin-top: 40px; }
.point-02 .zendama ul {
  display: flex;
  flex-direction: column;
  gap: 20px; }
  .point-02 .zendama ul li {
    display: flex;
    flex-direction: column; }
    .point-02 .zendama ul li figure {
      margin-top: 0 !important; }
      .point-02 .zendama ul li figure img {
        width: 60%;
        margin: 0 auto; }
    .point-02 .zendama ul li p {
      font-size: 1.4rem; }
.point-02 .akudama {
  margin-top: 20px; }
@media (min-width: 768px) {
  .point-02 .kiwi .fig__conts > div {
    margin-top: 30px; }
    .point-02 .kiwi .fig__conts > div:last-of-type {
      margin-top: 60px; }
  .point-02 .zendama ul {
    flex-direction: row;
    gap: 30px;
    margin-top: 30px; }
    .point-02 .zendama ul li {
      width: calc(100% / 3); }
      .point-02 .zendama ul li figure {
        margin-top: 0 !important; }
        .point-02 .zendama ul li figure img {
          width: auto;
          margin: 0 !important; }
  .point-02 .akudama {
    margin-top: 30px; }
    .point-02 .akudama .fig__conts figure img {
      width: 80%; } }
@media (min-width: 1025px) {
  .point-02 .kiwi .fig__conts > div {
    margin-top: 40px; }
    .point-02 .kiwi .fig__conts > div:last-of-type {
      margin-top: 80px; }
  .point-02 .zendama ul {
    margin-top: 40px; }
    .point-02 .zendama ul li figure {
      margin-top: 0 !important; }
      .point-02 .zendama ul li figure img {
        width: auto;
        margin: 0 !important; }
    .point-02 .zendama ul li p {
      font-size: 1.8rem; }
  .point-02 .akudama {
    margin-top: 40px; }
    .point-02 .akudama .fig__conts figure img {
      width: auto; } }

/* POINT 03
   ====================================== */
.point-03__image-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px; }
  .point-03__image-01 figure {
    width: calc(100% / 3); }
  .point-03__image-01__txt div {
    font-weight: bold;
    line-height: 1.4; }
  .point-03__image-01__txt p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: .5em; }
.point-03__image-02 {
  display: flex;
  gap: 20px;
  margin-top: 20px; }
  .point-03__image-02 figure figcaption {
    font-size: 1.4rem;
    margin-top: .5em; }
    .point-03__image-02 figure figcaption span {
      font-weight: bold; }
  .point-03__image-02__strong-01 {
    color: #f51414; }
  .point-03__image-02__strong-02 {
    color: #3ab3ff; }
@media (min-width: 768px) {
  .point-03__image-01 {
    margin-top: 30px;
    gap: 30px; }
    .point-03__image-01 figure {
      width: auto; }
      .point-03__image-01 figure img {
        width: 120px; }
    .point-03__image-01__txt div {
      font-size: 2rem; }
    .point-03__image-01__txt p {
      font-size: 1.6rem; }
  .point-03__image-02 {
    gap: 20px;
    margin-top: 30px; }
    .point-03__image-02 figure figcaption {
      font-size: 1.6rem; }
  .point-03 .kyusyusei .fig__conts figure img {
    width: 80%; } }
@media (min-width: 1025px) {
  .point-03__image-01 {
    margin-top: 60px;
    gap: 40px; }
    .point-03__image-01 figure img {
      width: auto; }
    .point-03__image-01__txt div {
      font-size: 3.6rem; }
    .point-03__image-01__txt p {
      font-size: 2.4rem; }
  .point-03__image-02 {
    margin-top: 60px;
    gap: 10px; }
    .point-03__image-02 figure figcaption {
      font-size: 2.4rem;
      text-align: center; }
      .point-03__image-02 figure figcaption span {
        display: block; }
  .point-03 .kyusyusei .fig__conts figure img {
    width: auto; } }

/* POINT 04
   ====================================== */
.point-04__box {
  display: flex;
  flex-direction: column;
  margin-top: 2em; }
  .point-04__box figure img {
    width: 140px;
    margin: 0 auto; }
@media (min-width: 768px) {
  .point-04__box {
    flex-direction: row;
    align-items: center;
    gap: 30px; }
    .point-04__box figure img {
      width: 160px; }
  .point-04__txt {
    flex: 1; }
    .point-04__txt p {
      margin-top: 0; } }
@media (min-width: 1025px) {
  .point-04__box {
    gap: 40px; }
    .point-04__box figure img {
      width: 200px; } }

/* POINT 05
   ====================================== */
.point-05 .flow {
  display: flex;
  flex-direction: column;
  margin: 20px auto 0 auto; }
  .point-05 .flow__ttl {
    background-color: #000;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: .5em; }
  .point-05 .flow__conts {
    display: flex;
    flex-direction: row;
    gap: 20px; }
    .point-05 .flow__conts figure {
      display: flex;
      flex-direction: column;
      width: 30%; }
      .point-05 .flow__conts figure img {
        width: 80%;
        margin: 10px auto 0 auto; }
      .point-05 .flow__conts figure figcaption {
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        margin-top: 20px; }
    .point-05 .flow__conts p {
      flex: 1; }
  .point-05 .flow__arrow img {
    transform: rotate(90deg);
    width: 30px;
    margin: 20px auto; }
@media (min-width: 768px) {
  .point-05 .flow {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px; }
    .point-05 .flow__box {
      width: calc((100% - (60px * 3)) / 4); }
    .point-05 .flow__conts {
      flex-direction: column;
      gap: 0; }
      .point-05 .flow__conts figure {
        flex-direction: column-reverse;
        width: 100%; }
        .point-05 .flow__conts figure img {
          width: 70%;
          margin-top: 20px; }
        .point-05 .flow__conts figure figcaption {
          font-size: 1.8rem;
          margin-top: 1em; }
      .point-05 .flow__conts p {
        flex: none; }
    .point-05 .flow__arrow {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .point-05 .flow__arrow img {
        transform: rotate(0deg);
        width: 40px;
        padding: 10px 0; } }
@media (min-width: 1025px) {
  .point-05 .flow {
    margin-top: 40px; }
    .point-05 .flow__box {
      width: calc((100% - (70px * 3)) / 4); }
    .point-05 .flow__conts figure img {
      margin-top: 30px; }
    .point-05 .flow__conts figure figcaption {
      font-size: 2rem; }
    .point-05 .flow__arrow img {
      width: 50px;
      padding: 10px 0; } }