@charset "UTF-8";
body {
  color: #fff; }

img {
  width: 100%;
  height: auto; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  line-height: initial; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0; }

.LineLink a {
  position: relative;
  display: inline-block; }
  .LineLink a::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #9EF1FF;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s; }
  .LineLink a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1); }

/*
---------------------------------------------------------------------------------------------------------------------
ページ内リンクメニュー
---------------------------------------------------------------------------------------------------------------------
*/
#LP-Pc-Menu {
  display: none; }
  @media (min-width: 820px) {
    #LP-Pc-Menu {
      opacity: 0;
      display: flex;
      position: fixed;
      bottom: 10px;
      right: 0;
      z-index: 1000;
      padding: 10px 10px 10px 0;
      background-color: #151515;
      border-bottom-left-radius: 50px;
      border-top-left-radius: 50px; } }
  #LP-Pc-Menu ul {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px; }
    #LP-Pc-Menu ul li {
      margin-right: 20px; }
      #LP-Pc-Menu ul li:last-child {
        margin-right: 0px; }
      #LP-Pc-Menu ul li a {
        font-size: 0.75em;
        font-weight: bold;
        line-height: 1.6em;
        display: inline-block;
        position: relative; }
        @media (min-width: 1024px) {
          #LP-Pc-Menu ul li a {
            font-size: 0.9em; } }
        #LP-Pc-Menu ul li a::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 1px;
          background: #fff;
          transform: scale(0, 1);
          transform-origin: right top;
          transition: transform .3s; }
        #LP-Pc-Menu ul li a:hover::after {
          transform-origin: left top;
          transform: scale(1, 1); }
        #LP-Pc-Menu ul li a:hover {
          color: #fff; }
  #LP-Pc-Menu .GradationBtn2 {
    margin-left: 10px; }

/*　上に上がる動き　*/
#LP-Pc-Menu.UpMove {
  animation: UpAnime 0.5s forwards; }

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*　下に下がる動き　*/
#LP-Pc-Menu.DownMove {
  animation: DownAnime1 0.5s forwards; }

@keyframes DownAnime1 {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 1;
    transform: translateY(100px); } }
/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#mv-copy-video {
  width: 90%;
  margin: 80px auto 10px;
  position: relative; }
  @media (min-width: 1024px) {
    #mv-copy-video {
      display: flex;
      margin: 100px auto 60px; } }
  #mv-copy-video .main-copy {
    color: #fff;
    position: relative;
    z-index: 10; }
    @media (min-width: 1024px) {
      #mv-copy-video .main-copy {
        position: absolute;
        top: 5%;
        width: 40%; } }
    #mv-copy-video .main-copy .sab-copy {
      margin-bottom: 4%; }
      #mv-copy-video .main-copy .sab-copy h1 {
        font-size: 0.9em; }
        @media (min-width: 1024px) {
          #mv-copy-video .main-copy .sab-copy h1 {
            font-size: 1vw; } }
      #mv-copy-video .main-copy .sab-copy h2 {
        font-size: 1.5em; }
        @media (min-width: 1024px) {
          #mv-copy-video .main-copy .sab-copy h2 {
            font-size: 2vw; } }
    #mv-copy-video .main-copy .main-title {
      width: 100%; }
      #mv-copy-video .main-copy .main-title img {
        width: 90%; }
        @media (min-width: 1024px) {
          #mv-copy-video .main-copy .main-title img {
            width: 100%; } }
  #mv-copy-video #MVVideo {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: -20px; }
    @media (min-width: 1024px) {
      #mv-copy-video #MVVideo {
        padding-left: 32%;
        margin-top: 0; } }
    #mv-copy-video #MVVideo .MVVideo-in {
      position: relative; }
      #mv-copy-video #MVVideo .MVVideo-in video {
        width: 100%;
        border-radius: 10px; }
        @media (min-width: 1024px) {
          #mv-copy-video #MVVideo .MVVideo-in video {
            border-radius: 20px; } }
  #mv-copy-video .catch {
    display: flex;
    margin-top: 20px; }
    @media (min-width: 1024px) {
      #mv-copy-video .catch {
        position: absolute;
        bottom: -50px;
        left: 0; } }
    #mv-copy-video .catch .copy-icon {
      position: relative;
      margin: 0 5px 0 0; }
      @media (min-width: 1024px) {
        #mv-copy-video .catch .copy-icon {
          margin: 0 10px 0 0; } }
      #mv-copy-video .catch .copy-icon:nth-child(2) {
        margin: 0; }
      #mv-copy-video .catch .copy-icon img {
        width: 80px; }
        @media (min-width: 1024px) {
          #mv-copy-video .catch .copy-icon img {
            width: 125px; } }
        #mv-copy-video .catch .copy-icon img:nth-child(1) {
          position: absolute;
          top: 0;
          left: 0; }
        #mv-copy-video .catch .copy-icon img:nth-child(2) {
          animation: rotate-anime 20s linear infinite; }
@keyframes rotate-anime {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
    #mv-copy-video .catch .copy-kazu {
      margin: 40px 0 0 10px; }
      @media (min-width: 1024px) {
        #mv-copy-video .catch .copy-kazu {
          margin: 70px 0 0 20px; } }
      #mv-copy-video .catch .copy-kazu img {
        width: 170px; }
        @media (min-width: 1024px) {
          #mv-copy-video .catch .copy-kazu img {
            width: 285px; } }

/*
---------------------------------------------------------------------------------------------------------------------
協賛企業
---------------------------------------------------------------------------------------------------------------------
*/
#company {
  background-color: #fff; }
  #company .YokoScroll {
    overflow: hidden;
    margin: 0;
    padding: 10px 0 10px; }
    #company .YokoScroll .slideshow {
      display: flex; }
      #company .YokoScroll .slideshow.show1 {
        animation: loop-slide 25s infinite linear 1s both; }
        @media (min-width: 768px) {
          #company .YokoScroll .slideshow.show1 {
            animation: loop-slide 60s infinite linear 1s both; } }
      #company .YokoScroll .slideshow.show2 {
        animation: loop-slide 15s infinite linear 1s both; }
        @media (min-width: 768px) {
          #company .YokoScroll .slideshow.show2 {
            animation: loop-slide 40s infinite linear 1s both; } }
      #company .YokoScroll .slideshow img {
        width: 1300px;
        height: auto; }
        @media (min-width: 768px) {
          #company .YokoScroll .slideshow img {
            width: 1800px; } }
        @media (min-width: 1250px) {
          #company .YokoScroll .slideshow img {
            width: 2300px; } }
