@charset "UTF-8";
#ct_bg .contents01 .mainContens01 .title01 {
  position: relative;
  z-index: 10;
  width: 77.2%;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }
  @media screen and (max-width: 1200px) {
    #ct_bg .contents01 .mainContens01 .title01 {
      width: 67.55%; } }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .title01 {
      width: 100%;
      text-align: center; } }
#ct_bg .contents01 .mainContens01 .introArea01 {
  margin: 0 auto;
  position: relative; }
  #ct_bg .contents01 .mainContens01 .introArea01::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 22px;
    background: url("../common/images/bg03.png") repeat-x 0 0/auto 22px;
    z-index: 10; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .introArea01::after {
        bottom: -2.75vw;
        height: 5.5vw;
        background-size: auto 5.5vw; } }
  #ct_bg .contents01 .mainContens01 .introArea01 .img01 {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1s 0.15s, transform 1s 0.15s;
    z-index: 10; }
  #ct_bg .contents01 .mainContens01 .introArea01 .logo02 {
    opacity: 0;
    transition: opacity 1.5s .5s;
    z-index: 10; }
  #ct_bg .contents01 .mainContens01 .introArea01.active .img01,
  #ct_bg .contents01 .mainContens01 .introArea01.active .logo02 {
    opacity: 1;
    transform: translateY(0); }
  #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 25px;
    position: relative;
    z-index: 10; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 {
        padding-bottom: 7.25vw; } }
    #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 {
      max-width: 1260px;
      margin: 0 auto;
      padding: 0 15px; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 {
          padding: 0; } }
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .mainLink01 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 20px; }
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .mainLink01 p {
          width: 49.593495935%; }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .mainLink01 p {
              width: 100%; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .mainLink01 p + p {
                margin-top: 2.5vw; } }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .mainLink01 {
            padding: 0 2.5vw; } }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          padding: 0 2.5vw;
          margin: 10px 0 13px; } }
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 {
        position: relative;
        z-index: 10;
        text-align: center; }
        @media screen and (min-width: 640px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 {
            margin-bottom: 19px; } }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 {
            text-align: center;
            width: 40.75vw;
            order: 2; } }
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 > .inner01 > .title {
          font-size: 1.4rem;
          color: #4A1FA5; }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 > .inner01 > .title {
              font-size: 1.2rem;
              line-height: 1.6; } }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 > .inner01 > .title span {
            font-weight: bold;
            margin-right: 1em; }
            @media screen and (max-width: 639px) {
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap .headTitleArea01 > .inner01 > .title span {
                margin-right: 0; } }
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 {
            width: 26.5vw;
            order: 1;
            margin-right: 3.75vw; } }
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 .logo01 {
          position: relative;
          z-index: 10;
          width: 149px;
          padding: 3vw;
          background: url("../common/images/bg04.jpg") no-repeat;
          background-size: 200px;
          border-radius: 5px; }
          @media screen and (max-width: 1230px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 .logo01 {
              width: 12.1138211382vw; } }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 .logo01 {
              width: 26.5vw; } }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 .logo01 a {
            display: block;
            transition: opacity .3s; }
            @media screen and (min-width: 640px) {
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 > .inner01 .spWrap > .inner02 .logo01 a:hover {
                opacity: 0.6; } }
    #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap {
      padding: 1px 0;
      margin-bottom: 20px;
      background-image: linear-gradient(90deg, #ea609e 0%, #fdd23e 25%, #32b6a0 50%, #2ea7e0 75%, #a66aaa 100%); }
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap .localNav01::before {
        border: 1px solid #fff;
        background: none; }
      #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 {
        padding: 9px 15px 9px;
        background: rgba(255, 255, 255, 0.5); }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 {
            padding: 2.25vw 2.5vw; } }
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .logo01 {
          text-align: center;
          padding: 10px 0;
          background: url("../common/images/bg04.jpg");
          border: 2px solid #fff;
          border-bottom: none;
          border-radius: 20px 20px 0 0; }
          @media screen and (min-width: 640px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .logo01 {
              display: none; } }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .logo01 {
              padding-top: 3.5vw;
              padding-bottom: 3.5vw;
              background-size: 600px;
              background-position: right bottom; } }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .logo01 img {
            width: auto;
            height: 50px; }
            @media screen and (max-width: 375px) {
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .logo01 img {
                height: 35px; } }
        @media screen and (min-width: 640px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 {
            display: none; } }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 {
            padding: 10px 0 20px;
            background: rgba(255, 255, 255, 0.5);
            border: 2px solid #fff;
            border-top: none;
            border-radius: 0 0 20px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li {
              width: 48.6842105263%;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              min-height: 12.875vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(n + 3) {
                margin-top: 3.25vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(n + 5) {
                min-height: 15.625vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(1) img {
                width: 38vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(2) img {
                width: 41.75vw;
                padding-right: 3.75vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(3) img {
                width: 38vw; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav03 li:nth-child(4) img {
                width: 41.75vw; } }
        #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          background: rgba(255, 255, 255, 0.5);
          border: 2px solid #fff;
          border-radius: 20px; }
          @media screen and (min-width: 640px) {
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 {
              display: none; } }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li {
            width: 48.6842105263%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            min-height: 12.875vw;
            padding: 10px 0; }
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li > a {
              transition: .3s; }
              #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li > a:hover {
                opacity: .6;
                transition: .3s; }
                @media screen and (max-width: 639px) {
                  #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li > a:hover {
                    opacity: 1; } }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li:nth-child(1) {
            width: calc(50% - 11.45%);
            padding: 3.23% 1.25% 5.50% 1.56%;
            margin-right: 11.45%;
            background: url("../common/images/bg11.jpg") no-repeat;
            background-size: 500px;
            background-position: center;
            border-radius: 20px 0 0 20px; }
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li:nth-child(1) img {
              width: 28.5vw; }
          #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li:nth-child(2) {
            padding-right: 8%; }
            #ct_bg .contents01 .mainContens01 .introArea01 > .bglayer01 .localNav01Wrap > .inner01 .localNav06 > li:nth-child(2) img {
              width: 33.25vw; }
#ct_bg .contents01 .mainContens01 .infoListWrap01 {
  max-width: 1230px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20px;
  overflow: hidden; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .infoListWrap01 {
      width: 95vw;
      border-radius: 40px; } }
  #ct_bg .contents01 .mainContens01 .infoListWrap01 .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #4A1FA5;
    padding: 6px 18px 8px 20px;
    width: 118px;
    line-height: 1; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .infoListWrap01 .title {
        width: 26.75vw; } }
  #ct_bg .contents01 .mainContens01 .infoListWrap01 .infoList {
    width: calc(100% - 118px);
    padding: 9px 20px 8px; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .infoListWrap01 .infoList {
        width: calc(100% - 26.75vw);
        padding: 2.5vw 5vw 2.25vw; } }
    #ct_bg .contents01 .mainContens01 .infoListWrap01 .infoList li {
      font-size: 1.4rem; }
      #ct_bg .contents01 .mainContens01 .infoListWrap01 .infoList li + li {
        margin-top: 5px; }
      #ct_bg .contents01 .mainContens01 .infoListWrap01 .infoList li a {
        color: #4A1FA5; }
