@charset "UTF-8";
#ProgramListTitle {
  padding: 120px 0 60px; }
  #ProgramListTitle .ProgramListTitleIn {
    width: 90%;
    margin: auto; }
    @media (min-width: 1500px) {
      #ProgramListTitle .ProgramListTitleIn {
        display: flex; } }
    #ProgramListTitle .ProgramListTitleIn h1 {
      font-size: 2.2em;
      font-weight: bold; }
      @media (min-width: 1024px) {
        #ProgramListTitle .ProgramListTitleIn h1 {
          font-size: 3.75em; } }
    #ProgramListTitle .ProgramListTitleIn .Menu {
      margin: 25px 0 0 0; }
      @media (min-width: 1250px) {
        #ProgramListTitle .ProgramListTitleIn .Menu {
          display: flex;
          margin: 25px 0 0 0; } }
      @media (min-width: 1500px) {
        #ProgramListTitle .ProgramListTitleIn .Menu {
          display: flex;
          margin: 25px 0 0 5%; } }
      #ProgramListTitle .ProgramListTitleIn .Menu a {
        transition: .5s; }
        @media (min-width: 768px) {
          #ProgramListTitle .ProgramListTitleIn .Menu a {
            margin-right: 40px; }
            #ProgramListTitle .ProgramListTitleIn .Menu a:last-child {
              margin-right: 0px; } }
        @media (min-width: 1250px) {
          #ProgramListTitle .ProgramListTitleIn .Menu a {
            display: flex; } }
        #ProgramListTitle .ProgramListTitleIn .Menu a p {
          font-size: 0.9em;
          font-weight: bold;
          line-height: 1.6em;
          color: #9EF1FF;
          transition: .5s;
          display: inline-block;
          position: relative; }
          @media (min-width: 1024px) {
            #ProgramListTitle .ProgramListTitleIn .Menu a p {
              font-size: 1.0em; } }
          #ProgramListTitle .ProgramListTitleIn .Menu a p::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #9EF1FF;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .3s; }
          #ProgramListTitle .ProgramListTitleIn .Menu a p:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }
        #ProgramListTitle .ProgramListTitleIn .Menu a img {
          width: 15px;
          height: auto;
          margin: -2px 0 0 5px; }
          @media (min-width: 768px) {
            #ProgramListTitle .ProgramListTitleIn .Menu a img {
              margin: -26px 0 0 5px; } }
          @media (min-width: 1024px) {
            #ProgramListTitle .ProgramListTitleIn .Menu a img {
              margin: -30px 0 0 5px; } }
          @media (min-width: 1250px) {
            #ProgramListTitle .ProgramListTitleIn .Menu a img {
              margin: -10px 0 0 10px; } }

.ProgramInfo .ProgramInfoIn {
  width: 90%;
  margin: auto;
  padding: 60px 0 60px; }
  @media (min-width: 1024px) {
    .ProgramInfo .ProgramInfoIn {
      display: flex;
      padding: 120px 0 60px; } }
  .ProgramInfo .ProgramInfoIn .TextL {
    margin-bottom: 20px; }
    @media (min-width: 1024px) {
      .ProgramInfo .ProgramInfoIn .TextL {
        width: 40%; } }
    @media (min-width: 1250px) {
      .ProgramInfo .ProgramInfoIn .TextL {
        width: 35%; } }
    .ProgramInfo .ProgramInfoIn .TextL h2 {
      font-size: 1.8em; }
      @media (min-width: 1024px) {
        .ProgramInfo .ProgramInfoIn .TextL h2 {
          font-size: 2.0em; } }
      @media (min-width: 1250px) {
        .ProgramInfo .ProgramInfoIn .TextL h2 {
          font-size: 2.5em; } }
      .ProgramInfo .ProgramInfoIn .TextL h2 .kome {
        font-size: 0.5em;
        vertical-align: top; }
    .ProgramInfo .ProgramInfoIn .TextL p {
      font-size: 0.6em;
      line-height: 1.8em;
      text-align: justify;
      color: #666666;
      margin-top: 20px; }
  @media (min-width: 1024px) {
    .ProgramInfo .ProgramInfoIn .TextR {
      width: 60%;
      padding-left: 6%; } }
  @media (min-width: 1250px) {
    .ProgramInfo .ProgramInfoIn .TextR {
      width: 65%; } }
  .ProgramInfo .ProgramInfoIn .TextR h3 {
    font-size: 1.0em;
    line-height: 1.8em;
    text-align: justify; }
    @media (min-width: 1024px) {
      .ProgramInfo .ProgramInfoIn .TextR h3 {
        font-size: 1.25em; } }
    @media (min-width: 1250px) {
      .ProgramInfo .ProgramInfoIn .TextR h3 {
        font-size: 1.375em; } }