@keyframes loop-slide {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
/*
---------------------------------------------------------------------------------------------------------------------
リクライブまんが
---------------------------------------------------------------------------------------------------------------------
*/
.modaal-container {
  border-radius: 30px; }

.modaal-outer-wrapper {
  background-color: rgba(0, 0, 0, 0.85); }

.modaal-content-container {
  padding: 0px; }

.modaal-close {
  left: 20px; }

.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #fff; }

.modaal-wrapper .modaal-close {
  background: #fff; }
  .modaal-wrapper .modaal-close:hover {
    background: #111; }

.modaal-close:after, .modaal-close:before {
  background: #000; }

.manga-popup {
  padding: 30px;
  background-color: #fff; }

/*
---------------------------------------------------------------------------------------------------------------------
採用活動でこんなお悩みありませんか？
---------------------------------------------------------------------------------------------------------------------
*/
#problem {
  background: linear-gradient(180deg, #B36FBF, #004657 30%, #111111);
  padding: 60px 0 100px; }
  @media (min-width: 1024px) {
    #problem {
      padding: 60px 0 200px; } }
  #problem .problem-in {
    max-width: 1250px;
    width: 90%;
    margin: 0 auto 150px; }
    #problem .problem-in .manga {
      margin: 0 0 50px 0; }
      @media (min-width: 1024px) {
        #problem .problem-in .manga {
          display: flex; } }
      #problem .problem-in .manga .problem-title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center; }
        @media (min-width: 1024px) {
          #problem .problem-in .manga .problem-title {
            width: 30%;
            justify-content: flex-start;
            text-align: left; } }
        #problem .problem-in .manga .problem-title h2 {
          font-size: 2.0em; }
          @media (min-width: 1024px) {
            #problem .problem-in .manga .problem-title h2 {
              font-size: 3.0em; } }
      #problem .problem-in .manga a.inline {
        width: 70%;
        padding-left: 5%; }
        #problem .problem-in .manga a.inline .manga-img img {
          transition: .5s; }
          @media (min-width: 1024px) {
            #problem .problem-in .manga a.inline .manga-img img {
              margin-left: 10px; } }
        #problem .problem-in .manga a.inline .manga-btn {
          display: flex;
          clear: both;
          float: right;
          margin: 8px 0 0 0; }
          @media (min-width: 1024px) {
            #problem .problem-in .manga a.inline .manga-btn {
              margin: 10px -5px 0 0; } }
          #problem .problem-in .manga a.inline .manga-btn h3 {
            font-size: 0.75em;
            color: #fff;
            margin-right: 5px;
            transition: .5s; }
            @media (min-width: 1024px) {
              #problem .problem-in .manga a.inline .manga-btn h3 {
                font-size: 0.9em; } }
          #problem .problem-in .manga a.inline .manga-btn img {
            width: 14px;
            margin-top: 2px; }
            @media (min-width: 1024px) {
              #problem .problem-in .manga a.inline .manga-btn img {
                width: 16px; } }
        #problem .problem-in .manga a.inline:hover .manga-img > img {
          opacity: 0.6; }
        #problem .problem-in .manga a.inline:hover .manga-btn > h3 {
          color: #F2BA00; }
    #problem .problem-in .discussion-box {
      border: 1px solid #707070;
      border-radius: 10px;
      color: #707070;
      margin-bottom: 20px;
      position: relative;
      height: 180px; }
      @media (min-width: 1024px) {
        #problem .problem-in .discussion-box {
          border-radius: 20px;
          height: 250px;
          margin-bottom: 40px; } }
      #problem .problem-in .discussion-box h4 {
        font-size: 0.9em;
        color: #F2BA00;
        position: absolute;
        top: 10px;
        left: 10px; }
        @media (min-width: 1024px) {
          #problem .problem-in .discussion-box h4 {
            font-size: 1.125em;
            top: 20px;
            left: 20px; } }
      #problem .problem-in .discussion-box .text {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; }
        #problem .problem-in .discussion-box .text h3 {
          font-size: 1.2em;
          line-height: 1.6em;
          color: #fff;
          text-align: center; }
          @media (min-width: 1024px) {
            #problem .problem-in .discussion-box .text h3 {
              font-size: 1.8em; } }
    @media only screen and (min-width: 1024px) {
      #problem .problem-in .o-6column .col-xl-6 {
        padding: 0 20px; }
      #problem .problem-in .o-6column {
        margin: 0 -20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
リクライブCM
---------------------------------------------------------------------------------------------------------------------
*/
#reclive-cm {
  max-width: 2000px;
  width: 90%;
  margin: -200px auto 50px;
  position: relative;
  z-index: 10; }
  @media (min-width: 1024px) {
    #reclive-cm {
      margin: -200px auto 200px; } }
  #reclive-cm .cm-video {
    position: relative;
    margin-left: 10%; }
    @media (min-width: 1024px) {
      #reclive-cm .cm-video {
        margin-left: 30%; } }
    #reclive-cm .cm-video #cm-video-box {
      position: relative;
      overflow: hidden; }
      #reclive-cm .cm-video #cm-video-box video {
        width: 100%;
        border-radius: 10px;
        z-index: -5;
        position: relative; }
        @media (min-width: 1024px) {
          #reclive-cm .cm-video #cm-video-box video {
            border-radius: 20px; } }
    #reclive-cm .cm-video img {
      position: absolute;
      bottom: -20px;
      left: -20px;
      width: 100%;
      border-radius: 10px;
      z-index: -10; }
      @media (min-width: 1024px) {
        #reclive-cm .cm-video img {
          border-radius: 20px;
          bottom: -50px;
          left: -50px; } }
  #reclive-cm .cm-text {
    margin: -15px 0 0 0; }
    @media (min-width: 1024px) {
      #reclive-cm .cm-text {
        margin: -200px auto 0; } }
    #reclive-cm .cm-text h2 {
      font-size: 2.0em;
      line-height: 1.6em; }
      @media (min-width: 1024px) {
        #reclive-cm .cm-text h2 {
          font-size: 4.0em; } }
      #reclive-cm .cm-text h2 div .emphasis01 {
        display: inline-block;
        position: relative;
        color: #F2BA00; }
      #reclive-cm .cm-text h2 div .emphasis01::before {
        position: absolute;
        top: -1.1em;
        left: 50%;
        transform: translate(-50%, 0);
        color: #fff;
        font-size: 0.6em;
        content: "・"; }

/*
---------------------------------------------------------------------------------------------------------------------
タイトル
---------------------------------------------------------------------------------------------------------------------
*/
.r2-title {
  max-width: 1350px;
  width: 95%;
  position: relative;
  margin: auto; }
  .r2-title .r2-title-in {
    display: flex;
    justify-content: center; }
    @media (min-width: 1024px) {
      .r2-title .r2-title-in {
        justify-content: flex-start; } }
  .r2-title.ver1 {
    margin: 20px auto 200px; }
    @media (min-width: 768px) {
      .r2-title.ver1 {
        margin: 20px auto 10px; } }
    @media (min-width: 1024px) {
      .r2-title.ver1 {
        margin: 80px auto 0;
        display: flex; } }
  .r2-title .title {
    display: flex; }
    .r2-title .title img {
      width: 40px; }
      @media (min-width: 1024px) {
        .r2-title .title img {
          width: 60px; } }
      @media (min-width: 1250px) {
        .r2-title .title img {
          width: 84px; } }
      .r2-title .title img:nth-child(1) {
        margin-top: -100px; }
        @media (min-width: 1024px) {
          .r2-title .title img:nth-child(1) {
            margin-top: -170px; } }
        @media (min-width: 1250px) {
          .r2-title .title img:nth-child(1) {
            margin-top: -200px; } }
      .r2-title .title img:nth-child(3) {
        margin-top: 70px;
        z-index: 0; }
        @media (min-width: 1024px) {
          .r2-title .title img:nth-child(3) {
            margin-top: 110px; } }
        @media (min-width: 1250px) {
          .r2-title .title img:nth-child(3) {
            margin-top: 130px; } }
    .r2-title .title h2 {
      font-size: 2.2em;
      line-height: 1.2em;
      margin: 0 -20px 0 -20px;
      z-index: 10; }
      @media (min-width: 1024px) {
        .r2-title .title h2 {
          font-size: 3.4em;
          margin: 0 -50px 0 -50px; } }
      @media (min-width: 1250px) {
        .r2-title .title h2 {
          font-size: 4.4em; } }
  .r2-title .title.oneline img:nth-child(1) {
    margin-top: -80px; }
    @media (min-width: 768px) {
      .r2-title .title.oneline img:nth-child(1) {
        margin-top: -60px; } }
    @media (min-width: 1024px) {
      .r2-title .title.oneline img:nth-child(1) {
        margin-top: -120px; } }
  .r2-title .title.oneline img:nth-child(3) {
    margin-top: 65px;
    z-index: 0; }
    @media (min-width: 768px) {
      .r2-title .title.oneline img:nth-child(3) {
        margin-top: 30px; } }
    @media (min-width: 1024px) {
      .r2-title .title.oneline img:nth-child(3) {
        margin-top: 60px; } }
  .r2-title .title.twoline img:nth-child(3) {
    margin: 70px 0 0 -60px;
    z-index: 0; }
    @media (min-width: 1024px) {
      .r2-title .title.twoline img:nth-child(3) {
        margin: 130px 0 0 -100px; } }
  .r2-title .text.text1 {
    margin-left: 20px; }
    @media (min-width: 1024px) {
      .r2-title .text.text1 {
        position: absolute;
        left: 42%;
        bottom: 20px; } }
  .r2-title .text.text2 {
    margin-left: 20px; }
    @media (min-width: 1024px) {
      .r2-title .text.text2 {
        position: absolute;
        left: 35%;
        bottom: 20px; } }
  .r2-title .text.text3 {
    margin-left: 20px; }
    @media (min-width: 1024px) {
      .r2-title .text.text3 {
        margin-left: 30px; } }
    .r2-title .text.text3 p {
      margin: 10px 0 0 0; }
      @media (min-width: 1024px) {
        .r2-title .text.text3 p {
          margin: 20px 0 0 0; } }
  .r2-title .text p {
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.6em;
    text-align: justify;
    margin: 20px 0 0 0; }
    @media (min-width: 1024px) {
      .r2-title .text p {
        font-size: 1.125em;
        margin: 80px 0 0 0; } }
  .r2-title .comment {
    display: flex;
    position: absolute;
    top: 230px;
    right: 0; }
    @media (min-width: 768px) {
      .r2-title .comment {
        top: -100px; } }
    .r2-title .comment.comment-plan {
      top: 200px; }
      @media (min-width: 768px) {
        .r2-title .comment.comment-plan {
          top: 10px; } }
      @media (min-width: 1024px) {
        .r2-title .comment.comment-plan {
          top: -50px; } }
      @media (min-width: 1250px) {
        .r2-title .comment.comment-plan {
          top: 20px; } }
    .r2-title .comment.comment-flow {
      top: 220px; }
      @media (min-width: 768px) {
        .r2-title .comment.comment-flow {
          top: 20px; } }
      @media (min-width: 1024px) {
        .r2-title .comment.comment-flow {
          top: -50px; } }
      @media (min-width: 1250px) {
        .r2-title .comment.comment-flow {
          top: 20px; } }
    @media (min-width: 1024px) {
      .r2-title .comment {
        top: 20px; } }
    .r2-title .comment img {
      width: 160px; }
      @media (min-width: 1024px) {
        .r2-title .comment img {
          width: 225px; } }
    .r2-title .comment .comment-1 {
      animation: wobbling_x1 0.8s ease-in-out infinite alternate, wobbling_y1 1.1s ease-in-out infinite alternate; }
      .r2-title .comment .comment-1 img {
        margin: 0px 10px 0 0; }
        @media (min-width: 1024px) {
          .r2-title .comment .comment-1 img {
            margin: -100px -10px 0 0; } }
    .r2-title .comment .comment-2 {
      animation: wobbling_x2 0.8s ease-in-out infinite alternate, wobbling_y2 1.1s ease-in-out infinite alternate; }
      .r2-title .comment .comment-2 img {
        margin: 40px 0 0 0; }
        @media (min-width: 1024px) {
          .r2-title .comment .comment-2 img {
            margin: 0; } }
