@charset "utf-8";
/* ======================================================================

    2026.03  animation  /   動画で学ぶ 気になるシゴトに就くヒント
                            求められるスキルと今できる準備ピンポイント開設
                        
    https://mcstudy.mynavi.jp/conts/job/course_list/index.html

====================================================================== */


/*============================================================
   Layout
============================================================*/

/* hero will ------------------------------------------------ */
@keyframes wilFloat {
   0%    { transform: translateY(-50%) rotate(0deg); }
   6.6%  { transform: translateY(calc(-50% + 8px)) rotate(0deg); }
   13.3% { transform: translateY(-50%) rotate(2deg); }
   20%   { transform: translateY(calc(-50% + 8px)) rotate(0deg); }
   26.6% { transform: translateY(-50%) rotate(0deg); }
   100%  { transform: translateY(-50%) rotate(0deg); }
}

.hero__frame::before{
   animation: wilFloat 4.5s ease-in-out 3s infinite;
}

@media (min-width: 900px){
   @keyframes wilFloatPC {
      0%    { transform: translateY(0) rotate(0deg); }
      6.6%  { transform: translateY(14px) rotate(0deg); }
      13.3% { transform: translateY(0) rotate(3deg); }
      20%   { transform: translateY(14px) rotate(0deg); }
      26.6% { transform: translateY(0) rotate(0deg); }
      100%  { transform: translateY(0) rotate(0deg); }
   }
   .hero__frame::before{
      animation: wilFloatPC 4.5s ease-in-out 3s infinite;
   }
}



/* merit illust ------------------------------------------------ */

@keyframes wilFloat02 {
   0%    { transform: translateY(0) rotate(10deg); }
   6.6%  { transform: translateY(8px) rotate(10deg); }
   13.3% { transform: translateY(0) rotate(12deg); }
   20%   { transform: translateY(8px) rotate(10deg); }
   26.6% { transform: translateY(0) rotate(10deg); }
   100%  { transform: translateY(0) rotate(10deg); }
}

/* willくん（タイトル横） */
.merit__wrap h2 .tit_main::before {
   animation: wilFloat02 6s ease-in-out 1.5s infinite;
}

/* 左のイラスト（rotate -5deg基準） */
@keyframes wilFloat_left {
   0%    { transform: rotate(-5deg) translateY(0); }
   6.6%  { transform: rotate(-5deg) translateY(8px); }
   13.3% { transform: rotate(-3deg) translateY(0); }
   20%   { transform: rotate(-5deg) translateY(8px); }
   26.6% { transform: rotate(-5deg) translateY(0); }
   100%  { transform: rotate(-5deg) translateY(0); }
}

/* 右のイラスト（rotate 5deg基準） */
@keyframes wilFloat_right {
   0%    { transform: rotate(5deg) translateY(0); }
   6.6%  { transform: rotate(5deg) translateY(8px); }
   13.3% { transform: rotate(7deg) translateY(0); }
   20%   { transform: rotate(5deg) translateY(8px); }
   26.6% { transform: rotate(5deg) translateY(0); }
   100%  { transform: rotate(5deg) translateY(0); }
}

/* 600px未満 */
@media (max-width: 599px) {
   .merit__point-box:nth-child(2)::after {
      animation: wilFloat_left 6s ease-in-out 3s infinite;
   }
   .merit__point-box:nth-child(3)::after {
      animation: wilFloat_right 6s ease-in-out 4.5s infinite;
   }
}

/* 768px未満 */
@media (min-width: 600px) {
   .merit__point-box:nth-child(2)::after {
      animation: wilFloat_right 6s ease-in-out 3s infinite;
   }
   .merit__point-box:nth-child(3)::after {
      animation: wilFloat_right 6s ease-in-out 4.5s infinite;
   }
}

/* 768px以上 */
@media (min-width: 768px) {
   .merit__point-block::after {
      animation: wilFloat_left 6s ease-in-out 3s infinite;
   }
   .merit__point-block::before {
      animation: wilFloat_right 6s ease-in-out 4.5s infinite;
   }
}

@keyframes wilFloat_left_pc {
   0%    { transform: translateY(-50%) rotate(-5deg) translateY(0); }
   6.6%  { transform: translateY(calc(-50% + 8px)) rotate(-5deg); }
   13.3% { transform: translateY(-50%) rotate(-3deg); }
   20%   { transform: translateY(calc(-50% + 8px)) rotate(-5deg); }
   26.6% { transform: translateY(-50%) rotate(-5deg); }
   100%  { transform: translateY(-50%) rotate(-5deg); }
}

@keyframes wilFloat_right_pc {
   0%    { transform: translateY(-50%) rotate(5deg); }
   6.6%  { transform: translateY(calc(-50% + 8px)) rotate(5deg); }
   13.3% { transform: translateY(-50%) rotate(7deg); }
   20%   { transform: translateY(calc(-50% + 8px)) rotate(5deg); }
   26.6% { transform: translateY(-50%) rotate(5deg); }
   100%  { transform: translateY(-50%) rotate(5deg); }
}

@media (min-width: 1240px) {
   .merit__point-block::after {
      animation: wilFloat_left_pc 6s ease-in-out 3s infinite;
   }
   .merit__point-block::before {
      animation: wilFloat_right_pc 6s ease-in-out 4.5s infinite;
   }
}

/* peek illust ------------------------------------------------ */

/* Willくん（傾き逆・+5deg基準） */
@keyframes wilFloat03 {
   0%    { transform: translateY(-50%) translateX(-50%) rotate(-5deg) translateY(0); }
   6.6%  { transform: translateY(calc(-50% + 8px)) translateX(-50%) rotate(-5deg); }
   13.3% { transform: translateY(-50%) translateX(-50%) rotate(3deg); }
   20%   { transform: translateY(calc(-50% + 8px)) translateX(-50%) rotate(-5deg); }
   26.6% { transform: translateY(-50%) translateX(-50%) rotate(-5deg); }
   100%  { transform: translateY(-50%) translateX(-50%) rotate(-5deg); }
}