#ct_bg .contents01 .mainContens01 .productsArea01 {
  background: #3DB3E8 url("../images/bg_index08.png") no-repeat 50% calc(100% + 84px)/2000px;
  background-blend-mode: hard-light; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .productsArea01 {
      background: url("../images/bg_index08.png") no-repeat 50% calc(100% + 40.5vw)/100%; } }
  #ct_bg .contents01 .mainContens01 .productsArea01 .list01 {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1.5s, transform 1.5s;
    z-index: 10; }
  #ct_bg .contents01 .mainContens01 .productsArea01.active ul {
    opacity: 1;
    transform: translateY(0); }
  #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 {
    background: url("../common/images/bg05.png") no-repeat 50% 0/2000px, url("../images/bg_index04.png") no-repeat 50% calc(100% + 9px)/2000px, url("../common/images/bg04.jpg") no-repeat calc(50%) calc(100% - 425px)/2000px; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 {
        background: url("../common/images/bg05.png") no-repeat 50% 0/2000px, url("../images/bg_index04_sp.png") no-repeat 50% 100%/100%, url("../common/images/bg04_sp.jpg") no-repeat calc(50%) calc(100% - 32.5vw)/100%; } }
    #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 {
      max-width: 1040px;
      margin: 0 auto;
      padding: 30px 20px 177px;
      position: relative; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 {
          padding: 11vw 0 23.6vw; } }
      #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 11; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 {
            margin: 0 8.5vw; } }
        #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li {
          width: 33.2%; }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li {
              width: 100%; }
              #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li + li {
                margin-top: 2px; } }
          #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a {
            display: block;
            transition: transform .3s;
            transform-origin: center;
            position: relative; }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star01,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star02,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star03,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star04,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star05,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star06,
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star07 {
              position: absolute;
              background: url("../common/images/star04.svg") no-repeat center center/contain;
              pointer-events: none;
              z-index: 2;
              opacity: 0;
              animation-name: none; }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star01 {
              top: -15px;
              left: -45px;
              width: 183px;
              height: 183px;
              animation-delay: .1s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star01 {
                  top: -1.4423076923vw;
                  left: -4.3269230769vw;
                  width: 17.5961538462vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star02 {
              top: -25px;
              left: 105px;
              width: 122px;
              height: 122px;
              animation-delay: .6s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star02 {
                  top: -2.4038461538vw;
                  left: 10.0961538462vw;
                  width: 11.7307692308vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star03 {
              top: 15px;
              left: 215px;
              width: 146.4px;
              height: 146.4px;
              animation-delay: .3s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star03 {
                  top: 1.4423076923vw;
                  left: 20.6730769231vw;
                  width: 14.0769230769vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star04 {
              bottom: -35px;
              left: -25px;
              width: 183px;
              height: 183px;
              animation-delay: .6s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star04 {
                  bottom: -3.3653846154vw;
                  left: -2.4038461538vw;
                  width: 17.5961538462vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star05 {
              bottom: -15px;
              left: 105px;
              width: 122px;
              height: 122px;
              animation-delay: 1.3s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star05 {
                  bottom: -1.4423076923vw;
                  left: 10.0961538462vw;
                  width: 11.7307692308vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star06 {
              bottom: 0;
              left: 185px;
              width: 146.4px;
              height: 146.4px;
              animation-delay: 1s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star06 {
                  bottom: 0vw;
                  left: 17.7884615385vw;
                  width: 14.0769230769vw; } }
            #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star07 {
              bottom: 45px;
              left: 225px;
              width: 122px;
              height: 122px;
              animation-delay: .3s; }
              @media screen and (max-width: 1040px) {
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a .star07 {
                  bottom: 4.3269230769vw;
                  left: 21.6346153846vw;
                  width: 11.7307692308vw; } }
            @media screen and (min-width: 640px) {
              #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover {
                transform: translateY(-10px); }
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover::after {
                  content: "";
                  position: absolute;
                  top: 10px;
                  left: 0;
                  width: 100%;
                  height: calc(100% + 10px);
                  z-index: -1; }
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star01,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star02,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star03,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star04,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star05,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star06,
                #ct_bg .contents01 .mainContens01 .productsArea01 > .bglayer01 > .inner01 .productsNav01 li a:hover .star07 {
                  animation-name: glitter;
                  animation-duration: 1.5s;
                  animation-iteration-count: infinite;
                  animation-play-state: running; } }
#ct_bg .contents01 .mainContens01 .lessonArea01 {
  background: url("../images/bg_index16_pc.png") no-repeat 50% calc(100% + 198px)/2000px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .lessonArea01 {
      background: url("../images/bg_index16_sp.png") no-repeat 100% calc(100% - 0vw)/100%; } }
  @media screen and (min-width: 640px) {
    #ct_bg .contents01 .mainContens01 .lessonArea01::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 220px;
      background: linear-gradient(180deg, #3db3e8 0%, #99d2e6 54%, rgba(159, 213, 238, 0) 100%); } }
  #ct_bg .contents01 .mainContens01 .lessonArea01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 84px;
    background: url("../images/bg_index08.png") no-repeat 50% -443px/2000px;
    mix-blend-mode: hard-light; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .lessonArea01::after {
        top: -5.9vw;
        height: calc(55.375vw - 22.5vw);
        background: url("../images/bg_index08_sp.png") no-repeat 50% 0/100%; } }
  #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 151px;
    position: relative; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 {
        padding: 9vw 0 37.6vw; } }
    #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 .tx01 {
      color: #4A1FA5;
      text-align: center;
      font-family: "M PLUS Rounded 1c", serif;
      font-weight: 800;
      font-style: normal;
      transform: rotate(0.03deg);
      font-size: 2rem;
      line-height: 1.6;
      position: relative;
      z-index: 10; }
    #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 .btn01 {
      z-index: 10; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 .btn01 {
          margin: 0 3.75vw; } }
    #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-top: 19px;
      margin-bottom: 40px;
      position: relative;
      z-index: 10; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 {
          padding: 0 3.75vw;
          margin-bottom: 7.5vw; } }
      #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 .img03 {
        width: 58.3%; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 .img03 {
            width: 100%;
            margin-bottom: 5vw; } }
      #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul {
        width: 41.7%;
        display: flex;
        flex-wrap: wrap; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul {
            width: 100%; } }
        #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul li {
          width: 51.0791366906%; }
          #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul li:nth-child(1) {
            margin: -0.2398081535% 0 0 -0.2398081535%; }
          #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul li:nth-child(2) {
            margin: -31.654676259% 0 0 48.6810551559%; }
          #ct_bg .contents01 .mainContens01 .lessonArea01 > .inner01 > .inner02 ul li:nth-child(3) {
            margin: -19.6642685851% 0 0 4.3165467626%; }