@keyframes wobbling_x1 {
  0% {
    margin-left: 4px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y1 {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: 4px; } }
@keyframes wobbling_x2 {
  0% {
    margin-left: -4px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y2 {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: -4px; } }
/*
---------------------------------------------------------------------------------------------------------------------
企画一覧
---------------------------------------------------------------------------------------------------------------------
*/
#plan-back {
  background-color: #191919;
  padding: 50px 0 10px; }
  @media (min-width: 1024px) {
    #plan-back {
      padding: 100px 0 10px; } }
  #plan-back #planlist {
    padding: 10px 0 60px;
    /* 前へ次への矢印カスタマイズ */
    /* 前へ次への矢印カスタマイズ */
    /* 前への矢印カスタマイズ */
    /* 次への矢印カスタマイズ */ }
    @media (min-width: 1024px) {
      #plan-back #planlist {
        padding: 0 0 80px; } }
    #plan-back #planlist .swiper-button-prev,
    #plan-back #planlist .swiper-button-next {
      height: 46px;
      width: 46px;
      top: 30px;
      left: inherit; }
    #plan-back #planlist .swiper-button-prev::after,
    #plan-back #planlist .swiper-button-next::after {
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      margin: auto;
      height: 30px;
      width: 30px; }
      @media (min-width: 1024px) {
        #plan-back #planlist .swiper-button-prev::after,
        #plan-back #planlist .swiper-button-next::after {
          height: 46px;
          width: 46px; } }
    #plan-back #planlist .swiper-button-next {
      right: 10px; }
    #plan-back #planlist .swiper-button-prev {
      right: 50px; }
      @media (min-width: 1024px) {
        #plan-back #planlist .swiper-button-prev {
          right: 70px; } }
    #plan-back #planlist .card01 .swiper-button-prev::after {
      background-image: url("../img/parts/arrow-right-wh-l.svg"); }
    #plan-back #planlist .card01 .swiper-button-next::after {
      background-image: url("../img/parts/arrow-left-wh-l.svg"); }
    #plan-back #planlist .card01 {
      overflow: hidden;
      position: relative;
      margin-bottom: 30px;
      padding-top: 50px; }
    #plan-back #planlist .swiper-slide {
      padding: 0; }
      #plan-back #planlist .swiper-slide .slide {
        margin-right: 10px;
        transition: .5s;
        padding-top: 16px; }
        @media (min-width: 1250px) {
          #plan-back #planlist .swiper-slide .slide {
            margin-right: 20px; } }
        #plan-back #planlist .swiper-slide .slide .slide-media {
          position: relative; }
          #plan-back #planlist .swiper-slide .slide .slide-media img {
            border-radius: 5px;
            transition: .5s; }
            @media (min-width: 1024px) {
              #plan-back #planlist .swiper-slide .slide .slide-media img {
                border-radius: 10px; } }
        #plan-back #planlist .swiper-slide .slide:hover img {
          opacity: 0.8; }
        #plan-back #planlist .swiper-slide .slide:hover .planlist-text > h3 {
          color: #00A4E3; }
      #plan-back #planlist .swiper-slide .planlist-text {
        margin: 12px 0 15px; }
        #plan-back #planlist .swiper-slide .planlist-text h3 {
          font-size: 1.125em;
          line-height: 1.2em;
          color: #fff;
          margin: 0 0 5px 0;
          transition: .5s; }
          @media (min-width: 1024px) {
            #plan-back #planlist .swiper-slide .planlist-text h3 {
              font-size: 1.5em; } }
        #plan-back #planlist .swiper-slide .planlist-text p {
          font-size: 0.8em;
          font-weight: lighter;
          line-height: 1.4em;
          color: #999; }
          @media (min-width: 1024px) {
            #plan-back #planlist .swiper-slide .planlist-text p {
              font-size: 1em; } }

