@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
/* ======================================================================

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

    ▼ DOM Structure
      <main>
        ├─ hint__content
            ├─ side-nav
            ├─ #hero
            ├─ #merit
            ├─ #peek
            └─ #find

   ▼ breakpoint
      389px 小さめスマホ
      600px


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


/*============================================================
   common
============================================================*/

:root {
    /* ---------- breakpoint ---------- */
    --bp-sp: 599px;
    --bp-pc: 600px;

    /* ---------- colors ---------- */
    --color-cv: #1FA389;
    --color-course: #7CCF7E;
    --color-match: #9CDD3F;

}
main{
   margin-top: 70px;
}

.hint__content{
   font-family: "Noto Sans JP"; 
   position: relative
}
.hint__content h2,
.hint__content h3,
.hint__content span{
   font-family: "Noto Sans JP";
}
.hint__content p{
   font-family: "Noto Sans JP";
   font-size: 15px;
   font-weight: 400;
   line-height: 180%;
   letter-spacing: 0;
}
.hint__content .inBk{
   display: inline-block;
}

.hint__content a{
   cursor: pointer;
}
.hint__content a:hover{
   opacity:.6;
}
.hint__content .anchorlink__section{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   margin-top: -70px;
   padding-top: 70px;
}
.anchorlink__section:nth-child(1) { z-index: 4; }
.anchorlink__section:nth-child(2) { z-index: 3; }
.anchorlink__section:nth-child(3) { z-index: 2; }
.anchorlink__section:nth-child(4) { z-index: 1; }


/*============================================================
   Layout
============================================================*/
/* ------------------------------------------------------------
   hint__content // sp side-nav 用
------------------------------------------------------------ */
@media (max-width: 899px){
   .hint__content{
      position:relative;
      width: 100%;
      padding-bottom: 80px;
      background: #eeeee2;
   }
   .hint__content::before,
   .hint__content::after{
      content: "";
      position: absolute;
      bottom: 0;
      width: 110px;
      height: 110px;
      background: url("../images/match_bg_01.svg") 0 0 / 100% no-repeat;
      z-index:5;
   }
   .hint__content::before{
      left: 0;
      transform: scaleY(-1);
   }
   .hint__content::after{
      right: 0;
      transform: scale(-1);
   }

}
@media (min-width: 600px) and (max-width: 768px){
   .hint__content::before,
   .hint__content::after{
      width: 200px;
      height: 200px;
   }
}


/* ------------------------------------------------------------
   side-nav
------------------------------------------------------------ */

