.gymnastics {
  background-color: #B49ED3;
  color: #fff; }
  .gymnastics .top {
    padding-top: 8.0rem; }
    @media (max-width: 768px) {
      .gymnastics .top {
        padding-top: 13.333333333333334vw; } }
    .gymnastics .top .gymnastics-logo {
      max-width: 26.6rem;
      margin: 3.0rem auto 2.5rem;
      padding: 1.8rem 1.6rem;
      background-color: #fff;
      border-radius: 2.2rem; }
    .gymnastics .top .link-btn {
      display: flex;
      justify-content: center;
      margin-top: 5.0rem; }
      @media (max-width: 768px) {
        .gymnastics .top .link-btn {
          margin-top: 1.6vw; } }
      .gymnastics .top .link-btn a {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        background: url("../images/common/icon_blank.png") no-repeat 97% 50% #fff;
        background-size: 1.6rem;
        padding: 1.2rem;
        width: 26.6rem;
        text-align: center;
        color: #5F2EA2;
        font-size: 2.4rem;
        font-weight: 600;
        border-radius: 2.5rem;
        text-decoration: none; }
        @media (max-width: 768px) {
          .gymnastics .top .link-btn a {
            width: 100%;
            max-width: 26.6rem;
            font-size: 4.8vw; } }
        .gymnastics .top .link-btn a img {
          margin-left: 1.7rem;
          max-width: 1.6rem; }
          @media (max-width: 768px) {
            .gymnastics .top .link-btn a img {
              margin-left: 2.1333333333333333vw;
              max-width: 3.733333333333334vw; } }
        .gymnastics .top .link-btn a span {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 1.6rem;
          margin-top: 1.0rem; }
          @media (max-width: 768px) {
            .gymnastics .top .link-btn a span {
              font-size: 3.2vw;
              margin-top: 2.666666666666667vw; } }
        .gymnastics .top .link-btn a:hover {
          opacity: .6; }
  .gymnastics .history {
    padding: 8.0rem 5.0rem 10.0rem; }
    @media (max-width: 768px) {
      .gymnastics .history {
        padding: 1.6vw 5.333333333333334vw 9.333333333333334vw; } }
    .gymnastics .history .subttl {
      font-size: 2.0rem;
      font-weight: 600;
      margin-bottom: 2.0rem; }
      @media (max-width: 768px) {
        .gymnastics .history .subttl {
          font-size: 3.2vw;
          margin-bottom: 2.666666666666667vw;
          text-align: center; } }
    .gymnastics .history .txt {
      font-size: 1.6rem;
      line-height: 1.875;
      margin-bottom: 4.0rem; }
      @media (max-width: 768px) {
        .gymnastics .history .txt {
          font-size: 2.666666666666667vw;
          margin-bottom: 8vw; } }
    .gymnastics .history .copy {
      text-align: center;
      font-size: 2.0rem;
      font-weight: 600;
      line-height: 2.1;
      margin-bottom: 7.5rem;
      letter-spacing: -0.03em; }
      @media (max-width: 768px) {
        .gymnastics .history .copy {
          font-size: 4.266666666666667vw;
          line-height: 1.8125;
          margin-bottom: 8vw; } }
    .gymnastics .history .photo-column {
      display: flex;
      justify-content: space-between; }
      @media (max-width: 768px) {
        .gymnastics .history .photo-column {
          display: block; } }
      .gymnastics .history .photo-column .photo {
        width: 47.9%; }
        @media (max-width: 768px) {
          .gymnastics .history .photo-column .photo {
            width: 100%; } }
        .gymnastics .history .photo-column .photo img {
          border-radius: 1.0rem; }
        @media (max-width: 768px) {
          .gymnastics .history .photo-column .photo + .photo {
            margin-top: 2.666666666666667vw; } }
    .gymnastics .history .caption {
      text-align: center;
      font-size: 2.0rem;
      margin: 2.0rem 0 7.0rem; }
      @media (max-width: 768px) {
        .gymnastics .history .caption {
          font-size: 4.266666666666667vw;
          margin-bottom: 8vw; } }
  .gymnastics .course {
    padding-bottom: 13.0rem; }
    @media (max-width: 768px) {
      .gymnastics .course {
        background-color: #fff;
        padding-bottom: 13.333333333333334vw; } }
    .gymnastics .course_box {
      background-color: #fff;
      border-radius: 3.0rem;
      padding: 3.0rem 5.0rem;
      color: #383838; }
      @media (max-width: 768px) {
        .gymnastics .course_box {
          padding: 14.666666666666666vw 0 5.333333333333334vw;
          border-radius: 0; } }
    .gymnastics .course_column {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3.0rem; }
      @media (max-width: 768px) {
        .gymnastics .course_column {
          display: block;
          margin-bottom: 9.333333333333334vw; } }
      .gymnastics .course_column .box:first-child {
        width: 49.26%; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box:first-child {
            width: 100%; } }
      .gymnastics .course_column .box:last-child {
        width: 48.4%; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box:last-child {
            width: 100%; } }
      .gymnastics .course_column .box .ttl {
        color: #5F2EA2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        font-size: 3.0rem;
        line-height: 1.5;
        font-weight: 600;
        margin: 0 0 3.0rem; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box .ttl {
            flex-flow: column;
            align-items: center;
            text-align: center;
            font-size: 5.6000000000000005vw;
            margin-bottom: 5.333333333333334vw; } }
        .gymnastics .course_column .box .ttl span {
          width: 100%;
          font-size: 1.8rem; }
          @media (max-width: 768px) {
            .gymnastics .course_column .box .ttl span {
              font-size: 5.333333333333334vw; } }
        .gymnastics .course_column .box .ttl dfn {
          font-style: normal;
          font-size: 1.6rem; }
          @media (max-width: 768px) {
            .gymnastics .course_column .box .ttl dfn {
              font-size: 3.2vw; } }
      .gymnastics .course_column .box .effect_ttl {
        font-size: 2.3rem;
        font-weight: 600;
        margin-bottom: 1.5rem; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box .effect_ttl {
            text-align: center;
            font-size: 5.333333333333334vw;
            margin-bottom: 4vw; } }
      .gymnastics .course_column .box .effect dt {
        font-size: 1.8rem;
        font-weight: 600;
        color: #5F2EA2; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box .effect dt {
            font-size: 4.8vw; } }
      .gymnastics .course_column .box .effect dd {
        padding: 0;
        margin: 0; }
        .gymnastics .course_column .box .effect dd p {
          font-size: 1.6rem;
          line-height: 1.875;
          margin-bottom: 2.5rem; }
          @media (max-width: 768px) {
            .gymnastics .course_column .box .effect dd p {
              font-size: 2.666666666666667vw;
              line-height: 1.7;
              margin-bottom: 4vw; } }
      .gymnastics .course_column .box-list {
        list-style: none;
        padding: 0;
        margin: 0; }
        .gymnastics .course_column .box-list li {
          padding: 0;
          margin: 0;
          font-size: 1.6rem;
          line-height: 1.875;
          margin-left: 1em;
          text-indent: -1em;
          margin-bottom: .5rem; }
          @media (max-width: 768px) {
            .gymnastics .course_column .box-list li {
              font-size: 3.2vw;
              line-height: 4vw; } }
      .gymnastics .course_column .box .btn {
        background-color: #B49ED3;
        border-radius: 3.0rem;
        font-size: 1.6rem;
        color: #fff;
        font-weight: 600;
        padding: 1.0rem 4.0rem;
        margin: 1.5rem 0 0;
        text-align: center; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box .btn {
            font-size: 3.2vw;
            padding: 1.0rem;
            margin-top: 6.666666666666667vw; } }
      .gymnastics .course_column .box .photo {
        margin-top: 3.5rem; }
        @media (max-width: 768px) {
          .gymnastics .course_column .box .photo {
            margin-top: 0;
            margin-bottom: 8vw; } }
        .gymnastics .course_column .box .photo img {
          width: 100%;
          border-radius: 1.0rem; }
    .gymnastics .course .point3 {
      display: flex;
      flex-flow: column;
      align-items: center; }
      .gymnastics .course .point3 dt {
        font-size: 2.0rem;
        font-weight: 600;
        color: #5F2EA2;
        text-align: center;
        margin-bottom: 1.0rem; }
        @media (max-width: 768px) {
          .gymnastics .course .point3 dt {
            font-size: 4.8vw; } }
      .gymnastics .course .point3 dd {
        margin: 0;
        font-size: 1.6rem;
        line-height: 1.875;
        margin-bottom: 2.5rem; }
        @media (max-width: 768px) {
          .gymnastics .course .point3 dd {
            font-size: 2.666666666666667vw;
            line-height: 1.7;
            margin-bottom: 4vw; } }
    .gymnastics .course .voice {
      display: flex;
      justify-content: space-between; }
      @media (max-width: 768px) {
        .gymnastics .course .voice {
          display: block; } }
      .gymnastics .course .voice dl {
        width: 31%; }
        @media (max-width: 768px) {
          .gymnastics .course .voice dl {
            width: 100%; } }
        .gymnastics .course .voice dl dt {
          font-size: 1.8rem;
          font-weight: 600;
          color: #5F2EA2;
          margin-bottom: 1.0rem; }
          @media (max-width: 768px) {
            .gymnastics .course .voice dl dt {
              font-size: 4.8vw; } }
        .gymnastics .course .voice dl dd {
          padding: 0;
          margin: 0;
          font-size: 1.4rem;
          line-height: 1.625; }
          @media (max-width: 768px) {
            .gymnastics .course .voice dl dd {
              font-size: 2.666666666666667vw;
              line-height: 1.7; } }
        @media (max-width: 768px) {
          .gymnastics .course .voice dl + dl {
            margin-top: 5.333333333333334vw; } }
    .gymnastics .course .link-btn {
      display: flex;
      justify-content: center;
      margin-top: 5.0rem; }
      @media (max-width: 768px) {
        .gymnastics .course .link-btn {
          margin-top: 1.6vw; } }
      .gymnastics .course .link-btn a {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        background: url("../images/common/icon_blank.png") no-repeat 95% 50% #fff;
        background-size: 1.6rem;
        padding: 1.2rem;
        width: 26.6rem;
        text-align: center;
        color: #5F2EA2;
        font-size: 2.4rem;
        font-weight: 600;
        border-radius: 2.5rem;
        text-decoration: none; }
        @media (max-width: 768px) {
          .gymnastics .course .link-btn a {
            width: 100%;
            max-width: 26.6rem;
            font-size: 4.8vw;
            border: 2px solid #5F2EA2; } }
        .gymnastics .course .link-btn a img {
          margin-left: 1.7rem;
          max-width: 1.6rem; }
          @media (max-width: 768px) {
            .gymnastics .course .link-btn a img {
              margin-left: 2.1333333333333333vw;
              max-width: 3.733333333333334vw; } }
        .gymnastics .course .link-btn a span {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 1.6rem;
          margin-top: 1.0rem; }
          @media (max-width: 768px) {
            .gymnastics .course .link-btn a span {
              font-size: 3.2vw;
              margin-top: 2.666666666666667vw; } }
        .gymnastics .course .link-btn a:hover {
          opacity: .6; }
  .gymnastics .recommendation {
    padding-bottom: 8.0rem; }
    @media (max-width: 768px) {
      .gymnastics .recommendation {
        padding-bottom: 21.333333333333336vw; } }
    .gymnastics .recommendation .copy {
      text-align: center;
      font-size: 3.0rem;
      font-weight: 600;
      line-height: 2.1; }
      @media (max-width: 768px) {
        .gymnastics .recommendation .copy {
          font-size: 4.266666666666667vw;
          line-height: 2.0; } }
    .gymnastics .recommendation .ttl {
      font-size: 2.0rem;
      font-weight: 600;
      text-align: center;
      margin: 0;
      padding-top: 11.0rem; }
      @media (max-width: 768px) {
        .gymnastics .recommendation .ttl {
          font-size: 4.266666666666667vw;
          padding-top: 10.666666666666668vw; } }
    .gymnastics .recommendation .img {
      max-width: 94.0rem;
      margin: 0 auto; }
      @media (max-width: 768px) {
        .gymnastics .recommendation .img {
          width: 100%; } }