/*
---------------------------------------------------------------------------------------------------------------------
台本なし一発撮り
---------------------------------------------------------------------------------------------------------------------
*/
#one-shot {
  padding: 360px 0 380px;
  position: relative;
  width: 100%; }
  @media (min-width: 768px) {
    #one-shot {
      padding: 200px 0 250px; } }
  @media (min-width: 1024px) {
    #one-shot {
      padding: 200px 0;
      max-width: 1500px;
      margin: auto; } }
  #one-shot .r2-title2 {
    z-index: 20; }
    #one-shot .r2-title2.first {
      position: absolute;
      top: 5%;
      left: 5%; }
      @media (min-width: 1024px) {
        #one-shot .r2-title2.first {
          top: 15%; } }
    #one-shot .r2-title2.second .comment {
      position: absolute;
      bottom: 380px;
      right: 4%; }
    #one-shot .r2-title2 .second-text {
      position: absolute;
      top: 750px;
      bottom: 5%;
      right: 5%; }
      @media (min-width: 1024px) {
        #one-shot .r2-title2 .second-text {
          top: inherit; } }
    #one-shot .r2-title2 .title {
      display: flex; }
      #one-shot .r2-title2 .title img {
        width: 30px; }
        @media (min-width: 1024px) {
          #one-shot .r2-title2 .title img {
            width: 60px; } }
        #one-shot .r2-title2 .title img:nth-child(1) {
          margin-top: -80px; }
          @media (min-width: 1024px) {
            #one-shot .r2-title2 .title img:nth-child(1) {
              margin-top: -150px; } }
        #one-shot .r2-title2 .title img:nth-child(3) {
          margin-top: 60px;
          z-index: 0; }
          @media (min-width: 1024px) {
            #one-shot .r2-title2 .title img:nth-child(3) {
              margin-top: 100px; } }
      #one-shot .r2-title2 .title h2 {
        font-size: 2.0em;
        line-height: 1.2em;
        margin: 0 -20px 0 -20px;
        z-index: 10; }
        @media (min-width: 1024px) {
          #one-shot .r2-title2 .title h2 {
            font-size: 3.0em;
            margin: 0 -50px 0 -50px; } }
    #one-shot .r2-title2 .title.twoline img:nth-child(3) {
      margin: 60px 0 0 -90px;
      z-index: 0; }
      @media (min-width: 1024px) {
        #one-shot .r2-title2 .title.twoline img:nth-child(3) {
          margin: 100px 0 0 -130px; } }
    #one-shot .r2-title2 .text p {
      font-size: 0.9em;
      font-weight: bold;
      line-height: 1.6em;
      text-align: justify;
      font-feature-settings: "palt";
      letter-spacing: 0.08em;
      margin: 20px 0 0 0; }
      @media (min-width: 1024px) {
        #one-shot .r2-title2 .text p {
          font-size: 1.125em;
          margin: 20px 0 0 0; } }
    #one-shot .r2-title2 .comment1 {
      display: flex; }
      @media (min-width: 768px) {
        #one-shot .r2-title2 .comment1 {
          display: block; } }
      #one-shot .r2-title2 .comment1 img {
        width: 150px; }
        @media (min-width: 768px) {
          #one-shot .r2-title2 .comment1 img {
            width: 170px; } }
        @media (min-width: 1024px) {
          #one-shot .r2-title2 .comment1 img {
            width: 220px; } }
      #one-shot .r2-title2 .comment1 .comment-1 {
        animation: wobbling_x1 0.8s ease-in-out infinite alternate, wobbling_y1 1.1s ease-in-out infinite alternate; }
        #one-shot .r2-title2 .comment1 .comment-1 img {
          margin: 20px 0 0 0; }
      #one-shot .r2-title2 .comment1 .comment-2 {
        animation: wobbling_x2 0.8s ease-in-out infinite alternate, wobbling_y2 1.1s ease-in-out infinite alternate; }
        #one-shot .r2-title2 .comment1 .comment-2 img {
          margin: 20px 0 0 20px; }
          @media (min-width: 1024px) {
            #one-shot .r2-title2 .comment1 .comment-2 img {
              margin: 20px 0 0 100px; } }
    #one-shot .r2-title2 .comment2 {
      display: flex;
      position: absolute; }
      @media (min-width: 768px) {
        #one-shot .r2-title2 .comment2 {
          display: block;
          top: 400px;
          right: 5%; } }
      @media (min-width: 1024px) {
        #one-shot .r2-title2 .comment2 {
          display: block;
          top: 300px;
          right: 2%; } }
      @media (min-width: 1250px) {
        #one-shot .r2-title2 .comment2 {
          display: block;
          top: 400px;
          right: 5%; } }
      #one-shot .r2-title2 .comment2 img {
        width: 150px; }
        @media (min-width: 768px) {
          #one-shot .r2-title2 .comment2 img {
            width: 170px; } }
        @media (min-width: 1024px) {
          #one-shot .r2-title2 .comment2 img {
            width: 220px; } }
      #one-shot .r2-title2 .comment2 .comment-3 {
        animation: wobbling_x1 0.8s ease-in-out infinite alternate, wobbling_y1 1.1s ease-in-out infinite alternate; }
        #one-shot .r2-title2 .comment2 .comment-3 img {
          margin: 20px 0 0 20px; }
          @media (min-width: 1024px) {
            #one-shot .r2-title2 .comment2 .comment-3 img {
              margin: 0 0 0 120px; } }
      #one-shot .r2-title2 .comment2 .comment-4 {
        animation: wobbling_x2 0.8s ease-in-out infinite alternate, wobbling_y2 1.1s ease-in-out infinite alternate; }
        #one-shot .r2-title2 .comment2 .comment-4 img {
          margin: 40px 0 0 20px; }
          @media (min-width: 1024px) {
            #one-shot .r2-title2 .comment2 .comment-4 img {
              margin: 40px 0 0 80px; } }
@keyframes wobbling_x1 {
  0% {
    margin-left: 4px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y1 {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: 4px; } }
@keyframes wobbling_x2 {
  0% {
    margin-left: -4px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y2 {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: -4px; } }
  #one-shot .one-shot-video {
    max-width: 835px;
    width: 90%;
    margin: auto;
    text-align: center;
    position: relative; }
    #one-shot .one-shot-video a {
      position: unset; }
    #one-shot .one-shot-video .video video {
      border-radius: 50%;
      width: 220px; }
      @media (min-width: 768px) {
        #one-shot .one-shot-video .video video {
          width: 500px; } }
      @media (min-width: 1024px) {
        #one-shot .one-shot-video .video video {
          width: 600px; } }
      @media (min-width: 1250px) {
        #one-shot .one-shot-video .video video {
          width: 730px; } }
    #one-shot .one-shot-video .one-shot-text {
      position: absolute;
      top: -5px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 250px;
      width: 250px;
      overflow: hidden;
      animation: rotate-anime 20s linear infinite; }
      @media (min-width: 768px) {
        #one-shot .one-shot-video .one-shot-text {
          width: 560px;
          height: 560px; } }
      @media (min-width: 1024px) {
        #one-shot .one-shot-video .one-shot-text {
          width: 680px;
          height: 680px; } }
      @media (min-width: 1250px) {
        #one-shot .one-shot-video .one-shot-text {
          width: 835px;
          height: 835px; } }
@keyframes rotate-anime {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
      #one-shot .one-shot-video .one-shot-text img {
        width: 250px;
        overflow: hidden; }
        @media (min-width: 768px) {
          #one-shot .one-shot-video .one-shot-text img {
            width: 560px; } }
        @media (min-width: 1024px) {
          #one-shot .one-shot-video .one-shot-text img {
            width: 680px; } }
        @media (min-width: 1250px) {
          #one-shot .one-shot-video .one-shot-text img {
            width: 835px; } }
    #one-shot .one-shot-video .play-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 50px; }
      @media (min-width: 768px) {
        #one-shot .one-shot-video .play-btn {
          height: 80px; } }
      #one-shot .one-shot-video .play-btn img {
        width: 50px; }
        @media (min-width: 768px) {
          #one-shot .one-shot-video .play-btn img {
            width: 80px; } }

/*
---------------------------------------------------------------------------------------------------------------------
工数最小！業界最速！
---------------------------------------------------------------------------------------------------------------------
*/
#flow {
  background-color: #191919;
  padding: 50px 0 80px; }
  @media (min-width: 1024px) {
    #flow {
      padding: 150px 0 150px; } }
  @media (min-width: 1250px) {
    #flow {
      padding: 150px 0 250px; } }
  #flow .flow-in {
    overflow: scroll;
    text-align: center;
    margin: 80px auto 0;
    padding: 20px 20px 0; }
    @media (min-width: 768px) {
      #flow .flow-in {
        margin: 20px auto 0; } }
    #flow .flow-in img {
      width: 800px; }
      @media (min-width: 1024px) {
        #flow .flow-in img {
          width: 1000px; } }
      @media (min-width: 1250px) {
        #flow .flow-in img {
          width: 1240px; } }
  #flow ::-webkit-scrollbar {
    display: none; }

/*
---------------------------------------------------------------------------------------------------------------------
成功するまでずーっとフォロー
---------------------------------------------------------------------------------------------------------------------
*/
#follow {
  position: relative;
  padding: 40px 0 0; }
  @media (min-width: 1024px) {
    #follow {
      padding: 100px 0 0; } }
  #follow .follow-back {
    text-align: center;
    width: 95%;
    max-width: 1500px;
    margin: auto;
    position: relative; }
    #follow .follow-back img {
      border-radius: 20px; }
      @media (min-width: 1024px) {
        #follow .follow-back img {
          border-radius: 40px; } }
    #follow .follow-back::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(30deg, #000000 0%, #ffffff 100%);
      height: 100%;
      mix-blend-mode: multiply;
      z-index: 10;
      border-radius: 40px; }
  #follow .r2-title {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 20; }
    @media (min-width: 768px) {
      #follow .r2-title {
        top: 100px; } }
    @media (min-width: 1024px) {
      #follow .r2-title {
        top: 200px; } }
    @media (min-width: 1180px) {
      #follow .r2-title {
        top: 260px; } }