#ct_bg .contents01 .mainContens01 .movieArea01 {
  margin-top: -20vw;
  padding-top: 20vw;
  background: url("../images/bg_index11.png") no-repeat 50% calc(100% + 9px)/2000px, url("../images/bg_index02_02.jpg") no-repeat 50% calc(100% + 1214px - 1641px)/2000px, url("../images/bg_index13.png") no-repeat 50% calc(100% + 234px)/2000px;
  position: relative; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .movieArea01 {
      margin-top: -65vw;
      padding-top: 65vw;
      background: url("../images/bg_index11_sp.png") no-repeat 50% 100%/100%, url("../images/bg_index02_sp.jpg") no-repeat 100% calc(100% - 35vw)/100%, url("../images/bg_index14_sp.png") no-repeat 100% calc(100% + 3.1vw)/100%; } }
  #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 177px;
    position: relative; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 {
        padding: 0 0.5vw 30vw; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .btn01 {
      z-index: 10; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .btn01 {
          margin: 0 3.75vw; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 {
      position: relative;
      margin-top: -14px;
      z-index: 10; }
      #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::before {
        content: '';
        position: absolute;
        top: -33px;
        left: -18px;
        width: 6vw;
        height: 6.095vw;
        max-width: 64px;
        max-height: 65px;
        background: url("../images/bg_index09_sp02.png") no-repeat 50% 0/contain;
        z-index: 2; }
      #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::after {
        content: '';
        position: absolute;
        top: -33px;
        right: -18px;
        width: 6vw;
        height: 6.095vw;
        max-width: 64px;
        max-height: 65px;
        background: url("../images/bg_index09_sp03.png") no-repeat 50% 0/contain; }
      @media screen and (max-width: 1000px) {
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::before {
          top: -3vw;
          left: -3vw; }
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::after {
          top: -3vw;
          right: -3vw; } }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 {
          margin-top: -1.25vw; }
          #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::before {
            top: -2vw;
            left: 3vw; }
          #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01::after {
            top: -2vw;
            right: 3vw; } }
      #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02 {
        background: url("../images/bg_index09.png") no-repeat 50% 0/100%;
        max-width: 968px;
        margin: 0 auto;
        padding: 22px;
        background: #fff;
        border: 2px solid #F7C720;
        box-shadow: 0 0 0 3px #fff, 0 0 0 7px #F7C720, 0 0 0 10px #fff;
        border-radius: 20px; }
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::before {
          content: '';
          position: absolute;
          bottom: -33px;
          left: -18px;
          width: 6vw;
          height: 6.095vw;
          max-width: 64px;
          max-height: 65px;
          background: url("../images/bg_index09_sp04.png") no-repeat 50% 0/contain;
          z-index: 2; }
        #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::after {
          content: '';
          position: absolute;
          bottom: -33px;
          right: -18px;
          width: 6vw;
          height: 6.095vw;
          max-width: 64px;
          max-height: 65px;
          background: url("../images/bg_index09_sp05.png") no-repeat 50% 0/contain; }
        @media screen and (max-width: 1000px) {
          #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02 {
            padding: 2.2vw; } }
  @media screen and (max-width: 1000px) and (max-width: 1000px) {
    #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::before {
      bottom: -3vw;
      left: -3vw; }
    #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::after {
      bottom: -3vw;
      right: -3vw; } }

        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02 {
            width: 90%;
            padding: 3.25vw;
            border: none;
            box-shadow: 0 0 0 3px #fff, 0 0 0 4px #F7C720, 0 0 0 6px #fff; }
            #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::before {
              bottom: -2vw;
              left: 3vw; }
            #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieFrame01 .movieFrame02::after {
              bottom: -2vw;
              right: 3vw; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieWrap01 {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      overflow: hidden; }
      #ct_bg .contents01 .mainContens01 .movieArea01 > .inner01 .movieWrap01 iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; }
  #ct_bg .contents01 .mainContens01 .movieArea01 .slider-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 .slider-wrapper {
        flex-direction: column; } }
  #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider {
    width: 80.2325581395%;
    display: flex; }
    @media screen and (max-width: 1000px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider {
        width: 69vw; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider.slick-dotted.slick-slider {
      margin-bottom: 0; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider {
        width: 100%; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider > .slick-list {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      height: auto; }
    #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider .item > .text01 {
      margin-top: 10px;
      display: inline-block;
      -webkit-transform: rotate(0.03deg);
      transform: rotate(0.03deg);
      font-family: "M PLUS Rounded 1c", serif; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .movieArea01 .main-slider .item > .text01 {
          margin-top: 5px;
          padding: 0 5px;
          font-size: 1.4rem; } }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container {
      position: relative;
      width: 95%;
      margin: 36px auto 0; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-prev,
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-next {
        width: 30px;
        height: 30px; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-prev {
        top: 0;
        left: 0; }
        #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-prev:hover {
          background: transparent !important; }
        #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-prev::before {
          content: "";
          position: absolute;
          top: 50%;
          right: -3px;
          width: 19px;
          height: 19px;
          border-top: solid 2px #4A1FA5;
          border-right: solid 2px #4A1FA5;
          transform: translateY(-50%) rotate(-135deg); }
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-next {
        top: 0;
        right: 0; }
        #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-next:hover {
          background: transparent !important; }
        #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-next::before {
          content: "";
          position: absolute;
          top: 50%;
          right: 10px;
          width: 19px;
          height: 19px;
          border-top: solid 2px #4A1FA5;
          border-right: solid 2px #4A1FA5;
          transform: translateY(-50%) rotate(45deg); }
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-prev:hover,
      #ct_bg .contents01 .mainContens01 .movieArea01 .arrows-container .slick-next:hover {
        background-color: #555;
        /* ホバー時の背景色 */ } }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      text-align: center;
      width: 81%;
      height: 44px;
      margin: -21px auto 28px;
      z-index: 4;
      position: relative; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container .slick-dots {
        position: static;
        bottom: inherit;
        line-height: 0; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container ul {
        display: inline-block;
        padding: 0;
        margin: 0; }
        #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container ul li {
          display: inline-block;
          margin: 0 4.5px;
          width: 18px;
          height: 17px; }
          #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container ul li button {
            background: url("../common/images/ic08.svg") no-repeat 0 0/contain;
            width: 18px;
            height: 17px;
            padding: 0;
            border: none;
            outline: none;
            cursor: pointer; }
            #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container ul li button:before {
              content: ''; }
          #ct_bg .contents01 .mainContens01 .movieArea01 .dots-container ul li.slick-active button {
            background-image: url("../common/images/ic09.svg"); } }
  #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider {
    height: 420px;
    overflow: hidden;
    margin: auto 0;
    width: 18.6046511628%; }
    @media screen and (max-width: 1000px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider {
        width: 16vw;
        height: 38.8vw; } }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider {
        display: none; } }
    #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-arrow {
      position: absolute;
      z-index: 2;
      top: auto;
      left: auto;
      right: auto;
      transform: none;
      width: 100%;
      height: 30px;
      padding: 0;
      border: none;
      box-sizing: border-box; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-arrow::before {
        content: ""; }
    #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-prev {
      bottom: 0;
      background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%);
      transition: .5s; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-prev::before {
        position: absolute;
        top: 50%;
        left: 50%;
        content: url("../images/arrow02.png");
        margin: -5px 0 0 -7px;
        opacity: .5;
        transition: opacity .3s; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-prev:hover::before {
        opacity: 1.0; }
    #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-next {
      top: 0;
      background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%);
      transition: .5s; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-next::before {
        position: absolute;
        top: 50%;
        left: 50%;
        content: url("../images/arrow01.png");
        margin: -5px 0 0 -7px;
        opacity: .5;
        transition: opacity .3s; }
      #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-next:hover::before {
        opacity: 1.0; }
    #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-slide {
      margin-bottom: 10px;
      cursor: pointer; }
      @media screen and (max-width: 1000px) {
        #ct_bg .contents01 .mainContens01 .movieArea01 .thumbnail-slider .slick-slide {
          margin-bottom: 1vw; } }