/* SP用Willくん（h2::after） */
@keyframes wilFloat03_sp {
   0%    { transform: translateY(-50%) rotate(-5deg) translateY(0); }
   6.6%  { transform: translateY(calc(-50% + 8px)) rotate(-5deg); }
   13.3% { transform: translateY(-50%) rotate(3deg); }
   20%   { transform: translateY(calc(-50% + 8px)) rotate(-5deg); }
   26.6% { transform: translateY(-50%) rotate(-5deg); }
   100%  { transform: translateY(-50%) rotate(-5deg); }
}

/* フェローくんたち（peek） rotateなし */
@keyframes peekFellowFloat {
   0%    { transform: translateY(-50%) translateX(-50%); }
   6.6%  { transform: translateY(calc(-50% + 8px)) translateX(-50%); }
   13.3% { transform: translateY(-50%) translateX(-50%); }
   20%   { transform: translateY(calc(-50% + 8px)) translateX(-50%); }
   26.6% { transform: translateY(-50%) translateX(-50%); }
   100%  { transform: translateY(-50%) translateX(-50%); }
}


@media (max-width: 599px){
   .peek__head h2::after{
      animation: wilFloat03_sp 6s ease-in-out 2.5s infinite;
   }
}

@media (min-width: 600px){
   /* Willくん */
   .peek__head::before{
      animation: wilFloat03 6s ease-in-out 2.5s infinite;
   }
   /* フェローくんたち */
   .peek__head::after{
      animation: peekFellowFloat 6s ease-in-out 2s infinite;
   }
}


/* card illust ------------------------------------------------ */
/* illust_bg_01 rotate(2deg)基準 */
@keyframes fellowFloat_01 {
   0%    { transform: rotate(2deg) translateY(0); }
   6.6%  { transform: rotate(2deg) translateY(8px); }
   13.3% { transform: rotate(4deg) translateY(0); }
   20%   { transform: rotate(2deg) translateY(8px); }
   26.6% { transform: rotate(2deg) translateY(0); }
   100%  { transform: rotate(2deg) translateY(0); }
}

/* illust_bg_02 rotate(0deg)基準 */
@keyframes fellowFloat_02 {
   0%    { transform: rotate(0deg) translateY(0); }
   6.6%  { transform: rotate(0deg) translateY(8px); }
   13.3% { transform: rotate(2deg) translateY(0); }
   20%   { transform: rotate(0deg) translateY(8px); }
   26.6% { transform: rotate(0deg) translateY(0); }
   100%  { transform: rotate(0deg) translateY(0); }
}

/* illust_bg_03 rotate(5deg)基準 */
@keyframes fellowFloat_03 {
   0%    { transform: rotate(5deg) translateY(0); }
   6.6%  { transform: rotate(5deg) translateY(8px); }
   13.3% { transform: rotate(7deg) translateY(0); }
   20%   { transform: rotate(5deg) translateY(8px); }
   26.6% { transform: rotate(5deg) translateY(0); }
   100%  { transform: rotate(5deg) translateY(0); }
}

/* illust_bg_04 rotate(2deg)基準 */
@keyframes fellowFloat_04 {
   0%    { transform: rotate(2deg) translateY(0); }
   6.6%  { transform: rotate(2deg) translateY(8px); }
   13.3% { transform: rotate(4deg) translateY(0); }
   20%   { transform: rotate(2deg) translateY(8px); }
   26.6% { transform: rotate(2deg) translateY(0); }
   100%  { transform: rotate(2deg) translateY(0); }
}

/* 599px以下 */
@media (max-width: 599px){
   .peek__list .couse__card:nth-child(4n+1)::after{
      animation: fellowFloat_02 6s ease-in-out 0s infinite;
   }
   .peek__list .couse__card:nth-child(4n+2)::after{
      animation: fellowFloat_04 6s ease-in-out 1.5s infinite;
   }
   .peek__list .couse__card:nth-child(4n+3)::after{
      animation: fellowFloat_01 6s ease-in-out 3s infinite;
   }
   .peek__list .couse__card:nth-child(4n)::after{
      animation: fellowFloat_03 6s ease-in-out 4.5s infinite;
   }
}

/* 600px〜999px */
@media (min-width: 600px) and (max-width: 999px){
   .peek__list .couse__card:nth-child(8n+1)::after{
      animation: fellowFloat_02 6s ease-in-out 0s infinite;
   }
   .peek__list .couse__card:nth-child(8n+4)::after{
      animation: fellowFloat_04 6s ease-in-out 1.5s infinite;
   }
   .peek__list .couse__card:nth-child(8n+5)::after{
      animation: fellowFloat_01 6s ease-in-out 3s infinite;
   }
   .peek__list .couse__card:nth-child(8n)::after{
      animation: fellowFloat_03 6s ease-in-out 4.5s infinite;
   }
}

/* 1000px以上 */
@media (min-width: 1000px){
   .peek__list .couse__card:nth-child(12n+1)::after{
      animation: fellowFloat_02 6s ease-in-out 0s infinite;
   }
   .peek__list .couse__card:nth-child(12n+6)::after{
      animation: fellowFloat_04 6s ease-in-out 1.5s infinite;
   }
   .peek__list .couse__card:nth-child(12n+7)::after{
      animation: fellowFloat_01 6s ease-in-out 3s infinite;
   }
   .peek__list .couse__card:nth-child(12n)::after{
      animation: fellowFloat_03 6s ease-in-out 4.5s infinite;
   }
}