#follow-case {
  margin: -35px 0 80px 0;
  position: relative;
  z-index: 30; }
  @media (min-width: 1024px) {
    #follow-case {
      margin: -60px 0 200px 0; } }
  @media (min-width: 1250px) {
    #follow-case {
      margin: -100px 0 200px 0; } }
  #follow-case .card02 {
    overflow: hidden;
    position: relative; }
    #follow-case .card02 .swiper {
      padding-left: 5%; }
      #follow-case .card02 .swiper .swiper-slide {
        width: 250px;
        padding-right: 10px; }
        @media (min-width: 768px) {
          #follow-case .card02 .swiper .swiper-slide {
            width: 320px;
            padding-right: 20px; } }
        @media (min-width: 1250px) {
          #follow-case .card02 .swiper .swiper-slide {
            width: 530px;
            padding-right: 30px; } }
        #follow-case .card02 .swiper .swiper-slide a {
          transition: .5s;
          color: #fff; }
          #follow-case .card02 .swiper .swiper-slide a video {
            width: 100%;
            border-radius: 5px;
            transition: .5s; }
            @media (min-width: 1024px) {
              #follow-case .card02 .swiper .swiper-slide a video {
                border-radius: 10px; } }
          #follow-case .card02 .swiper .swiper-slide a .follow-case-text {
            margin-top: 10px; }
            @media (min-width: 1024px) {
              #follow-case .card02 .swiper .swiper-slide a .follow-case-text {
                margin-top: 20px; } }
            #follow-case .card02 .swiper .swiper-slide a .follow-case-text h3 {
              font-size: 1.2em;
              font-weight: bold;
              transition: .5s; }
              @media (min-width: 1024px) {
                #follow-case .card02 .swiper .swiper-slide a .follow-case-text h3 {
                  font-size: 1.5em; } }
            #follow-case .card02 .swiper .swiper-slide a .follow-case-text p {
              font-size: 0.9em;
              line-height: 1.6em;
              color: #999999;
              margin-top: 10px; }
              @media (min-width: 1024px) {
                #follow-case .card02 .swiper .swiper-slide a .follow-case-text p {
                  font-size: 1.0em;
                  margin-top: 20px; } }
          #follow-case .card02 .swiper .swiper-slide a:hover video {
            opacity: 0.7; }
          #follow-case .card02 .swiper .swiper-slide a:hover .follow-case-text > h3 {
            color: #00A4E3; }

#web-work {
  padding-top: 100px; }

/*
---------------------------------------------------------------------------------------------------------------------
カンタン料金でコストが明確！
---------------------------------------------------------------------------------------------------------------------
*/
#price {
  max-width: 1350px;
  width: 94%;
  margin: auto;
  padding: 40px 0 80px; }
  @media (min-width: 768px) {
    #price {
      padding: 80px 0 80px; } }
  @media (min-width: 1024px) {
    #price {
      display: flex;
      padding: 80px 0 200px; } }
  #price .price-left {
    display: flex;
    justify-content: center; }
    @media (min-width: 1024px) {
      #price .price-left {
        display: block;
        width: 200px; } }
    @media (min-width: 1250px) {
      #price .price-left {
        width: 300px; } }
    #price .price-left img {
      width: 90%; }
      @media (min-width: 768px) {
        #price .price-left img {
          width: 60%; } }
      @media (min-width: 1024px) {
        #price .price-left img {
          width: 100%; } }
      @media (min-width: 1024px) {
        #price .price-left img.price-sp {
          display: none; } }
      #price .price-left img.price-pc {
        display: none; }
        @media (min-width: 1024px) {
          #price .price-left img.price-pc {
            display: block; } }
    #price .price-left h2 {
      font-size: 1.2em;
      margin: 36px 10px 0 0; }
      @media (min-width: 1250px) {
        #price .price-left h2 {
          font-size: 1.5em;
          margin: 0; } }
    #price .price-left h3 {
      font-size: 7em;
      line-height: 0.9em;
      color: #9EF1FF; }
      @media (min-width: 1024px) {
        #price .price-left h3 {
          font-size: 10em; } }
      @media (min-width: 1250px) {
        #price .price-left h3 {
          font-size: 14em; } }
    #price .price-left h4 {
      font-size: 1.2em;
      text-align: right;
      margin: 66px 0 0 10px; }
      @media (min-width: 1024px) {
        #price .price-left h4 {
          margin: 0; } }
      @media (min-width: 1250px) {
        #price .price-left h4 {
          font-size: 1.6em; } }
  #price .price-right {
    margin: 20px 0 0 0; }
    @media (min-width: 1024px) {
      #price .price-right {
        width: calc( 100% - 200px );
        margin: 0 0 0 5%; } }
    @media (min-width: 1250px) {
      #price .price-right {
        width: calc( 100% - 300px ); } }
    #price .price-right h2 {
      font-size: 1.2em;
      color: #9EF1FF;
      margin-bottom: 10px; }
      @media (min-width: 1024px) {
        #price .price-right h2 {
          font-size: 1.5em; } }
    #price .price-right h3 {
      font-size: 1.0em; }
      @media (min-width: 1024px) {
        #price .price-right h3 {
          font-size: 1.5em; } }
    #price .price-right p {
      font-size: 0.7em;
      line-height: 1.6em;
      margin: 5px 0 0 0; }
      @media (min-width: 1024px) {
        #price .price-right p {
          font-size: 0.8em; } }
      #price .price-right p .black {
        color: #111; }
    #price .price-right h5 {
      font-size: 0.7em;
      font-weight: bold;
      color: #999999;
      margin: 12px 0 0 10px; }
      @media (min-width: 1024px) {
        #price .price-right h5 {
          font-size: 0.9em; } }
    #price .price-right img.check {
      width: 18px;
      margin-top: 5px; }
      @media (min-width: 1024px) {
        #price .price-right img.check {
          width: 20px;
          margin-top: 12px; } }
    #price .price-right .title {
      margin-bottom: 20px;
      text-align: center; }
      @media (min-width: 768px) {
        #price .price-right .title {
          text-align: left; } }
      @media (min-width: 1024px) {
        #price .price-right .title {
          display: flex; } }
      #price .price-right .title h5 {
        margin: 5px 0 0 0; }
        @media (min-width: 1024px) {
          #price .price-right .title h5 {
            margin: 12px 0 0 10px; } }
    #price .price-right .package {
      border-top: 1px solid #707070;
      padding: 30px 0 0 0; }
      @media (min-width: 1024px) {
        #price .price-right .package {
          padding: 50px 0 0 0; } }
      #price .price-right .package ul {
        width: 80%;
        margin: auto; }
        @media (min-width: 768px) {
          #price .price-right .package ul {
            width: 100%;
            display: flex; } }
        #price .price-right .package ul li {
          display: flex;
          align-items: flex-start;
          margin: 0 0 20px 0; }
          @media (min-width: 768px) {
            #price .price-right .package ul li {
              margin: 0 5% 0 0; } }
          #price .price-right .package ul li:nth-child(3) {
            margin: 0; }
          #price .price-right .package ul li .package-text {
            margin-left: 10px; }
    #price .price-right .delivery {
      border-top: 1px solid #707070;
      padding: 30px 0 0 0;
      margin-top: 30px; }
      @media (min-width: 1024px) {
        #price .price-right .delivery {
          padding: 50px 0 0 0;
          margin-top: 60px; } }
      #price .price-right .delivery ul {
        margin: 0;
        display: flex; }
        #price .price-right .delivery ul li {
          margin: 0 2% 40px 0; }
          @media (min-width: 768px) {
            #price .price-right .delivery ul li {
              margin: 0 5% 0 0; } }
          #price .price-right .delivery ul li:nth-child(2) {
            margin-right: 0; }
          #price .price-right .delivery ul li .delivery-title {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px; }
            @media (min-width: 1024px) {
              #price .price-right .delivery ul li .delivery-title {
                margin-bottom: 30px; } }
            #price .price-right .delivery ul li .delivery-title .delivery-title-in {
              margin-left: 10px; }
              #price .price-right .delivery ul li .delivery-title .delivery-title-in p {
                color: #999999; }
          #price .price-right .delivery ul li a .imgWrap {
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            display: block;
            z-index: 1; }
            @media (min-width: 768px) {
              #price .price-right .delivery ul li a .imgWrap {
                border-radius: 10px; } }
            #price .price-right .delivery ul li a .imgWrap img {
              width: 100%;
              height: auto;
              display: block;
              transition-duration: 0.8s;
              transform: scale(1); }
          #price .price-right .delivery ul li a h5 {
            margin: 10px 0 0 0;
            transition: .5s; }
          #price .price-right .delivery ul li a:hover .imgWrap > img {
            transform: scale(1.04); }
          #price .price-right .delivery ul li a:hover h5 {
            color: #00A4E3; }