/*
---------------------------------------------------------------------------------------------------------------------
目的・タイミングに合わせて動画企画を実施
---------------------------------------------------------------------------------------------------------------------
*/
#Choose {
  display: none; }
  @media (min-width: 1024px) {
    #Choose {
      display: block; } }
  #Choose h3 {
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto 20px;
    width: 90%; }
  #Choose .ChooseInPc {
    display: none; }
    @media (min-width: 1024px) {
      #Choose .ChooseInPc {
        display: inherit;
        margin: auto;
        position: relative;
        width: 1000px; } }
    #Choose .ChooseInPc .iCatchImg .Plan02 {
      position: relative;
      z-index: 10; }
    #Choose .ChooseInPc .iCatchImg img {
      position: absolute;
      top: 0; }
    #Choose .ChooseInPc .ChartFigure {
      position: relative; }
      #Choose .ChooseInPc .ChartFigure p {
        position: absolute;
        top: -13px;
        left: -13px;
        z-index: 10;
        margin: 0; }
        #Choose .ChooseInPc .ChartFigure p.No1 {
          left: initial;
          right: -13px; }
        #Choose .ChooseInPc .ChartFigure p.No2 {
          top: initial;
          bottom: 5px; }
        #Choose .ChooseInPc .ChartFigure p img {
          width: 26px;
          height: auto; }
      #Choose .ChooseInPc .ChartFigure a {
        font-size: 0; }
        #Choose .ChooseInPc .ChartFigure a img {
          width: 180px;
          height: auto;
          transition: .5s;
          border-radius: 5px; }
          #Choose .ChooseInPc .ChartFigure a img:hover {
            opacity: 0.8; }
        #Choose .ChooseInPc .ChartFigure a .Back {
          background-color: #111;
          border-radius: 5px;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          z-index: -10; }
      #Choose .ChooseInPc .ChartFigure h3 {
        font-size: 0.75em;
        line-height: 1.2em;
        margin: 3px auto 0;
        color: #52A4E3; }
    #Choose .ChooseInPc .Program01 {
      position: absolute;
      top: 370px;
      left: 280px; }
    #Choose .ChooseInPc .Program02 {
      position: absolute;
      top: 250px;
      left: 315px; }
    #Choose .ChooseInPc .Program03 {
      position: absolute;
      top: 60px;
      left: 600px; }
    #Choose .ChooseInPc .Program04 {
      position: absolute;
      top: 450px;
      left: 115px; }
    #Choose .ChooseInPc .Program05 {
      position: absolute;
      top: 345px;
      left: 595px; }
    #Choose .ChooseInPc .Program06 {
      position: absolute;
      top: 180px;
      left: 760px; }
    #Choose .ChooseInPc .Program07 {
      position: absolute;
      top: 400px;
      left: 760px; }
    #Choose .ChooseInPc .Program08 {
      position: absolute;
      top: 85px;
      left: 300px; }
    #Choose .ChooseInPc .Program09 {
      position: absolute;
      top: 180px;
      left: 550px; }
    #Choose .ChooseInPc .Program10 {
      position: absolute;
      top: 445px;
      left: 450px; }
    #Choose .ChooseInPc .Program11 {
      position: absolute;
      top: 185px;
      left: 120px; }
    #Choose .ChooseInPc .Program12 {
      position: absolute;
      top: 60px;
      left: 80px; }
  #Choose .ChooseSp {
    overflow-x: scroll;
    padding-left: 4%; }
    #Choose .ChooseSp .ChooseInSp {
      width: 900px;
      margin: auto;
      position: relative; }
      @media (min-width: 1024px) {
        #Choose .ChooseSp .ChooseInSp {
          display: none; } }
      #Choose .ChooseSp .ChooseInSp .iCatchImg img {
        position: absolute;
        top: 0; }
  @media (min-width: 768px) {
    #Choose ::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0); }
    #Choose ::-webkit-scrollbar {
      height: 0px; }
    #Choose ::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0); } }