#ct_bg .contents01 .mainContens01 .eventArea01 {
  position: relative;
  background: url("../images/bg_index12.png") no-repeat 50% calc(100% + 9px)/2000px, url("../images/bg_index13.png") no-repeat 50% -405px, url("../common/images/bg10.png") no-repeat 50% calc(100% + 1210px);
  position: relative; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .eventArea01 {
      background: url("../images/bg_index12_sp.png") no-repeat 50% 100%/100%, url("../images/bg_index15_sp.png") no-repeat 50% calc(100% + 63.5vw)/100%; } }
  #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 274px;
    position: relative; }
    @media screen and (max-width: 639px) {
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 {
        padding: 2.5vw 0 30.2vw; } }
    #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 {
      background: #fff;
      border-radius: 10px;
      padding: 30px 30px 40px;
      position: relative;
      z-index: 10; }
      @media screen and (max-width: 639px) {
        #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 {
          margin-left: 3.75vw;
          margin-right: 3.75vw;
          padding: 20px 15px 30px; } }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .new {
        position: absolute;
        top: -5px;
        right: -5px; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .new {
            top: -1.25vw;
            right: -1.25vw; } }
        #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .new span {
          display: block;
          width: 72px;
          height: 72.5px;
          background: url("../images/ic_index01.png") no-repeat 0 0/contain;
          text-indent: 100%;
          white-space: nowrap;
          overflow: hidden; }
          @media screen and (max-width: 639px) {
            #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .new span {
              width: 18vw;
              height: 18.125vw; } }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 p {
        font-family: "M PLUS Rounded 1c", serif;
        font-weight: 500;
        font-style: normal;
        transform: rotate(0.03deg); }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .hdg01 {
        padding-left: 50px;
        background: url("../common/images/ic01.svg") no-repeat 0 0;
        color: #E10A7B;
        font-family: "M PLUS Rounded 1c", serif;
        font-weight: 800;
        font-style: normal;
        transform: rotate(0.03deg);
        font-size: 2.4rem;
        line-height: 1.6;
        padding-bottom: 13px;
        padding-right: 10px;
        border-bottom: 2px solid #E10A7B;
        margin-bottom: 10px; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .hdg01 {
            font-size: 2rem; } }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .date {
        color: #817D8A;
        text-align: right;
        font-family: "M PLUS Rounded 1c", serif;
        font-weight: 500;
        font-style: normal;
        transform: rotate(0.03deg);
        font-size: 1.4rem;
        margin-bottom: 29px; }
        #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .date .cate01 {
          color: #fff;
          background: #4B98DF;
          display: inline-block;
          padding: 0 10px;
          font-family: "M PLUS Rounded 1c", serif;
          font-weight: 500;
          font-style: normal;
          transform: rotate(0.03deg);
          font-size: 1.4rem;
          border-radius: 20px;
          line-height: 1.6;
          margin-right: 10px; }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .note {
        font-size: 1.4rem; }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .btn02 {
        margin-top: 20px; }
      #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .noinfo {
        margin-top: 10px;
        font-size: 2.4rem;
        font-weight: 900;
        text-align: center;
        color: #4A1FA5; }
        @media screen and (max-width: 639px) {
          #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 .frame01 .noinfo {
            font-size: 2rem; } }
    #ct_bg .contents01 .mainContens01 .eventArea01 > .inner01 section + section {
      margin-top: 20px; }
#ct_bg .contents01 .mainContens01 .footArea01 {
  position: relative;
  z-index: 3;
  min-height: 1083px;
  background: url("../common/images/bg10.png") no-repeat 50% -204px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center; }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .footArea01 {
      min-height: 63.25vw;
      background: url("../images/bg_index15_sp.png") no-repeat 50% -7.5vw/100%; } }
  @media screen and (max-width: 639px) {
    #ct_bg .contents01 .mainContens01 .footArea01 > .inner01 .sns_wrapper.type02 {
      padding-top: 10px;
      padding-bottom: 0; } }