/*
---------------------------------------------------------------------------------------------------------------------
導入企業の声
---------------------------------------------------------------------------------------------------------------------
*/
#voice {
  position: relative;
  padding: 40px 0 60px;
  margin: auto;
  max-width: 1350px;
  width: 95%; }
  #voice .voice-box {
    margin-bottom: 10px; }
    @media (min-width: 768px) {
      #voice .voice-box {
        margin-bottom: 20px; } }
    @media (min-width: 1250px) {
      #voice .voice-box {
        margin-bottom: 40px; } }
    #voice .voice-box a {
      transition: .5s;
      position: unset;
      /* グラデーション1 */
      /* グラデーション2 */ }
      #voice .voice-box a .voice-box-in {
        height: 100%;
        position: relative; }
        #voice .voice-box a .voice-box-in img:nth-child(2) {
          position: absolute;
          top: 0;
          left: 0; }
      #voice .voice-box a .voice-box-in::before,
      #voice .voice-box a .voice-box-in::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10px; }
        @media (min-width: 768px) {
          #voice .voice-box a .voice-box-in::before,
          #voice .voice-box a .voice-box-in::after {
            border-radius: 20px; } }
      #voice .voice-box a .voice-box-in::before {
        transition: all 0.6s;
        /* アニメーション実行時間 */
        z-index: -1;
        background: linear-gradient(135deg, #2C24F9, #B70063); }
      #voice .voice-box a .voice-box-in::after {
        z-index: -2;
        background: linear-gradient(315deg, #2C24F9, #B70063); }
      #voice .voice-box a:hover .voice-box-in::before {
        opacity: 0; }
  @media only screen and (min-width: 768px) {
    #voice .o-4column .col-xl-4 {
      padding: 0 10px; }
    #voice .o-4column {
      margin: 0 -10px; } }
  @media only screen and (min-width: 1250px) {
    #voice .o-4column .col-xl-4 {
      padding: 0 20px; }
    #voice .o-4column {
      margin: 0 -20px; } }
  #voice .white-btn {
    text-align: center;
    margin-top: 20px; }

/*
---------------------------------------------------------------------------------------------------------------------
PICK UP!　リクライブおすすめの採用動画
---------------------------------------------------------------------------------------------------------------------
*/
#pick-up {
  padding: 60px 0 180px; }
  #pick-up .pick-up-title {
    margin-bottom: 15px;
    padding-left: 2%; }
    @media (min-width: 768px) {
      #pick-up .pick-up-title {
        display: flex; } }
    #pick-up .pick-up-title h2 {
      font-size: 2.4em;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      line-height: 0.9em;
      margin: 0; }
    #pick-up .pick-up-title h3 {
      font-size: 1.2em;
      line-height: 1.3em;
      margin: 3px 0 0 0; }
      @media (min-width: 768px) {
        #pick-up .pick-up-title h3 {
          margin: 8px 0 0 20px; } }
      @media (min-width: 1024px) {
        #pick-up .pick-up-title h3 {
          font-size: 1.5em;
          margin: 3px 0 0 20px; } }
  #pick-up .card04 {
    overflow: hidden;
    padding-bottom: 30px;
    position: relative;
    margin-top: -10px; }
    #pick-up .card04 .swiper {
      padding-left: 2%; }
    #pick-up .card04 .swiper-slide {
      width: 280px;
      padding: 0; }
      @media (min-width: 768px) {
        #pick-up .card04 .swiper-slide {
          width: 320px; } }
      @media (min-width: 1250px) {
        #pick-up .card04 .swiper-slide {
          width: 400px; } }
      #pick-up .card04 .swiper-slide .slide {
        margin-right: 15px;
        transition: .5s;
        padding-top: 10px; }
        @media (min-width: 768px) {
          #pick-up .card04 .swiper-slide .slide {
            margin-right: 20px; } }
        @media (min-width: 1250px) {
          #pick-up .card04 .swiper-slide .slide {
            margin-right: 30px; } }
        #pick-up .card04 .swiper-slide .slide .slide-media {
          position: relative; }
          #pick-up .card04 .swiper-slide .slide .slide-media .imgWrap {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            display: block;
            z-index: 1; }
            #pick-up .card04 .swiper-slide .slide .slide-media .imgWrap img {
              width: 100%;
              height: auto;
              display: block;
              transition-duration: 0.8s;
              transform: scale(1); }
              #pick-up .card04 .swiper-slide .slide .slide-media .imgWrap img:hover {
                transform: scale(1.04); }
          #pick-up .card04 .swiper-slide .slide .slide-media .ChipBtn {
            position: absolute;
            bottom: -20px;
            right: 5px;
            z-index: 10; }
            #pick-up .card04 .swiper-slide .slide .slide-media .ChipBtn img {
              width: 30px;
              height: auto;
              border-radius: 0px; }
          #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel {
            background: linear-gradient(to right, #FF14A4, #F98924);
            padding: 5px 10px;
            position: absolute;
            bottom: 15px;
            right: 2%;
            border-radius: 10px;
            margin-left: 40px;
            opacity: 0;
            z-index: -10; }
            @media (min-width: 1024px) {
              #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel {
                padding: 10px; } }
            #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel p {
              font-size: 0.9em;
              font-weight: bold;
              margin: 0; }
              @media (min-width: 1024px) {
                #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel p {
                  font-size: 1.0em; } }
            #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel .OpenChipBtn {
              position: absolute;
              top: -14px;
              left: -14px; }
              #pick-up .card04 .swiper-slide .slide .slide-media .OpenChipPanel .OpenChipBtn img {
                width: 28px;
                height: auto; }
          #pick-up .card04 .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); } }
        #pick-up .card04 .swiper-slide .slide .slide-content h3 {
          font-size: 0.7em;
          font-weight: normal;
          color: #999999;
          margin: 10px 0 0 0; }
          @media (min-width: 1024px) {
            #pick-up .card04 .swiper-slide .slide .slide-content h3 {
              font-size: 0.8em; } }
        #pick-up .card04 .swiper-slide .slide .slide-content h4 {
          font-size: 1.1em;
          line-height: 1.6em;
          margin: 5px 0 0 0; }
          @media (min-width: 1024px) {
            #pick-up .card04 .swiper-slide .slide .slide-content h4 {
              font-size: 1.125em;
              margin: 10px 0 0 0; } }
          #pick-up .card04 .swiper-slide .slide .slide-content h4 a {
            transition: .5s; }
            #pick-up .card04 .swiper-slide .slide .slide-content h4 a:hover {
              color: #00A4E3; }
        #pick-up .card04 .swiper-slide .slide .slide-content ul {
          margin: 2px 0 0 0; }
          @media (min-width: 1024px) {
            #pick-up .card04 .swiper-slide .slide .slide-content ul {
              margin: 5px 0 0 0; } }
          #pick-up .card04 .swiper-slide .slide .slide-content ul li {
            margin: 0;
            display: inline-block; }
            #pick-up .card04 .swiper-slide .slide .slide-content ul li a {
              font-size: 0.70em;
              color: #E6E6E6;
              transition: .5s; }
              @media (min-width: 1024px) {
                #pick-up .card04 .swiper-slide .slide .slide-content ul li a {
                  font-size: 0.75em; } }
              #pick-up .card04 .swiper-slide .slide .slide-content ul li a:hover {
                color: #00A4E3; }
        #pick-up .card04 .swiper-slide .slide .slide-content ol {
          display: flex;
          margin: 2px 0 0 0; }
          @media (min-width: 1024px) {
            #pick-up .card04 .swiper-slide .slide .slide-content ol {
              margin: 5px 0 0 0; } }
          #pick-up .card04 .swiper-slide .slide .slide-content ol li {
            font-size: 0.9em;
            font-family: 'Montserrat', sans-serif;
            margin-right: 5px; }