/*
---------------------------------------------------------------------------------------------------------------------
目的・タイミングに合わせて動画企画を実施
---------------------------------------------------------------------------------------------------------------------
*/
.PlanBox {
  background-color: #111;
  position: relative;
  transition: .5s;
  border-bottom: 1px solid #333;
  padding-top: 20px; }
  @media (min-width: 1024px) {
    .PlanBox {
      padding-top: 0; } }
  .PlanBox.last {
    border: none; }
  .PlanBox:hover {
    background-color: #222; }
    .PlanBox:hover .PlanBoxBtn > p {
      margin: -4px 0 0 18px; }

.PlanBox2 {
  background-color: #111;
  position: relative;
  transition: .5s;
  border-bottom: 1px solid #333;
  padding-top: 20px; }
  @media (min-width: 1024px) {
    .PlanBox2 {
      padding-top: 0; } }

.card01 {
  padding: 50px 5%; }
  @media (min-width: 1024px) {
    .card01 {
      display: flex;
      align-items: center; } }
  .card01 .Thumbnail {
    padding: 0 5%;
    position: relative; }
    @media (min-width: 1024px) {
      .card01 .Thumbnail {
        width: 40%;
        padding: 0 5% 0 0; } }
    .card01 .Thumbnail a .DigestBtn {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      height: 36px;
      width: 36px; }
      .card01 .Thumbnail a .DigestBtn img {
        width: 38px;
        height: auto;
        transition: .5s;
        transform: scale(1); }
    .card01 .Thumbnail a:hover img {
      opacity: 0.7; }
    .card01 .Thumbnail a:hover .DigestBtn > img {
      transform: scale(1.08);
      opacity: 1; }
    .card01 .Thumbnail img {
      border-radius: 10px; }
    .card01 .Thumbnail h3 {
      font-size: 3.0em;
      line-height: 1.0em;
      color: #333333;
      position: absolute;
      top: -30px;
      right: 10px;
      z-index: -10; }
      @media (min-width: 768px) {
        .card01 .Thumbnail h3 {
          right: 20px; } }
      @media (min-width: 1024px) {
        .card01 .Thumbnail h3 {
          left: 85%;
          right: inherit; } }
      @media (min-width: 1250px) {
        .card01 .Thumbnail h3 {
          font-size: 3.3em; } }
      .card01 .Thumbnail h3.Option {
        letter-spacing: 0.1em; }
  .card01 .PlanBoxBtn {
    text-align: right;
    margin: 10px 5% 0 0; }
    @media (min-width: 1024px) {
      .card01 .PlanBoxBtn {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 45px;
        color: #fff;
        display: inline-block;
        text-align: center;
        border-radius: 50px;
        transition: .5s;
        border: 1px solid #fff;
        width: 45px;
        height: 45px;
        position: relative; } }
    .card01 .PlanBoxBtn h6 {
      font-size: 0.8em;
      color: #9EF1FF; }
      @media (min-width: 1024px) {
        .card01 .PlanBoxBtn h6 {
          display: none; } }
    .card01 .PlanBoxBtn p {
      display: none; }
      @media (min-width: 1024px) {
        .card01 .PlanBoxBtn p {
          display: block;
          position: absolute;
          top: 50%;
          content: '';
          margin: -4px 0 0 16px;
          width: 8px;
          height: 8px;
          border: 0px;
          border-top: solid 1px #fff;
          border-right: solid 1px #fff;
          -ms-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          transition: .5s; } }
  .card01 .Contents {
    padding: 0 5%; }
    @media (min-width: 1024px) {
      .card01 .Contents {
        width: 60%;
        padding: 0; } }
    .card01 .Contents .PlanTitle {
      margin: 20px 0 0 15px; }
      @media (min-width: 1024px) {
        .card01 .Contents .PlanTitle {
          margin: 0 0 0 20px; } }
      .card01 .Contents .PlanTitle .konma img {
        width: 44px;
        height: auto; }
        @media (min-width: 1024px) {
          .card01 .Contents .PlanTitle .konma img {
            width: 64px; } }
      .card01 .Contents .PlanTitle .konma1 {
        position: absolute;
        top: -30px;
        left: -20px;
        z-index: -10; }
      .card01 .Contents .PlanTitle h4 {
        font-size: 0.9em; }
      .card01 .Contents .PlanTitle h2 {
        font-size: 1.5em;
        position: relative;
        display: flex;
        font-feature-settings: "palt";
        letter-spacing: 0.05em; }
        @media (min-width: 1024px) {
          .card01 .Contents .PlanTitle h2 {
            font-size: 2.0em; } }
        @media (min-width: 1250px) {
          .card01 .Contents .PlanTitle h2 {
            font-size: 2.25em; } }
      .card01 .Contents .PlanTitle .konma2 {
        margin: 5px 0 0 -30px;
        z-index: -10; }
    .card01 .Contents .PlanContents {
      margin-top: 5px; }
      @media (min-width: 1024px) {
        .card01 .Contents .PlanContents {
          margin-top: 20px;
          display: flex;
          width: 90%; } }
      .card01 .Contents .PlanContents .CategoryWaku {
        display: flex; }
        @media (min-width: 1024px) {
          .card01 .Contents .PlanContents .CategoryWaku {
            display: initial; } }
      .card01 .Contents .PlanContents .Category {
        margin: 0 10px 10px 0px; }
        .card01 .Contents .PlanContents .Category h4 {
          color: #fff;
          display: inline-block;
          text-align: center;
          border-radius: 50px;
          padding: 1px 14px 3px;
          border: 1px solid #fff;
          font-size: 0.8em;
          font-weight: normal; }
          @media (min-width: 1024px) {
            .card01 .Contents .PlanContents .Category h4 {
              font-size: 0.9em;
              width: 95px; } }
      .card01 .Contents .PlanContents .Text {
        margin: -10px 0 0 0px; }
        @media (min-width: 1024px) {
          .card01 .Contents .PlanContents .Text {
            margin: -10px 0 0 20px; } }
        .card01 .Contents .PlanContents .Text h2 {
          font-size: 2.0em;
          line-height: 1.2em;
          letter-spacing: 0.05em;
          margin-top: 5px; }
          @media (min-width: 1024px) {
            .card01 .Contents .PlanContents .Text h2 {
              font-size: 2.3em;
              margin-top: 0px; } }
          @media (min-width: 1250px) {
            .card01 .Contents .PlanContents .Text h2 {
              font-size: 2.5em; } }
        .card01 .Contents .PlanContents .Text h3 {
          font-size: 1.125em;
          margin-top: 5px; }
          @media (min-width: 1024px) {
            .card01 .Contents .PlanContents .Text h3 {
              margin-top: 15px; } }
        .card01 .Contents .PlanContents .Text p {
          font-size: 0.8em;
          text-align: justify;
          color: #D3D3D3;
          margin: 5px 0 0 0; }
          @media (min-width: 1024px) {
            .card01 .Contents .PlanContents .Text p {
              font-size: 0.9em;
              margin: 10px 0 0 0; } }

.card02 {
  overflow: hidden;
  padding-bottom: 30px; }
  .card02 .swiper {
    overflow: visible;
    padding-left: 5%; }
  .card02 .swiper-slide {
    width: 250px;
    padding: 0; }
    @media (min-width: 1250px) {
      .card02 .swiper-slide {
        width: 320px; } }
    .card02 .swiper-slide .slide {
      margin-right: 10px; }
      @media (min-width: 1250px) {
        .card02 .swiper-slide .slide {
          margin-right: 20px; } }
      .card02 .swiper-slide .slide .slide-media {
        position: relative; }
        .card02 .swiper-slide .slide .slide-media img {
          border-radius: 10px;
          transition: .5s; }
        .card02 .swiper-slide .slide .slide-media .DigestBtn {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          text-align: center;
          height: 36px;
          width: 36px; }
          .card02 .swiper-slide .slide .slide-media .DigestBtn img {
            width: 38px;
            height: auto;
            transition: .5s;
            transform: scale(1); }
        .card02 .swiper-slide .slide .slide-media:hover img {
          opacity: 0.7; }
        .card02 .swiper-slide .slide .slide-media:hover .DigestBtn > img {
          transform: scale(1.08);
          opacity: 1; }
        .card02 .swiper-slide .slide .slide-media:hover .ChipBtn > img {
          opacity: 1; }
        .card02 .swiper-slide .slide .slide-media:hover .OpenChipBtn > img {
          opacity: 1; }
        .card02 .swiper-slide .slide .slide-media .ChipBtn {
          position: absolute;
          bottom: -20px;
          right: 5px;
          z-index: 10; }
          .card02 .swiper-slide .slide .slide-media .ChipBtn img {
            width: 30px;
            height: auto;
            border-radius: 0px; }
        .card02 .swiper-slide .slide .slide-media .OpenChipPanel {
          background: linear-gradient(to right, #FF14A4, #F98924);
          padding: 10px;
          position: absolute;
          bottom: 15px;
          left: 10%;
          right: 2%;
          border-radius: 10px;
          opacity: 0;
          z-index: -10; }
          .card02 .swiper-slide .slide .slide-media .OpenChipPanel p {
            font-size: 1.0em;
            font-weight: bold;
            margin: 0; }
          .card02 .swiper-slide .slide .slide-media .OpenChipPanel .OpenChipBtn {
            position: absolute;
            top: -14px;
            left: -14px; }
            .card02 .swiper-slide .slide .slide-media .OpenChipPanel .OpenChipBtn img {
              width: 28px;
              height: auto; }
        .card02 .swiper-slide .slide .slide-media .OpenChipAnime {
          animation: fadeInToolchip 0.5s ease forwards;
          animation-delay: 0s;
          z-index: 100; }
@keyframes fadeInToolchip {
  0% {
    opacity: 0;
    transform: translateY(10px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
      .card02 .swiper-slide .slide .slide-content h3 {
        font-size: 0.8em;
        font-weight: normal;
        color: #999999;
        margin-top: 10px; }
  .card02 a.swiper-slide {
    width: 250px;
    padding: 0; }
    @media (min-width: 1250px) {
      .card02 a.swiper-slide {
        width: 320px; } }
    .card02 a.swiper-slide .slide {
      margin-right: 10px; }
      @media (min-width: 1250px) {
        .card02 a.swiper-slide .slide {
          margin-right: 20px; } }
      .card02 a.swiper-slide .slide .slide-media {
        position: relative; }
        .card02 a.swiper-slide .slide .slide-media img {
          border-radius: 10px;
          transition: .5s; }
          .card02 a.swiper-slide .slide .slide-media img:hover {
            opacity: 0.7; }
        .card02 a.swiper-slide .slide .slide-media .DigestBtn {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          text-align: center;
          height: 38px; }
          .card02 a.swiper-slide .slide .slide-media .DigestBtn img {
            width: 38px;
            height: auto;
            transition: .5s;
            transform: scale(1); }
        .card02 a.swiper-slide .slide .slide-media:hover .DigestBtn > img {
          transform: scale(1.06); }
        .card02 a.swiper-slide .slide .slide-media .toolchip {
          position: absolute;
          bottom: -20px;
          right: 5px; }
          .card02 a.swiper-slide .slide .slide-media .toolchip img {
            width: 30px;
            height: auto;
            border-radius: 0px; }
      .card02 a.swiper-slide .slide .slide-content h3 {
        font-size: 0.8em;
        font-weight: normal;
        color: #999999;
        margin-top: 10px; }

#Plan12 {
  width: 100%;
  margin: 40px auto 100px; }
  @media (min-width: 1024px) {
    #Plan12 {
      padding-top: 0px; } }

#Category {
  width: 100%;
  margin: 40px auto 100px;
  border-top: 1px solid #333; }
  @media (min-width: 1024px) {
    #Category {
      padding-top: 0px; } }
  #Category .card01 {
    align-items: unset;
    padding: 50px 0%; }
    @media (min-width: 1024px) {
      #Category .card01 {
        padding: 50px 5%; } }
  #Category .PlanContents .Text {
    margin: 20px 0 0 0px; }
    @media (min-width: 1024px) {
      #Category .PlanContents .Text {
        margin: -5px 0 0 0px; } }
  #Category .PlanContents .AudioText {
    margin-top: 15px; }
    #Category .PlanContents .AudioText h5 {
      font-size: 0.9em;
      font-weight: bold;
      color: #fff; }
    #Category .PlanContents .AudioText ul {
      margin: 5px 0 0 0; }
      #Category .PlanContents .AudioText ul li {
        margin: 0 5px 0 0;
        color: #D3D3D3;
        display: inline-block; }
        #Category .PlanContents .AudioText ul li a {
          font-size: 0.9em;
          color: #D3D3D3;
          margin: 0 5px 0 0;
          transition: .5s;
          display: inline-block;
          position: relative; }
          #Category .PlanContents .AudioText ul li a::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #D3D3D3;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .3s; }
          #Category .PlanContents .AudioText ul li a:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }

#footer {
  padding: 40px 0 10px; }