/* side-nav sp ------------------------------------------------ */
@media (max-width: 899px){
   .side-nav{
      display: flex;
      position: relative;
      z-index: 10;
      justify-content: center;
      align-items: center;
      width: 276px;
      height: 42px;
      padding: 2px;
      border-radius: 42px;
      background: linear-gradient(90deg, #F0C071 0%, #6DC99D 50%, #40A5B8 100%);
   }
   .side-nav__inner{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 38px;
      gap: 5px;
      border-radius: 38px;
      background: #fff;
   }
   .side-nav a{
      display: flex;
      position: relative;
      align-items: center;
      height: 32px;
      padding: 0 10px 0 5px;
      gap: 5px;
      text-decoration: none;
   }
   .side-nav a::before{
      content: "";
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      aspect-ratio: 1/1;
      z-index: 1;
   }
   .side-nav a:nth-child(1)::before{
      background: url("../images/s_nav_icon_sp_01.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a:nth-child(2)::before{
      background: url("../images/s_nav_icon_sp_02.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a:nth-child(3)::before{
      background: url("../images/s_nav_icon_sp_03.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a .nav_txt{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      gap: 1px;
      padding-bottom: 4px;
      font-size: 13px;
      font-weight: 700;
      line-height: 100%;
      z-index: 1;
   }
   .side-nav a .nav_txt .nav_txt-s{
      font-size: 9px;
      letter-spacing: -0.9px;
   }

   /* act */
   .side-nav a.act::after{
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;
      height: 32px;
      border-radius: 32px;
      background: #333;
   }
   .side-nav a.act:nth-child(1)::after{
      background: linear-gradient(90deg, #ECC072 0%, #B1DE98 100%);
   }
   .side-nav a.act:nth-child(2)::after{
      background: linear-gradient(90deg, #B1DD98 0%, #63C1A3 100%);
   }
   .side-nav a.act:nth-child(3)::after{
      background: linear-gradient(90deg, #64C1A3 0%, #41A5B8 100%);
   }
   .side-nav a.act:nth-child(1)::before{
      background: url("../images/s_nav_icon_01_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act:nth-child(2)::before{
      background: url("../images/s_nav_icon_02_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act:nth-child(3)::before{
      background: url("../images/s_nav_icon_03_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act .nav_txt{
      color: #fff;
   }
}
@media (min-width: 690px) and (max-width: 899px){
   .side-nav{
      width: 330px;
      height: 58px;
      border-radius: 58px;
   }
   .side-nav__inner{
      height: 54px;
      border-radius: 54px;
   }
   .side-nav a{
      height: 48px;
   }
   .side-nav a::before{
      width: 42px;
      height: 42px;
   }
   /* act */
   .side-nav a.act::after{
      height: 48px;
      border-radius: 48px;
   }
}

/* side-nav pc ------------------------------------------------ */

@media (min-width: 900px){
   .side-nav{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 82px;
      padding: 2px;
      border-radius: 42px;
      background: linear-gradient(180deg, #F0C071 0%, #6DC99D 50%, #40A5B8 100%);
      z-index: 10;
   }
   .side-nav__inner{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 78px;
      padding: 10px 0;
      gap: 5px;
      border-radius: 78px;
      background: #fff;
   }
   .side-nav a{
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      width: 62px;
      padding: 10px 0 16px 0;
      gap: 5px;
      text-decoration: none;
   }
   .side-nav a::before{
      content: "";
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 48px;
      aspect-ratio: 1/1;
      z-index: 1;
   }
   .side-nav a:nth-child(1)::before{
      background: url("../images/s_nav_icon_pc_01.svg") center 50% / auto 90% no-repeat;
   }
   .side-nav a:nth-child(2)::before{
      background: url("../images/s_nav_icon_pc_02.svg") center 50% / auto 90% no-repeat;
   }
   .side-nav a:nth-child(3)::before{
      background: url("../images/s_nav_icon_pc_03.svg") center 50% / auto 90% no-repeat;
   }
   .side-nav a .nav_txt{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      gap: 1px;
      padding-bottom: 4px;
      font-size: 13px;
      font-weight: 700;
      line-height: 100%;
      z-index: 1;
   }
   .side-nav a .nav_txt .nav_txt-s{
      font-size: 9px;
      letter-spacing: -0.9px;
   }

   /* act */
   .side-nav a.act::after{
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;
      height: 100%;
      border-radius: 32px;
   }
   .side-nav a.act:nth-child(1)::after{
      background: linear-gradient(180deg, #ECC072 0%, #B1DE98 100%);
   }
   .side-nav a.act:nth-child(2)::after{
      background: linear-gradient(180deg, #B1DD98 0%, #63C1A3 100%);
   }
   .side-nav a.act:nth-child(3)::after{
      background: linear-gradient(180deg, #64C1A3 0%, #41A5B8 100%);
   }
   .side-nav a.act:nth-child(1)::before{
      background: url("../images/s_nav_icon_01_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act:nth-child(2)::before{
      background: url("../images/s_nav_icon_02_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act:nth-child(3)::before{
      background: url("../images/s_nav_icon_03_on.svg") center 50% / auto 100% no-repeat;
   }
   .side-nav a.act .nav_txt{
      color: #fff;
   }
}


/* side-nav 設定 ------------------------------------------------ */

/* hint_side-nav 固定ナビ共通 */


/* 899px以下 : 画面下固定 */
@media (max-width: 899px) {
   #hint_side-nav.is-show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
   }
}

/* 900px以上 : 右固定・上下中央 */
@media (min-width: 900px) {
   #hint_side-nav {
      position: fixed;
      z-index: 100;
      transition: opacity 0.4s ease, transform 0.4s ease;
   }
   #hint_side-nav {
      right: 10px;
      top: 50%;
      transform: translateX(calc(100% + 10px)) translateY(-50%); /* 初期は右に隠す */
      opacity: 0;
   }
   #hint_side-nav.is-show {
      transform: translateX(0) translateY(-50%);
      opacity: 1;
   }
}

/* act アニメーション */
.side-nav a::after {
   transition: opacity 0.3s ease;
   opacity: 0;
}
.side-nav a.act::after {
   opacity: 1;
}

/* ------------------------------------------------------------
   hero
------------------------------------------------------------ */
/* hint-hero__wrap ------------------------------------------------ */
.hint-hero__wrap{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: clamp(450px, 120vw, 520px);
   background: url("../images/main_sp_bg.webp") center top / auto 100% no-repeat;
}
.hint-hero__wrap::before{
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 100%;
   height: 100%;
   background: url("../images/main_sp_line.svg") center top / auto 100% no-repeat;
}
@media (min-width: 520px) {
   .hint-hero__wrap {
      background: url("../images/main_sp_bg.webp") center top / 100% 100% no-repeat;
   }
}
@media (min-width: 769px){
   .hint-hero__wrap{
      background: url("../images/main_pc_bg.webp") center top / auto 100% no-repeat;
   }
}
@media (min-width: 900px){
   .hint-hero__wrap{
      height: 600px;
      background: url("../images/main_pc_bg.webp") center top / auto 100% no-repeat;
   }
   .hint-hero__wrap::before {
      background: url("../images/main_pc_line.svg") center top / auto 100% no-repeat;
   }
}
@media (min-width: 1800px) {
   .hint-hero__wrap {
      background: url("../images/main_pc_bg.webp") center top / 100% 100% no-repeat;
   }
}

/* hero__inner ------------------------------------------------ */
.hero__inner{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: clamp(450px, 120vw, 520px);
   overflow: hidden;
}
.hero__inner::before{
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%) ;
   width: 100%;
   height: 520px;
   background: url("../images/main_sp_illust.svg") center top / auto 100% no-repeat;
}
@media (min-width: 431px){
   .hero__inner::before{
      width: 100%;
      height: 100%;
      background: url("../images/main_tab_illust.svg") center top / auto 100% no-repeat;
   }
}
@media (min-width:744px){
   .hero__inner::before{
      width: 100%;
      height: 100%;
      background: url("../images/main_tabp_illust.svg") center top / auto 100% no-repeat;
   }
}
@media (min-width: 900px){
   .hero__inner{
      height: 600px;
      background: url("../images/main_pc_illust.svg") center top / auto 100% no-repeat;
   }
   .hero__inner::before{
      height: 600px;
      background: url("../images/main_pc_illust.svg") center top / auto 100% no-repeat;
   }
}

/* hero__frame ------------------------------------------------ */
.hero__frame{
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 286px;
   height: 100%;
}
.hero__frame::before{
   content: "";
   position: absolute;
   left: -75px;
   width: 160px;
   height: 160px;
   background: url("../images/illust_will_01.svg") center / contain no-repeat;
}
@media (max-width: 899px){
   .hero__frame::before{
      transform: translateY(-50%);
      top: 50%;
      margin-top:140px;
   }
}
.hero__frame h1{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 280px;
   gap: 32px;
}
.hero__frame .hero__txt_sub{
   position: absolute;
   top: -52px;
   left: -20px;
   width: 120px;
}
.hero__frame .side-nav{
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
}

@media (min-width: 431px){
   .hero__frame{
      width: clamp(286px, 47.67vw, 366px);
   }
   .hero__frame .side-nav{
      bottom: 8.65%;
   }
   .hero__frame h1{
      width:320px;
   }
   .hero__frame .hero__txt_sub{
      position: absolute;
      top: -62px;
      left: -30px;
      width: 140px;
   }
   .hero__frame::before{
      left: -95px;
      margin-top:160px;
      width: 180px;
      height: 180px;
   }
}
@media (min-width: 744px){
   .hero__frame h1{
      padding-top:25px;
      width:400px;
      gap: 26px;
   }
   .hero__frame .hero__txt_sub{
      position: absolute;
      top: -48px;
      left: -35px;
      width: 180px;
   }
   .hero__frame::before{
      left: -145px;
      margin-top:160px;
      width: 200px;
      height: 200px;
   }
   .hero__frame .side-nav{
      bottom: 36px;
   }
}
@media (min-width: 900px){
   .hero__frame{
      width: 500px;
   }
   .hero__frame::before{
      bottom: 40px;
      left: -240px;
      width: 300px;
      height: 300px;
   }
   .hero__frame h1{
      width: 490px;
      padding-top: 70px;
      gap: 45px;
   }
   .hero__frame .hero__txt_sub{
      top: -25px;
      left: -70px;
      width: 225px;
   }
   .hero__frame .side-nav{
      display: none;
   }
}
@media (min-width: 1000px){
   .hero__frame::before{
      bottom: 30px;
      left: -260px;
      width: 320px;
      height: 320px;
   }
}


/* ------------------------------------------------------------
   merit
------------------------------------------------------------ */
#merit{
   background: #fff;
}
/* merit__wrap ------------------------------------------------ */
.merit__wrap{
   display: flex;
   flex-direction: column;
   position: relative;
   align-items: center;
   overflow: hidden;
   width: 100%;
   background: linear-gradient(180deg, #FFF 11.68%, rgba(255, 255, 255, 0.00) 26.34%), linear-gradient(153deg, #FFF8D8 38.23%, #E9F5C3 68.47%, #E2F5D0 91.76%);
}
.merit__wrap::before{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   content: "";
   background: url("../images/merit_sp_bg.svg") center top / 100% auto no-repeat;
   transform: translateX(-50%) translateY(-50%);
}
.merit__inner{
   display: flex;
   flex-direction: column;
   position: relative;
   align-items: center;
   gap: 42px;
   width: 80%;
   max-width: 900px;
   padding: 54px 0;
   z-index: 1;
}
@media (min-width: 480px){
   .merit__wrap::before{
      width: 100%;
      background:url("../images/merit_tab_bg.svg") center top / 100% auto no-repeat;
   }
 }
@media (min-width: 600px){
   .merit__inner{
      padding: 74px 0 94px;
   }
 }
@media (min-width: 768px){
   .merit__wrap::before{
      width: calc(1600px * (100vw / 1240px));
      height: 100%;
      background: url("../images/merit_tabp_bg.svg") center bottom / 100% auto no-repeat;
   }
   .merit__inner{
      gap: 32px;
   }
}
@media (min-width: 768px) and (max-width: 899px){
   .merit__inner{
      width: 88%;
   }
}
@media (min-width: 900px){
   .merit__wrap{
      background: linear-gradient(180deg, #FFF 17.86%, rgba(255, 255, 255, 0.00) 36.43%), linear-gradient(153deg, #FFF8D8 30.35%, #FFF8D8 51.78%, #E9F5C3 77.82%, #E2F5D0 91.76%);
   }
   .merit__wrap::before{
      width: calc(1600px * (100vw / 1240px));
      height: 100%;
      background:url("../images/merit_pc_bg.svg") center bottom / 100% auto no-repeat;
   }
 .merit__inner{
      padding: 84px 0;
      gap: 84px;
   }
 }
 @media (min-width: 1240px){
   .merit__wrap::before{
      background:url("../images/merit_pc_bg.svg") center bottom / 100% auto no-repeat;
      width: 1600px;
  }
 }
 @media (min-width: 1600px){
   .merit__wrap::before{
      width: 100%;
  }
 }
   /* merit__wrap h2 ------------------------------------------------ */
   .merit__wrap h2{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap:15px;
      font-size: 24px;
      line-height: 100%;
      font-weight: 700;
      padding-bottom: 20px;
   }
      .merit__wrap h2 .tit_main{
         position: relative;
      }
      .merit__wrap h2 .tit_main_l{
         font-size: 48px;
      }
      .merit__wrap h2 .tit_main_m{
         font-size: 32px;
      }
      .merit__wrap h2 .tit_main::before{
         position: absolute;
         top: -30px;
         right: -100px;
         width: 116px;
         height: 170px;
         content: "";
         background: url("../images/illust_will_03.svg") center / contain no-repeat;
         transform: rotate(10deg);
         z-index: 1;
      }
      .merit__wrap h2 .tit_main::after{
         position: absolute;
         bottom: -15px;
         left: 50%;
         width: 100%;
         height: 5px;
         content: "";
         background: #BDD800;
         border-radius: 5px;
         transform: translateX(-50%);
      }
   @media (min-width: 600px){
      .merit__wrap h2{
         font-size: 40px;
      }
         .merit__wrap h2 .tit_sub{
            font-size: 24px;
         }
         .merit__wrap h2 .tit_main_l{
            font-size: 64px;
         }
         .merit__wrap h2 .tit_main_m{
            font-size: 48px;
         }
         .merit__wrap h2 .tit_main::before{
            top: -52px;
            right: -150px;
            width: 150px;
            height: 216px;
         }
      }
   @media (min-width: 768px){
         .merit__wrap h2 .tit_main::before{
            top: -92px;
         }
      }
   @media (min-width: 900px){
         .merit__wrap h2 .tit_main::before{
            top: -92px;
            right: -170px;
            width: 170px;
            height: 236px;
         }
      }

   /* merit__point-block ------------------------------------------------ */
   .merit__point-block{
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      gap: 32px;
      width: 100%;
      max-width: 820px;
   }
   .merit__point-box{
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      gap: 24px;
      width: 100%;
      max-width: 320px;
      padding: 24px;
      border: 3px solid #E4E4E4;
      border-radius: 10px;
      background: #FFF;
      z-index: 0;
   }
   .merit__point-box::after{
      position: absolute;
      top: -74px;
      width: clamp(86px, 22.93vw, 120px);
      height: clamp(106px, 28.27vw, 148px);
      content: "";
      z-index: 10;
   }
   .merit__point-box:nth-child(2):after{
      top: -84px;
      background: url("../images/illust_01.svg") center / contain no-repeat;
      transform: rotate(-5deg);
   }
   .merit__point-box:nth-child(3):after{
      background: url("../images/illust_02.svg") center / contain no-repeat;
      transform: rotate(5deg);
   }
      .merit__point-box .merit__point-img{
         position: relative;
         flex-shrink: 1;
         width: 100%;
         max-width: 170px;
         aspect-ratio: 1/1;
      }
      .merit__point-box .merit__point-img img{
         position: relative;
         z-index: 1;
      }
      .merit__point-box .merit__point-img::before{
         position: absolute;
         top: 50%;
         left: 50%;
         width: 105%;
         height: 105%;
         content: "";
         border-radius: 100%;
         background: linear-gradient(153deg, #FFEB91 8.24%, #E9F5C3 50%, #E2F5D0 91.76%);
         transform: translateX(-50%) translateY(-50%);
      }
      .merit__point-box p{
         width: 100%;
         font-size: 18px;
         font-weight: 700;
         line-height: 150%;
         text-align: center;
      }     

   @media (max-width: 450px){
      .merit__point-box:nth-child(2):after{
         left: clamp(-80px, -10vw, -40px);
         top: -84px;
      }
      .merit__point-box:nth-child(3):after{
         right: clamp(-80px, -10vw, -40px);
      }
   }
   @media  (min-width: 451px) and (max-width: 599px){
      .merit__point-box:nth-child(2):after{
         left: clamp(-80px, -16vw, -40px);
         top: -84px;
      }
      .merit__point-box:nth-child(3):after{
         right: clamp(-80px, -16vw, -40px);
      }
   }
   @media (min-width: 600px) and (max-width: 767px){
      .merit__point-box{
         flex-direction: row;
         align-items: center;
         gap: 24px;
         max-width: 540px;
      }
      .merit__point-box::after{
         width: 120px;
         height: 148px;
      }
      .merit__point-box:nth-child(2):after{
         transform: rotate(5deg);
         right: -55px;
      }
      .merit__point-box:nth-child(3):after{
         right: -55px;
      }
      .merit__point-box .merit__point-img{
         flex-shrink: 0;
         width: 150px;
      }
   }
   @media (min-width: 768px) {
      .merit__point-block{
         flex-direction: row;
         gap: 24px;
      }
      .merit__point-block::after,
      .merit__point-block::before{
         position: absolute;
         bottom: -80px;
         width: 13.02vw;
         height: 15.76vw;
         max-width: 140px;
         max-height: 170px;
         content: "";
         z-index: 2
      }
      .merit__point-block::before {
         right: -5vw;
         background: url("../images/illust_02.svg") center / contain no-repeat;
         transform: rotate(5deg);
      }
      .merit__point-block::after {
         left: -5vw;
         background: url("../images/illust_01.svg") center / contain no-repeat;
         transform: rotate(-5deg);
      }
      .merit__point-box {
         flex-direction: column;
         align-items: center;
         gap: 24px;
      }
      .merit__point-box::after{
         display: none;
      }
      .merit__point-box p span{
         display: block !important;
      }
   }
   @media (min-width: 768px) and (max-width: 899px){
         .merit__point-box p{
         font-size: 17px;
      }
   }
   @media  (min-width: 900px) and (max-width:1239px){
      .merit__point-block::after{
         left: -7vw;
      }
      .merit__point-block::before{
         right: -7vw;
      }
      .merit__point-box{
         padding:24px 10px;
      }
      .merit__point-box p{
         font-size: 19px;
      }
   }
   @media (min-width: 1240px){
      .merit__point-block::after,
      .merit__point-block::before{
         content:"";
         position: absolute;
         top: 50%;
         margin-top:40px;
         z-index: 1;
         bottom: 0;
      }
      .merit__point-block::after{
         left: -180px;
         transform: translateY(-50%) rotate(-5deg);
      }
      .merit__point-block::before{
         right: -180px;
         transform: translateY(-50%) rotate(5deg); 
      }
      .merit__point-box{
         padding:24px 10px;
         gap: 24px;
      }
      .merit__point-box p{
         font-size: 20px;
      }
   }
   @media (min-width: 1400px){
      .merit__point-block::after,
      .merit__point-block::before{
         max-width: 160px;
         max-height: 190px;
         }
      .merit__point-block::after{
         left: -200px;
      }
      .merit__point-block::before{
         right: -200px;
      }
   }

/* ------------------------------------------------------------
   peek
------------------------------------------------------------ */
#peek{
   position: relative;
   background: #fff;
   overflow: hidden;
}
#peek::before{
   content: "";
   position: absolute;
   top:70px;
   left: 50%;
   width: 100%;
   height: 100%;
   background: url("../images/peek_sp_bg.svg") center top / 100% auto repeat-y;
   transform: translateX(-50%);
}
@media (min-width: 480px){
   #peek::before{
      background:url("../images/peek_tab_bg.svg") center top / 100% auto repeat-y;
   }
}
@media (min-width: 768px){
   #peek::before{
      width: calc(1600px * (100vw / 1240px));
      background:url("../images/peek_pc_bg.svg") center top / 100% auto repeat-y;
   }
}
 @media (min-width: 1240px){
   #peek::before{
       width: 1600px;
  }
 }
 @media (min-width: 1600px){
   #peek::before{
       width: 100%;
  }
 }
/* peek__wrap ------------------------------------------------ */
.peek__wrap{
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* peek__inner ------------------------------------------------ */
.peek__inner{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 80%;
   max-width: 1240px;
   padding: 42px 0;
   gap: 42px;
   z-index: 1;
}
@media (min-width: 768px){
   .peek__inner{
      padding: 74px 0 92px;
      gap: 54px;
   }
}

/* peek__head ------------------------------------------------ */
.peek__head{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}
.peek__head h2{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   font-size: 32px;
   font-weight: 700;
   line-height: 120%;
   text-align: center;
}
.peek__head h2 .tit_sub{
   display: block;
   font-size: 24px;
}
.peek__head h2::before{
   content: "";
   display: block;
   width: 36px;
   height: 51px;
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NSIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDU1IDYwIiBmaWxsPSJub25lIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzJfMTAzMDEpIj4KICAgIDxwYXRoIGQ9Ik0xNi40NzI5IDM5LjcyNDhDMjIuOTIzNyA0NC41NjE5IDMxLjg0MDMgNDUuNDg4MyAzOS4xMDc0IDQxLjc1NjZDNDcuMDcyMyAzNy42NjYgNTEuNzM3NSAyOC44NzQ1IDUwLjYyNTEgMTkuOTg5OUM0OS41MDk4IDExLjA4NDMgNDIuNzE1OSAzLjc5ODgzIDM0LjAwNzUgMS44MDM2OUMyNC4xMzcyIC0wLjMxNDIzNyAxMy44OTE1IDQuNzYzNjQgOS43NzAxNyAxNC4wMTI3QzkuNjg5OTcgMTQuMTkyMiA5LjY1MDY3IDE0LjM4MjQgOS41NzYwNSAxNC41NjM1IiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjUuMzc2MyAzOC41MDAxQzI5LjE3NjggMzkuNDQ5MyAzMy4yODY1IDM5LjEwNjYgMzYuODY1OCAzNy4yNDk5QzQyLjkzNTMgMzQuMTAxMSA0Ni40Njk3IDI3LjQwNDcgNDUuNjI1MyAyMC42MjFDNDQuNzc2NiAxMy44MDM3IDM5LjU2OTkgOC4yNTA4IDMyLjkxNTggNi43MTU1M0MyNi44MjE0IDUuNDE3NjEgMjAuNTg1NyA3LjcyNTk2IDE2LjczMTggMTIuMzcyOSIgc3Ryb2tlPSIjN0NDRjdFIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTMyLjAwMjYgMTEuNDU3MkMzNi4zNzg2IDEyLjk2MTEgMzkuNjQ2MiAxNi41MjQ3IDQwLjg4MzYgMjAuOTU5MiIgc3Ryb2tlPSIjN0NDRjdFIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTQ0LjExMDkgMzkuMTI2MkM0Ny45MDU2IDQ1LjA3OTggNDkuMTk3IDQ3LjQ2MjEgNTIuOTkxNyA1My40MTU3QzUzLjEzMTQgNTMuNjM1MSA1My4yOTY4IDUzLjg1MiA1My40MTcxIDU0LjA4M0M1NC4xNzc5IDU1LjU0MzcgNTMuMDk4MiA1Ni4zMzcyIDUyLjAxMTUgNTcuMDI3OEM1MC41NTU4IDU3Ljk1MzEgNDguNTg0OSA1OS43ODEyIDQ3LjIwNjkgNTcuNzU5QzQ1LjE3MDQgNTQuNzcwNCAzOS45NzI1IDQ2LjA1MjYgMzguMDIzOSA0Mi45OTU2IiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNNDYuNjg4MyA0My4yODJDNDQuNzcxOCA0NC41MDAzIDQyLjg1NTEgNDUuNzE4NyA0MC45Mzg2IDQ2LjkzNyIgc3Ryb2tlPSIjN0NDRjdFIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTE4LjYwNjEgMzEuMTAxNUMxNS41MjcgMzEuMTAxNSAxMi45NTk3IDI4LjgyNDcgMTIuOTYgMjYuMDk0NEMxMi45NiAyMy4zNjgxIDE1LjUyNyAyMS4wODA5IDE4LjYwNjQgMjEuMDg3QzIxLjc0MiAyMS4wOTM0IDI0LjE3OTcgMjMuMzU5MyAyNC4yNTMgMjYuMDk0NEMyNC4xOCAyOC44MjM5IDIxLjc0MDcgMzEuMTAxNSAxOC42MDYxIDMxLjEwMTVaIiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjUuMDIwNCAzNC40MDQxQzIxLjMxMTIgMzUuOTE0NCAxNy4xODQgMzYuMTEzIDEzLjMzMzggMzQuODk3OUMxMC4wNTk5IDMzLjg2NDQgNy4xOTI5NyAzMS45NTY3IDQuNzc0ODcgMjkuNzc2MkMzLjUxNTM2IDI4LjY0MDYgMi4zMjAzOSAyNy4zOTg3IDEuMzI3NzYgMjYuMDYxQzMuODg2MDcgMjIuNTcyMiA3LjcyNTY2IDE5LjQ0MyAxMS45NjQ0IDE3LjcxNzFDMTUuNjczOSAxNi4yMDY3IDE5LjgwMSAxNi4wMDgxIDIzLjY1MTUgMTcuMjIzM0MyNi45MjUgMTguMjU2OCAyOS43OTE4IDIwLjE2NDQgMzIuMjEwMiAyMi4zNDQ5QzMzLjQ2OTcgMjMuNDgwNSAzNC42NjQ3IDI0LjcyMjIgMzUuNjU3MSAyNi4wNjAyQzMzLjA5OSAyOS41NDg5IDI5LjI1OTEgMzIuNjc4MSAyNS4wMjA0IDM0LjQwNDFaIiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjUuMDIwNCAzNC40MDQxQzIxLjMxMTIgMzUuOTE0NCAxNy4xODQgMzYuMTEzIDEzLjMzMzggMzQuODk3OUMxMC4wNTk5IDMzLjg2NDQgNy4xOTI5NyAzMS45NTY3IDQuNzc0ODcgMjkuNzc2MkMzLjUxNTM2IDI4LjY0MDYgMi4zMjAzOSAyNy4zOTg3IDEuMzI3NzYgMjYuMDYxQzMuODg2MDcgMjIuNTcyMiA3LjcyNTY2IDE5LjQ0MyAxMS45NjQ0IDE3LjcxNzFDMTUuNjczOSAxNi4yMDY3IDE5LjgwMSAxNi4wMDgxIDIzLjY1MTUgMTcuMjIzM0MyNi45MjUgMTguMjU2OCAyOS43OTE4IDIwLjE2NDQgMzIuMjEwMiAyMi4zNDQ5QzMzLjQ2OTcgMjMuNDgwNSAzNC42NjQ3IDI0LjcyMjIgMzUuNjU3MSAyNi4wNjAyQzMzLjA5OSAyOS41NDg5IDI5LjI1OTEgMzIuNjc4MSAyNS4wMjA0IDM0LjQwNDFaIiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8zMl8xMDMwMSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1NSIgaGVpZ2h0PSI2MCIgZmlsbD0id2hpdGUiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgo8L3N2Zz4K") center / contain no-repeat;
}
.peek__head h2::after{
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   left: -94px;
   transform: translateY(-50%) rotate(-5deg);
   width: 98px;
   height: 108px;
   margin-top: 24px;
   background: url("../images/illust_will_02.svg") center / contain no-repeat;
}
.peek__head p{
   text-align: center;
}

@media (min-width: 600px){
   .peek__head{
      gap: 24px;
   }
   .peek__head::before,
   .peek__head::after{
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
   }
   .peek__head::before{
      transform: translateY(-50%) translateX(-50%) rotate(-5deg);
      width: 140px;
      height: 160px;
      margin-top: -40px;
      margin-left: -230px;
      background: url("../images/illust_will_02.svg") center / contain no-repeat;
   }
   .peek__head::after{
      transform: translateY(-50%) translateX(-50%);
      width: 190px;
      height: 170px;
      margin-top: -40px;
      margin-left: 240px;
      background: url("../images/illust_fellows_01.svg") center / contain no-repeat;
   }
   .peek__head h2{
      gap: 10px;
      font-size: 48px;
   }
   .peek__head h2 .tit_sub{
      font-size: 40px;
   }
   .peek__head h2::before{
      width: 41px;
      height: 60px;
   }
   .peek__head h2::after{
      display: none;
   }
   .peek__head p{
      font-size: 18px;
      line-height: 200%;
   }
}
@media (min-width: 768px){
   .peek__head::before{
      width: 164px;
      height: 180px;
      margin-top: -40px;
      margin-left: -260px;
   }
   .peek__head::after{
      width: 240px;
      height: 210px;
      margin-top: -50px;
      margin-left: 280px;
   }
}
@media (min-width: 1240px){
   .peek__head::before{
      width: 210px;
      height: 230px;
      margin-top: 40px;
      margin-left: -420px;
   }
   .peek__head::after{
      width: 300px;
      height: 268px;
      margin-top: 40px;
      margin-left: 480px;
   }
}

/* peek__list ------------------------------------------------ */
.peek__list{
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
}
@media (min-width: 600px){
   .peek__list{
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (min-width: 768px){
   .peek__list{
      gap: 28px;
   }
}
@media (min-width: 1000px){
   .peek__list{
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
   }
}

/* couse__card ------------------------------------------------ */
.peek__list .couse__card{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   padding: 16px 0 14px;
   gap: 12px;
   border-radius: 16px;
   border: 2px solid var(--color-course);
   background: #f6f6f6;
}
.peek__list .couse__card::after{
   content: "";
   position: absolute;
   z-index: 1;
}
.peek__list .couse__card h3{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 3px 0 5px;
   font-size: 18px;
   font-weight: 700;
   line-height: 100%;
   letter-spacing: -0.9px;
   text-align: center;
   color: #fff;
   background: var(--color-course);
}
.peek__list .couse__card h3::before{
   content: "";
   position: absolute;
   top: 50%;
   left: 2px;
   transform: translateY(-50%) rotate(-2deg);
   width: 40px;
   height: 60px;
   margin-top: 7px;
   background: url("../images/illust_tit_bg_01.svg") center / contain no-repeat;
}
.peek__list .couse__card .course__block{
   display: flex;
   flex-direction: column;
   align-items: stretch;
   flex: 1;
   width: 100%;
   padding: 0 16px;
   gap: 16px;
   z-index: 1;
}
.peek__list .couse__card .couse__img{
   width: 100%;
   overflow: hidden;
   aspect-ratio: 576 / 324;
   border-radius: 10px;
}
.peek__list .couse__card .couse__img img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.peek__list .couse__card .course__chapter-list{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   flex: 1;
   width: 100%;
   gap: 8px;
}
.course__chapter-list a{
   display: flex;
   position: relative;
   align-items: center;
   width: 100%;
   height: 48px;
   padding: 0 10px 0 15px;
   gap: 6px;
   border-radius: 3px 48px 48px 3px;
   border: 1px solid #afd1ca;
   background: #fff;
   text-decoration: none;
}
.course__chapter-list a::before{
   content: "";
   position: absolute;
   top: 50%;
   left: -1px;
   transform: translateY(-50%);
   width: 10px;
   height: calc(100% + 2px);
   border-radius: 3px 0 0 3px;
   border: 1px solid var(--color-course);
   background: var(--color-course);
   z-index: 1;
}
.course__chapter-list a::after{
   content: "";
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-radius: 100%;
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA3IDgiIGZpbGw9Im5vbmUiPgogIDxwYXRoIGQ9Ik02LjIxMDU2IDIuOTk4MTdMMS4zNjgzMiAwLjEyNjkxM0MwLjc2MDE3NiAtMC4yMzM2ODUgMCAwLjIxNzA2NSAwIDAuOTM4MjY2VjYuNjgwNzhDMCA3LjQwMTk4IDAuNzYwMTc2IDcuODUyNzQgMS4zNjgzMiA3LjQ5MjEzTDYuMjEwNTYgNC42MjA4OEM2LjgxODcgNC4yNjAyOCA2LjgxODcgMy4zNTg3NyA2LjIxMDU2IDIuOTk4MTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K") calc(50% + 1px) center / 7px 8px no-repeat,
   var(--color-course);
}
.course__chapter-list a .chapter{
   display: -webkit-box;
   flex: 1;
   overflow: hidden;
   font-size: 14px;
   font-weight: 400;
   line-height: 120%;
   letter-spacing: -0.7px;
   color: #585858;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}
.course__chapter-list a .time{
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   width: 28px;
   gap: 2px;
   font-size: 12px;
   line-height: 100%;
   letter-spacing: -0.36px;
}
.course__chapter-list a .time::before{
   content: "目安時間";
   display: block;
   font-size: 7px;
   line-height: 100%;
   letter-spacing: -0.21px;
   color: #585858;
}
.course__chapter-list .chapter-toggle{
   position: relative;
   width: 100%;
   height: 26px;
   border: none;
   cursor: pointer;
}
.course__chapter-list .chapter-toggle:hover{
   opacity: .6;
}

.course__chapter-list .chapter-toggle::after{
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   border-radius: 100%;
   border: 1px solid var(--color-course);
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTEgNyIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTkuNTk4MDMgMC43NDk5NDRMNS4xNzQwMSA1LjE3Mzk2TDAuNzQ5OTk1IDAuNzQ5OTQ0IiBzdHJva2U9IiM3Q0NGN0UiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==") center calc(50% + 1px) / 11px 7px no-repeat;
}
.course__chapter-list .chapter-toggle.is-expanded::after{
   transform: translateX(-50%) translateY(-50%) rotate(180deg);
}

@media (max-width: 599px){
   .peek__list .couse__card:nth-child(4n)::after,
   .peek__list .couse__card:nth-child(4n+1)::after,
   .peek__list .couse__card:nth-child(4n+2)::after,
   .peek__list .couse__card:nth-child(4n+3)::after{
      width: clamp(0px, 19vw, 95px);
      height: clamp(0px, 24.5vw, 115px);
   }
   .peek__list .couse__card:nth-child(4n)::after{
      bottom: clamp(-30.55px, -6.5vw, 0px);
      right: clamp(-84.6px, -9vw, 0px);
      background: url("../images/illust_bg_03.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(4n+1)::after{
      bottom: clamp(-28.2px, -6vw, 0px);
      left: clamp(-85.2px, -10.67vw, 0px);
      background: url("../images/illust_bg_02.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(4n+2)::after{
      bottom: clamp(-18.8px, -4vw, 0px);
      right: clamp(-92.7px, -11.73vw, 0px);
      background: url("../images/illust_bg_04.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(4n+3)::after{
      bottom: clamp(-44.8px, -9.53vw, 0px);
      left: clamp(-84.6px, -11vw, 0px);
      transform: rotate(2deg);
      background: url("../images/illust_bg_01.svg") center / contain no-repeat;
   }
}
@media (min-width: 600px) and (max-width: 999px){
   .peek__list .couse__card:nth-child(8n)::after,
   .peek__list .couse__card:nth-child(8n+1)::after,
   .peek__list .couse__card:nth-child(8n+4)::after,
   .peek__list .couse__card:nth-child(8n+5)::after{
      width: 95px;
      height: 110px;
   }
   .peek__list .couse__card:nth-child(8n)::after{
      bottom: -10px;
      right: -70px;
      transform: rotate(5deg);
      background: url("../images/illust_bg_03.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(8n+1)::after{
      bottom: -10px;
      left: -60px;
      background: url("../images/illust_bg_02.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(8n+4)::after{
      bottom: -10px;
      right: -70px;
      background: url("../images/illust_bg_04.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(8n+5)::after{
      bottom: -30px;
      left: -64px;
      transform: rotate(2deg);
      background: url("../images/illust_bg_01.svg") center / contain no-repeat;
   }
}
@media (min-width: 600px){
   .peek__list .couse__card{
      padding: 16px 0 24px;
   }
   .peek__list .couse__card h3{
      padding: 8px 0;
      font-size: 20px;
   }
   .peek__list .couse__card h3::before{
      width: 47px;
      height: 67px;
      margin-top: 5px;
   }
   .peek__list .couse__card .course__chapter-list{
      gap: 10px;
   }
   .course__chapter-list a{
      height: 52px;
      padding: 0 8px 0 15px;
      gap: 5px;
      border-radius: 3px 52px 52px 5px;
   }
   .course__chapter-list a .chapter{
      font-size: 16px;
      line-height: 130%;
      letter-spacing: -0.02em;
   }
   .course__chapter-list a .time{
      width: 34px;
      font-size: 13px;
   }
   .course__chapter-list a .time::before{
      font-size: 8px;
   }
}
@media (min-width: 1000px){
   .peek__list .couse__card:nth-child(12n)::after,
   .peek__list .couse__card:nth-child(12n+1)::after,
   .peek__list .couse__card:nth-child(12n+6)::after,
   .peek__list .couse__card:nth-child(12n+7)::after{
      width: 85px;
      height: 110px;
   }
   .peek__list .couse__card:nth-child(12n)::after{
      bottom: -10px;
      right: -60px;
      transform: rotate(5deg);
      background: url("../images/illust_bg_03.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(12n+1)::after{
      bottom: -18px;
      left: -60px;
      background: url("../images/illust_bg_02.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(12n+6)::after{
      bottom: -10px;
      right: -70px;
      transform: rotate(2deg);
      background: url("../images/illust_bg_04.svg") center / contain no-repeat;
   }
   .peek__list .couse__card:nth-child(12n+7)::after{
      bottom: -30px;
      left: -64px;
      transform: rotate(2deg);
      background: url("../images/illust_bg_01.svg") center / contain no-repeat;
   }
}
@media (min-width: 1200px){
   .peek__list .couse__card:nth-child(12n)::after,
   .peek__list .couse__card:nth-child(12n+1)::after,
   .peek__list .couse__card:nth-child(12n+6)::after,
   .peek__list .couse__card:nth-child(12n+7)::after{
      width: 130px;
      height: 150px;
   }
   .peek__list .couse__card:nth-child(12n)::after{
      bottom: -10px;
      right: -100px;
   }
   .peek__list .couse__card:nth-child(12n+1)::after{
      left: -100px;
   }
   .peek__list .couse__card:nth-child(12n+6)::after{
      bottom: -10px;
      right: -100px;
   }
   .peek__list .couse__card:nth-child(12n+7)::after{
      bottom: -30px;
      left: -100px;
   }
}

/* course__foot ------------------------------------------------ */
.peek__list .couse__card .course__foot{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.peek__list .couse__card .course__foot a{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 240px;
   height: 32px;
   padding-bottom: 2px;
   font-size: 14px;
   font-weight: 700;
   line-height: 100%;
   text-align: center;
   color: #fff;
   background: var(--color-cv);
   border-radius: 32px;
   text-decoration: none;
}

@media (min-width: 600px){
   .peek__list .couse__card .course__foot a{
      height: 42px;
      font-size: 17px;
      border-radius: 42px;
   }
}

/* peek__foot ------------------------------------------------ */
.peek__foot{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}
.peek__foot .btn__more{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 320px;
   height: 56px;
   font-size: 16px;
   font-weight: 700;
   line-height: 100%;
   text-align: center;
   color: #333;
   background: #fff;
   border: 2px solid #333;
   border-radius: 56px;
   cursor: pointer;
}

@media (min-width: 600px){
   .peek__foot .btn__more{
      max-width: 420px;
      height: 72px;
      font-size: 21px;
      border-radius: 72px;
   }
}

/* ------------------------------------------------------------
   find
------------------------------------------------------------ */

/* find__wrap ------------------------------------------------ */
.find__wrap{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   background: #eeeee2;
   width: 100%;
}
.find__wrap::before,
.find__wrap::after{
   content: "";
   position: absolute;
   top: 0;
   width: 110px;
   height: 110px;
   background: url("../images/match_bg_01.svg") 0 0 / 100% no-repeat;
}
.find__wrap::before{
   left: 0;
}
.find__wrap::after{
   right: 0;
   transform: scaleX(-1);
}
@media (min-width: 600px){
   .find__wrap::before,
   .find__wrap::after{
      width: 200px;
      height: 200px;
   }
}
@media (min-width: 1240px){
   .find__wrap::before,
   .find__wrap::after{
      width: 300px;
      height: 300px;
   }
}

/* find__inner ------------------------------------------------ */
.find__inner{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 100%;
   padding-top: 42px;
   padding-bottom: 72px;
   gap: 42px;
}
@media (min-width: 600px){
   .find__inner{
      padding-top: 74px;
      padding-bottom: 140px;
      gap: 74px;
   }
}
@media (min-width: 900px){
   .find__inner{
      padding-bottom: 74px;
   }
}

/* find__head ------------------------------------------------ */
.find__head{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 80%;
   gap: 16px;
}
.find__head h2{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   font-size: 32px;
   font-weight: 700;
   line-height: 120%;
   text-align: center;
}
.find__head h2 .tit_sub{
   display: block;
   font-size: 24px;
}
.find__head h2::before{
   content: "";
   display: block;
   width: 30px;
   height: 45px;
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MSIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDQxIDYwIiBmaWxsPSJub25lIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzJfMTA4MTcpIj4KICAgIDxwYXRoIGQ9Ik0xNC4wOTcyIDQyLjAzMjZIMTIuMzcwN0MxMS40Nzg4IDQyLjAzMjYgMTAuNzM1NSA0MS4zMzg0IDEwLjU5ODQgNDAuNDI0NUMxMC4zNTgyIDM4Ljg1MDkgOS4zNTIxOCAzNi42NTI3IDUuMjI0NDIgMzEuNzkzNEMyLjc4OTE0IDI4LjYwMDIgMS4yOTExNCAyNC42NjY0IDEuMjkxMTQgMjAuMzYyNUMxLjI5MTQgOS44MzM3MSA5Ljg4OTY2IDEuMzA2NjQgMjAuNTAwMSAxLjMwNjY0QzMxLjExMDYgMS4zMDY2NCAzOS43MDg5IDkuODQ1MjEgMzkuNzA4OSAyMC4zNjIyQzM5LjcwODkgMjQuNjY2MSAzOC4yMTEyIDI4LjYgMzUuNzc1NiAzMS43OTMxQzMxLjY0ODEgMzYuNjQwOSAzMC42NDE5IDM4Ljg1MDYgMzAuNDAxNyA0MC40MjQyQzMwLjI2NDUgNDEuMzM4MiAyOS41MzI4IDQyLjAzMjMgMjguNjI5NCA0Mi4wMzIzTDE0LjA5NzIgNDIuMDMyNloiIHN0cm9rZT0iIzJGQjE4QyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0zMC41NjE4IDQ5LjQzNzFDMzAuNTYxOCA1MC40NTU0IDI5LjczODcgNTEuMjg4MyAyOC43MzI0IDUxLjI4ODNIMTIuMjY3OEMxMS4yNjE2IDUxLjI4ODMgMTAuNDM4NSA1MC40NTU0IDEwLjQzODUgNDkuNDM3MVY0NS43MzQ5IiBzdHJva2U9IiMyRkIxOEMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMjYuOTAzMSA1NC45OTA0VjU1LjY2MTVDMjYuOTAzMSA1Ni41MDA1IDI2LjU2MDEgNTcuMjU4MSAyNi4wMDU2IDU3LjgwNjdDMjUuNDUxMSA1OC4zNTQgMjQuNjg1IDU4LjY5MjkgMjMuODM4OSA1OC42OTI5SDE3LjE2MTdDMTUuNDY5NSA1OC42OTI5IDE0LjA5NzUgNTcuMzI3NiAxNC4wOTc1IDU1LjY2MTVWNTEuMjg4MSIgc3Ryb2tlPSIjMkZCMThDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTE0LjA5NzIgNDcuNTg2TDMwLjU2MTcgNDUuNzM0OSIgc3Ryb2tlPSIjMkZCMThDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTI2LjkwMyA0Mi4wMzI0VjE3LjA0MTNMMjMuOTA4MyAxMi4yODA1TDIwLjUwMDEgNi44NTk4NkwxNy4wOTE2IDEyLjI4MDVMMTQuMDk3MiAxNy4wNDEzVjQyLjAzMjQiIHN0cm9rZT0iIzJGQjE4QyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0xNC4wOTcyIDE3LjA0MTVIMjAuNTAwMUgyNi45MDMiIHN0cm9rZT0iIzJGQjE4QyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICAgIDxwYXRoIGQ9Ik0xNy4yOTg2IDEyLjQxMzZIMjMuNzAxNSIgc3Ryb2tlPSIjMkZCMThDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTTIwLjUwMDEgMTcuMDQxNVY0Mi4wMzI2IiBzdHJva2U9IiMyRkIxOEMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF8zMl8xMDgxNyI+CiAgICAgIDxyZWN0IHdpZHRoPSI0MSIgaGVpZ2h0PSI2MCIgZmlsbD0id2hpdGUiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgo8L3N2Zz4=") center / contain no-repeat;
}
.find__head p{
   text-align: center;
}
@media (min-width: 600px){
   .find__head{
      gap: 24px;
   }
   .find__head h2{
      gap: 10px;
      font-size: 48px;
   }
   .find__head h2 .tit_sub{
      font-size: 40px;
   }
   .find__head h2::before{
      width: 41px;
      height: 60px;
   }
   .find__head p{
      font-size: 18px;
      line-height: 200%;
   }
}

/* find__card ------------------------------------------------ */
.find__card{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 85%;
   max-width: 560px;
   padding-bottom: 24px;
   gap: 16px;
   overflow: hidden;
   border-radius: 16px;
   background: #fff;
   text-decoration: none;
   z-index: 1;
}

.find__card-body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 24px;
   gap: 16px;
}
.find__card-body h3{
   width: 100%;
   font-size: 25px;
   font-weight: 700;
   line-height: 130%;
   text-align: center;
}
.find__card-body h3 span{
   display: block;
   font-size: 13px;
   text-align: center;
}
.find__card-body p{
   font-size: 16px;
   line-height: 180%;
   text-align: center;
}
@media (max-width: 389px){
   .find__card-body p{
      font-size: 15px;
   }
}
@media (min-width: 600px){
   .find__card-body h3{
      font-size: 30px;
   }
   .find__card-body h3 span{
      font-size: 20px;
   }
   .find__card-body p{
      font-size: 18px;
   }
}
@media (min-width: 768px){
   .find__card{
      flex-direction: row;
      max-width: 960px;
      padding-bottom: 0;
      gap: 0;
   }
   .find__card-img{
      flex: 1;
      max-width: 370px;
   }
   .find__card-body{
      flex: 1;
      align-items: flex-start;
   }
}
@media (min-width: 768px) and (max-width: 899px){
   .find__card-body h3{
      font-size: 28px;
   }
   .find__card-body h3 span{
      font-size: 18px;
   }
   .find__card-body p{
      font-size: 16px;
      line-height: 150%;
   }
}
@media (min-width: 900px){
   .find__card{
      gap: 42px;
   }
   .find__card-body{
      padding: 0;
   }
   .find__card-body h3,
   .find__card-body h3 span,
   .find__card-body p{
      text-align: left;
   }
   .find__card-body p{
      line-height: 180%;
   }
}

/* find__point-area ------------------------------------------------ */
.find__point-area{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 100%;
}
.find__point-area::before{
   content: "";
   position: absolute;
   top: -120px;
   right: -22px;
   transform: scaleX(-1);
   width: 200px;
   height: 220px;
   background: url("../images/match_bg_01_w.svg") 0 0 / 100% no-repeat;
}
.find__point-area::after{
   content: "";
   position: absolute;
   top: 50%;
   left: -20px;
   transform: translateY(-50%);
   width: 100px;
   height: 200px;
   background: url("../images/match_bg_02.svg") 0 0 / 100% no-repeat;
}
@media (min-width: 600px){
   .find__point-area::before{
      top: -200px;
      width: 240px;
      height: 264px;
   }
}
@media (min-width: 768px){
   .find__point-area::before{
      top: auto;
      bottom: -50px;
      right: -20px;
      transform: scaleX(-1);
      width: 100px;
      height: 200px;
      background: url("../images/match_bg_02.svg") 0 0 / 100% no-repeat;
   }
   .find__point-area::after{
      top: auto;
      bottom: -50px;
      transform: translateY(0%);
   }
}
.find__point-block{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   width: 80%;
   max-width: 520px;
   gap: 42px;
   z-index: 1;
}
@media (min-width: 768px){
   .find__point-block{
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 85%;
      max-width: 960px;
   }
}
.find__point-box{
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   padding: 16px;
   gap: 10px;
   background: #fffff4;
}
@media (min-width: 600px){
   .find__point-box{
      padding: 42px;
      gap: 24px;
   }
}
@media (min-width: 768px) and (max-width: 899px){
   .find__point-box{
      padding: 24px;
   }
}
.find__point-label{
   display: flex;
   position: absolute;
   top: 16px;
   left: 16px;
   justify-content: center;
   align-items: center;
   height: 24px;
   padding: 0 10px 3px 10px;
   font-size: 22px;
   font-weight: 700;
   line-height: 100%;
   color: #fff;
   background: var(--color-match);
   border-radius: 0 24px 24px 0;
   overflow: hidden;
   z-index: 1;
}
.find__point-label span{
   display: block;
   padding-top: 2px;
   font-size: 13px;
}
@media (min-width: 600px){
   .find__point-label{
      top: 42px;
      left: 42px;
      height: 34px;
      font-size: 24px;
      border-radius: 0 34px 34px 0;
   }
   .find__point-label span{
      font-size: 15px;
   }
}
@media (min-width: 768px) and (max-width: 899px){
   .find__point-label{
      top: 24px;
      left: 24px;
   }
}
.find__point-img{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 199px;
}
.find__point-img::before{
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 170px;
   height: 170px;
   border-radius: 100%;
   background: #f5ffac;
}
.find__point-img img{
   position: relative;
   width: 207px;
   height: 153px;
   aspect-ratio: 23 / 17;
   z-index: 1;
}
@media (min-width: 900px){
   .find__point-img{
      height: 250px;
   }
   .find__point-img::before{
      width: 200px;
      height: 200px;
   }
   .find__point-img img{
      height: 190px;
   }
}
.find__point-box h3{
   font-size: 20px;
   font-weight: 700;
   line-height: 150%;
   text-align: center;
}
.find__point-box p{
   font-size: 15px;
   font-weight: 400;
   line-height: 150%;
   text-align: justify;
}
@media (min-width: 600px){
   .find__point-box h3{
      font-size: 24px;
   }
   .find__point-box p{
      font-size: 18px;
      line-height: 180%;
   }
}
@media (min-width: 768px) and (max-width: 899px){
   .find__point-box h3{
      font-size: 21px;
   }
   .find__point-box p{
      font-size: 16px;
      line-height: 150%;
   }
}

/* find__foot ------------------------------------------------ */
.find__foot{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   z-index: 1;
}
.find__foot .btn__cv{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 300px;
   height: 64px;
   padding-bottom: 5px;
   gap: 2px;
   font-size: 22px;
   font-weight: 700;
   line-height: 100%;
   text-align: center;
   color: #fff;
   background: var(--color-cv);
   border-radius: 64px;
   text-decoration: none;
}

.find__foot .btn__cv span{
   font-size: 16px;
}
@media (min-width: 600px){
   .find__foot .btn__cv{
      max-width: 420px;
      height: 82px;
      font-size: 30px;
      border-radius: 82px;
   }
}

/* ------------------------------------------------------------
   sns-area
------------------------------------------------------------ */

/* sns-area ------------------------------------------------ */
.sns-area{
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap:24px;
   padding:42px 0 74px;
}
.sns-area .sns-area__list{
   display: flex;
   justify-content: center;
   align-items: center;
   gap:30px;
}
      @media (min-width:600px){
         .sns-area{
            flex-direction: row;
            padding:74px 0;
         }
       }