/*
---------------------------------------------------------------------------------------------------------------------
気になったらまずは無料相談！
---------------------------------------------------------------------------------------------------------------------
*/
#consultation {
  background: linear-gradient(to right, #B70063, #2C24F9);
  height: 400px;
  position: relative; }
  @media (min-width: 768px) {
    #consultation {
      height: 300px; } }
  @media (min-width: 1024px) {
    #consultation {
      height: 400px; } }
  #consultation .consultation-in {
    position: relative;
    max-width: 1100px;
    margin: auto;
    height: 400px;
    z-index: 10; }
    @media (min-width: 768px) {
      #consultation .consultation-in {
        height: 300px; } }
    @media (min-width: 1024px) {
      #consultation .consultation-in {
        height: 400px; } }
    #consultation .consultation-in .consultation-text {
      display: flex;
      justify-content: center;
      padding-top: 20px; }
      @media (min-width: 768px) {
        #consultation .consultation-in .consultation-text {
          align-items: center;
          justify-content: flex-start;
          height: 300px;
          padding: 0 0 0 5%; } }
      @media (min-width: 1024px) {
        #consultation .consultation-in .consultation-text {
          height: 400px; } }
      #consultation .consultation-in .consultation-text .consultation-text-in h1 {
        font-size: 2.0em;
        font-weight: bold;
        line-height: 1.4em; }
        @media (min-width: 1024px) {
          #consultation .consultation-in .consultation-text .consultation-text-in h1 {
            font-size: 2.5em; } }
      #consultation .consultation-in .consultation-text .consultation-text-in h3 {
        font-size: 0.9em;
        font-weight: lighter;
        margin-top: 10px; }
      #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn {
        margin-top: 15px; }
        @media (min-width: 1024px) {
          #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn {
            margin-top: 30px; } }
        #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a {
          color: #fff;
          display: inline-block;
          text-align: center;
          font-size: 1.0em;
          font-weight: bold;
          border-radius: 50px;
          transition: .5s;
          background: linear-gradient(90deg, #F98924, #FF14A4);
          width: 250px;
          height: 66px;
          line-height: 66px;
          position: relative; }
          @media (min-width: 1024px) {
            #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a {
              font-size: 1.2em;
              width: 300px;
              height: 76px;
              line-height: 76px; } }
          #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a::after {
            position: absolute;
            top: 50%;
            content: '';
            margin: -2.5px 0 0 45px;
            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; }
            @media (min-width: 1024px) {
              #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a::after {
                margin: -2.5px 0 0 55px; } }
          #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a:hover::after {
            margin: -2.5px 0 0 50px; }
            @media (min-width: 1024px) {
              #consultation .consultation-in .consultation-text .consultation-text-in .TalkBtn a:hover::after {
                margin: -2.5px 0 0 60px; } }
    #consultation .consultation-in .editor-chief {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      text-align: center; }
      @media (min-width: 1024px) {
        #consultation .consultation-in .editor-chief {
          left: 50%;
          right: inherit; } }
      #consultation .consultation-in .editor-chief img {
        width: 170px; }
        @media (min-width: 768px) {
          #consultation .consultation-in .editor-chief img {
            width: 270px; } }
        @media (min-width: 1024px) {
          #consultation .consultation-in .editor-chief img {
            width: 480px; } }
    #consultation .consultation-in .chief-name {
      position: absolute;
      bottom: 20px;
      right: 5%; }
      #consultation .consultation-in .chief-name a {
        display: flex; }
        #consultation .consultation-in .chief-name a p {
          font-size: 0.9em;
          font-weight: bold;
          color: #9EF1FF;
          margin: 0;
          position: relative;
          display: inline-block; }
          #consultation .consultation-in .chief-name a p::after {
            position: absolute;
            bottom: -0px;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #9EF1FF;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .3s; }
          #consultation .consultation-in .chief-name a p:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }
        #consultation .consultation-in .chief-name a img {
          width: 16px;
          margin-left: 5px; }

.reclive-loop {
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 400px;
  margin-top: -400px; }
  @media (min-width: 768px) {
    .reclive-loop {
      height: 300px;
      margin-top: -300px; } }
  @media (min-width: 1024px) {
    .reclive-loop {
      height: 400px;
      margin-top: -400px; } }
  .reclive-loop .loop-in {
    display: flex;
    align-items: center;
    height: 400px;
    animation: loop-slide 400s infinite linear 1s both;
    position: absolute;
    top: 0; }
    @media (min-width: 768px) {
      .reclive-loop .loop-in {
        height: 300px; } }
    @media (min-width: 1024px) {
      .reclive-loop .loop-in {
        height: 400px; } }
    .reclive-loop .loop-in img {
      width: 3200px;
      height: auto; }
@keyframes loop-slide {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
/*
---------------------------------------------------------------------------------------------------------------------
よくある質問
---------------------------------------------------------------------------------------------------------------------
*/
#Question {
  max-width: 1040px;
  margin: auto;
  width: 90%;
  padding-top: 100px; }
  #Question .question-title {
    display: flex; }
    @media (min-width: 768px) {
      #Question .question-title {
        margin-left: 2.5em; } }
    #Question .question-title h1 {
      font-size: 1.8em;
      font-weight: bold;
      line-height: 1.2em;
      margin: 30px 10px 0 0; }
      @media (min-width: 768px) {
        #Question .question-title h1 {
          font-size: 3.0em;
          margin: 50px 15px 0 0; } }
    #Question .question-title img {
      width: 140px; }
      @media (min-width: 768px) {
        #Question .question-title img {
          width: 220px; } }
  #Question .accordion-area {
    list-style: none;
    padding: 40px 0 65px;
    /*アコーディオンタイトル*/ }
    #Question .accordion-area .title {
      position: relative;
      cursor: pointer;
      padding: 15px 0;
      transition: all .5s ease; }
      @media (min-width: 768px) {
        #Question .accordion-area .title {
          padding: 30px 0; } }
      #Question .accordion-area .title .PlusBtn {
        width: 40px;
        height: 40px;
        border-radius: 50px;
        position: absolute;
        top: calc( 48% - 19px );
        right: 0.175em;
        z-index: 0; }
      #Question .accordion-area .title::after, #Question .accordion-area .title::before {
        position: absolute;
        content: '';
        width: 15px;
        height: 2px;
        right: 15px;
        background-color: #fff;
        z-index: 10; }
      #Question .accordion-area .title::before {
        top: 48%;
        transform: rotate(0deg); }
      #Question .accordion-area .title::after {
        top: 48%;
        transform: rotate(90deg); }
      #Question .accordion-area .title.close1::before {
        transform: rotate(45deg); }
      #Question .accordion-area .title.close1::after {
        transform: rotate(-45deg); }
    #Question .accordion-area li.area {
      margin: 0;
      border-top: 1px dotted #707070;
      /*アコーディオンで現れるエリア*/ }
      #Question .accordion-area li.area:last-child {
        border-bottom: 1px dotted #707070; }
      #Question .accordion-area li.area .question {
        display: flex; }
        #Question .accordion-area li.area .question h2 {
          font-size: 1.8em;
          line-height: 1.1em;
          margin-top: -5px;
          color: #9EF1FF; }
          @media (min-width: 768px) {
            #Question .accordion-area li.area .question h2 {
              font-size: 2.0em; } }
        #Question .accordion-area li.area .question h3 {
          font-size: 1.125em;
          margin: 0 10% 0 15px; }
          @media (min-width: 768px) {
            #Question .accordion-area li.area .question h3 {
              font-size: 1.5em;
              margin: 0 0 0 25px; } }
      #Question .accordion-area li.area .MenuBox {
        display: none;
        padding: 0px 0 15px 0; }
        @media (min-width: 768px) {
          #Question .accordion-area li.area .MenuBox {
            padding: 0px 0 40px 0;
            margin-left: 50px; } }
        #Question .accordion-area li.area .MenuBox p {
          font-size: 1.0em;
          line-height: 1.6em; }
          @media (min-width: 768px) {
            #Question .accordion-area li.area .MenuBox p {
              font-size: 1.25em; } }
          #Question .accordion-area li.area .MenuBox p a {
            color: #9EF1FF;
            position: relative;
            display: inline-block; }
            #Question .accordion-area li.area .MenuBox p a::after {
              position: absolute;
              bottom: -0px;
              left: 0;
              content: '';
              width: 100%;
              height: 1px;
              background: #9EF1FF;
              transform: scale(0, 1);
              transform-origin: right top;
              transition: transform .3s; }
            #Question .accordion-area li.area .MenuBox p a:hover::after {
              transform-origin: left top;
              transform: scale(1, 1); }

/*
---------------------------------------------------------------------------------------------------------------------
リクライブメンバー
---------------------------------------------------------------------------------------------------------------------
*/
#Member {
  position: relative;
  max-width: 1350px;
  width: 100%;
  margin: 0 auto 40px; }
  @media (min-width: 768px) {
    #Member {
      width: 95%;
      margin: 0 auto 100px; } }
  #Member .back-ph img {
    border-radius: 15px; }
    @media (min-width: 1024px) {
      #Member .back-ph img {
        border-radius: 30px; } }
  #Member .fukidashi img {
    position: absolute; }
    #Member .fukidashi img:nth-child(1) {
      width: 90px;
      top: -2%;
      left: 0%; }
      @media (min-width: 768px) {
        #Member .fukidashi img:nth-child(1) {
          width: 140px;
          top: -5%; } }
      @media (min-width: 1024px) {
        #Member .fukidashi img:nth-child(1) {
          width: 170px;
          top: 5%; } }
      @media (min-width: 1250px) {
        #Member .fukidashi img:nth-child(1) {
          width: 215px; } }
    #Member .fukidashi img:nth-child(3) {
      width: 170px;
      top: 8%;
      left: 25%; }
      @media (min-width: 768px) {
        #Member .fukidashi img:nth-child(3) {
          width: 320px;
          top: 2%; } }
      @media (min-width: 1024px) {
        #Member .fukidashi img:nth-child(3) {
          width: 340px;
          top: 5%;
          left: 30%; } }
      @media (min-width: 1250px) {
        #Member .fukidashi img:nth-child(3) {
          width: 420px;
          left: 35%; } }
    #Member .fukidashi img:nth-child(4) {
      width: 100px;
      top: 38%;
      left: 35%; }
      @media (min-width: 768px) {
        #Member .fukidashi img:nth-child(4) {
          width: 150px;
          top: 43%; } }
      @media (min-width: 1024px) {
        #Member .fukidashi img:nth-child(4) {
          width: 170px;
          top: 40%;
          left: 38%; } }
      @media (min-width: 1250px) {
        #Member .fukidashi img:nth-child(4) {
          width: 200px;
          top: 44%;
          left: 38%; } }
    #Member .fukidashi img:nth-child(5) {
      width: 80px;
      top: 5%;
      right: 2%; }
      @media (min-width: 768px) {
        #Member .fukidashi img:nth-child(5) {
          width: 150px;
          top: -5%;
          right: 8%; } }
      @media (min-width: 1024px) {
        #Member .fukidashi img:nth-child(5) {
          top: 0%;
          right: 16%; } }
      @media (min-width: 1250px) {
        #Member .fukidashi img:nth-child(5) {
          width: 170px;
          top: 5%;
          right: 18%; } }
    #Member .fukidashi img:nth-child(6) {
      width: 70px;
      top: 45%;
      right: 0%; }
      @media (min-width: 768px) {
        #Member .fukidashi img:nth-child(6) {
          width: 110px;
          top: 22%;
          right: 1%; } }
      @media (min-width: 1024px) {
        #Member .fukidashi img:nth-child(6) {
          width: 130px;
          top: 20%;
          right: 3%; } }
      @media (min-width: 1250px) {
        #Member .fukidashi img:nth-child(6) {
          width: 130px;
          top: 23%;
          right: 8%; } }
  #Member .fukidashi .menber2 img {
    width: 75px;
    top: 45%;
    left: 10%; }
    @media (min-width: 768px) {
      #Member .fukidashi .menber2 img {
        width: 130px;
        top: 50%;
        left: 18%; } }
    @media (min-width: 1024px) {
      #Member .fukidashi .menber2 img {
        top: 45%;
        left: 20%; } }
    @media (min-width: 1250px) {
      #Member .fukidashi .menber2 img {
        width: 150px;
        top: 14%;
        left: 22%; } }
  @media (min-width: 1250px) {
    #Member .fukidashi .menber2 .sph {
      display: none; } }
  #Member .fukidashi .menber2 .pch {
    display: none; }
    @media (min-width: 1250px) {
      #Member .fukidashi .menber2 .pch {
        display: block; } }
  #Member .text {
    margin-top: -60px; }
    @media (min-width: 1024px) {
      #Member .text {
        margin-top: -120px; } }
    #Member .text h2 {
      font-size: 1.3em;
      line-height: 1.6em;
      text-align: center; }
      @media (min-width: 1024px) {
        #Member .text h2 {
          font-size: 2.5em; } }

/*
---------------------------------------------------------------------------------------------------------------------
リンクボタン・アニメーション
---------------------------------------------------------------------------------------------------------------------
*/
.BtnLinkBox a {
  color: #fff;
  display: inline-block;
  width: 220px;
  height: 54px;
  line-height: 53px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 50px;
  transition: .5s;
  transform: scale(1); }
  .BtnLinkBox a.Gradation {
    position: relative;
    z-index: 0; }
    .BtnLinkBox a.Gradation::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      transition: 0.5s;
      background: -webkit-linear-gradient(45deg, #F98924, #FF14A4);
      border-radius: 50px; }
    .BtnLinkBox a.Gradation::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -2;
      top: 0;
      left: 0;
      transition: 0.5s;
      background: -webkit-linear-gradient(120deg, #F98924, #FF14A4);
      border-radius: 50px; }
    .BtnLinkBox a.Gradation:hover::before {
      opacity: 0; }
  .BtnLinkBox a.Black {
    background-color: #111; }

.more-text {
  display: flex;
  float: right;
  margin-right: 4%; }
  @media (min-width: 1024px) {
    .more-text {
      margin-right: 2%; } }
  .more-text a {
    font-size: 0.85em;
    font-weight: bold;
    color: #9EF1FF;
    margin: 0;
    position: relative;
    display: inline-block; }
    @media (min-width: 1024px) {
      .more-text a {
        font-size: 1.125em; } }
    .more-text a::after {
      position: absolute;
      bottom: -0px;
      left: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: #9EF1FF;
      transform: scale(0, 1);
      transform-origin: right top;
      transition: transform .3s; }
    .more-text a:hover::after {
      transform-origin: left top;
      transform: scale(1, 1); }
  .more-text img {
    width: 15px;
    margin: 2px 0 0 5px; }
    @media (min-width: 1024px) {
      .more-text img {
        margin: 4px 0 0 10px; } }

.Border {
  position: relative;
  z-index: 1; }
  .Border:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: #F2BA00;
    z-index: -1;
    transition: all 0.8s; }
    @media (min-width: 1024px) {
      .Border:after {
        bottom: -4px;
        height: 5px; } }
  .Border.isActive:after {
    width: 100%; }

a {
  position: relative; }
  a .BtnLinkArrow {
    top: 0;
    bottom: 0;
    right: 10px;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    transition: .5s;
    border: 1px solid #fff;
    width: 13px;
    height: 13px;
    position: absolute;
    margin: auto; }
    a .BtnLinkArrow p {
      display: block;
      position: absolute;
      top: 45%;
      content: '';
      margin: -2px 0 0 4.5px;
      width: 3px;
      height: 3px;
      border: 0px;
      border-top: solid 1px #fff;
      border-right: solid 1px #fff;
      -ms-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      transition: .5s; }
  a:hover .BtnLinkArrow > p {
    margin: 0px 0 0 4.5px; }

.col-llg-2-4, .col-llg-2 {
  position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px; }

@media (min-width: 1600px) {
  .col-llg-2-4, .col-llg-2 {
    float: left; }

  .col-llg-2-4 {
    width: 20%;
    -webkit-flex: 0 0 20%; }

  .col-llg-2 {
    width: 16.66666667%; } }