@charset "UTF-8";
/*　Header
--------------------------------------------------------*/
/* （FVよりも下までスクロールした時に変えたい色） */

.header-default {
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    animation-name: fadeIn;
    animation-duration: 2s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(24px);
    height: 60px;

    @media (48rem <= width ) {
      height: initial;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

/*.sec_curve_imgの右端はみ出し制御 */
/* body {
  @media (1400px <= width ) {
    overflow: hidden;
  }
} */


/*　Custom Navbar
--------------------------------------------------------*/
.box-header-01 {
  height: 60px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

  @media (48rem <= width ) {
    height: initial;
  }
}

.bg_wht {
    background: #fff;
}

.header-wrap {
    background: #fff;
}

.header-inner {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
}

.header-logo {
    width: 100%;
    height: 60px;
    -webkit-box-shadow: none;
    box-shadow: none;
    
    @media (48rem <= width ) {
      padding-top: 5px;
    }
}

@media (48rem <= width ) {
  .nav-btn .btn-innerA {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 230px;
      height: 50px;
      margin-left: 25px;
      border-radius: 10px;
      background: #CF2357;
      background: linear-gradient(-90deg, rgba(207, 35, 87, 1) 0%, rgba(226, 107, 143, 1) 100%);
      box-shadow: 0 3px 0 0 #a11a49;
      letter-spacing: 0.1em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      span {
        color: #fff;
        font-size: var(--15px);
        font-weight: bold;
      }
  }

  /* .nav-btn .btn-innerA:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: rgb(255, 255, 255,0.3);
      transition: all 0.5s ease;
      transform-origin: bottom right;
  }

  .nav-btn .btn-innerA>* {
      position: relative;
      z-index: 1;
  } */

  .nav-btn .btn-innerA::before {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50px;
      background: #ffffff;
      position: absolute;
      top: 16px;
      right: 8px;
  }

  .nav-btn .btn-innerA::after {
      content: "";
      width: 6px;
      height: 6px;
      border-top: 2px solid #CE1E54;
      border-right: 2px solid #CE1E54;
      transform: rotate(45deg);
      position: absolute;
      right: 16px;
      top: 23px;
  }

  .nav-btn .btn-innerA:hover {
    box-shadow: none;
    transform: translateY(4px);
  }

  /* .nav-btn .btn-inner:not(:hover):after {
      opacity: 0;
      width: 0;
      -webkit-transform: skew(90deg);
      -ms-transform: skew(90deg);
      transform: skew(90deg);
  } */

}

.nav-inner {
  top: 60px;
}

.logo-btn {
  position: relative;
  top: 2px;
  right: -10px;

  img {
    width: 45px;
  }
}

.header-btn {
  position: initial;
  z-index: 101;
  top: 0;
  right: 0;
  display: flex;

  @media (48rem <= width ) {
    display: none;
  }
}

.btn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #d4215f;
  position: relative;
  top: 2px;
  right: 0;
}


/*　Main
--------------------------------------------------------*/
@media (48.0625rem <= width ) {
    #contents {
        min-width: 1100px;
    }
}

.font_nvy_b {
  font-weight: bold;
  color: #0e4b78;
}


/*　FV + section 02
--------------------------------------------------------*/
.sec_fv {
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_candy_wave@2x.png?auto=format);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 240px center;
    padding: 0 0 30px;
    position: relative;
    z-index: 10;

    @media (480px <= width ) {
      background-size: cover;
      overflow: hidden;
      margin-bottom: 3em;
    }
}

@media (48.0625rem <= width ) {
    .sec_fv {
      height: initial;
      overflow: initial;
      margin-bottom: initial;
        background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/bg/bg_candy_wave.png?auto=format);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 600px 0 0;
        margin-top: 100px;
    }
}


/*　FV
--------------------------------------------------------*/
.sec_fv_inner {
    position: relative;
    z-index: 10;

    @media (48.0625rem <= width ) {
      top: -620px;
    }
}

ul.list_fv {
    max-width: 1100px;
    width: 94%;
    margin: auto;

    @media (1400px <= width ) {
        max-width: 1200px;
    }
}

@media (48.0625rem <= width ) {
    ul.list_fv {
        display: grid;
        grid-template-columns: 70% 30%;
    }
}

ul.list_fv li:first-child {
    padding-top: 35px;

    @media (48.0625rem <= width ) {
      padding-top: 0;
    }

    @media (1190px <= width ) {
      padding-top: 35px;
    }
}

.title_tp {
    text-align: center;
    margin-bottom: 1.5em;

    @media (48.0625rem <= width ) {
      text-align: initial;
    }
}

.title_tp_main {
    font-size: var(--28px);
    color: #0e4b78;
    font-weight: bold;
    border-bottom: solid 2px #0e4b78;

    @media (48.0625rem <= width ) {
      font-size: var(--46px);
    }
}

@media (48.0625rem <= width ) {
    .title_tp_main {
        font-size: var(--46px);
    }
}

.title_tp_sub {
    font-size: var(--20px);
    color: #0e4b78;
    font-weight: bold;

    @media (48.0625rem <= width ) {
      font-size: var(--30px);
    }
}

.caption_fv {
    font-size: var(--14px);
    color: #0e4b78;
    line-height: 1.8em;
    text-align: center;
    margin-bottom: 2em;
}

@media (48.0625rem <= width ) {
    .caption_fv {
        font-size: var(--18px);
        text-align: initial;
    }
}

.sec_fv .btn-inner {
    color: #fff;
    font-weight: bold;
    display: block;
    max-width: 300px;
    margin: auto;
    padding: 10px 0;
    border-radius: 10px;
    background: #CF2357;
    background: linear-gradient(-90deg, rgba(207, 35, 87, 1) 0%, rgba(226, 107, 143, 1) 100%);
    letter-spacing: 0.1em;
    position: relative;
    box-shadow: 0 3px 0 0 #a11a49;
    overflow: hidden;
}

@media (48.0625rem <= width ) {
    .sec_fv .btn-inner {
        max-width: 400px;
        margin: initial;
        padding: 12px 0;
    }
}

.sec_fv .btn-inner:hover {
    box-shadow: none;
    transform: translateY(4px);
}

.sec_fv .btn-inner::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.09);

    @media (48.0625rem <= width ) {
      width: 26px;
      height: 26px;
      right: 20px;
    }
}

.sec_fv .btn-inner::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #CE1E54;
    border-right: 2px solid #CE1E54;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 18px;
    top: 45%;

    @media (48.0625rem <= width ) {
      right: 31px;
      top: 50%;
    }
}

@media (48.0625rem <= width ) {
    .sec_fv .btn-inner::after {
        width: 8px;
        height: 8px;
        right: 30px;
        top: 45%;
    }
}

.sec_fv .btn-inner span {
    color: #fff;
    display: block;
}

@media (48.0625rem <= width ) {
}

.btn-inner_box {
    width: fit-content;
    margin-left: 45.5%;

    @media (48.0625rem <= width ) {
      margin-left: 45%;
    }
}

.btn-inner_sm {
    width: fit-content;
    font-size: var(--12px);

    @media (48.0625rem <= width ) {
      font-size: var(--16px);
    }
}

.btn-inner_md {
    width: fit-content;
    font-weight: bold;
    font-size: var(--20px);

    @media (48.0625rem <= width ) {
      font-size: var(--26px);
    }
}

.sec_fv .cta_fv img {
    width: 110px;
    position: absolute;
    bottom: -13px;
    left: 3%;
    z-index: 1;
}

@media (48.0625rem <= width ) {
    .sec_fv .cta_fv img {
        width: 160px;
        top: 0.6em;
        bottom: initial;
    }
}

.note_fv {
    font-size: var(--10px);
    color: #4B4B4B;
    text-align: center;
}

@media (1270px <= width ) {
    .note_fv {
        font-size: var(--12px);
    }
}


/*　なぜタレントマネジメントが必要なの？
--------------------------------------------------------*/
.sec_curve {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: -8vw;
  
  /* 背景画像の設定 */
  background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/parts/parts_street_01@2x.png?auto=format');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto; /* 横幅いっぱいにしつつ、高さは自動 */

  /* ★重要：画像の下が切れないように、画像と同じ比率の高さを最低限確保する */
  /* 仮に画像のサイズが 幅1000px / 高さ2000px なら 1/2 なので 200% */
  /* 正確な比率が分かれば、height: [画像の高さ/画像の幅*100]vw; と書けます */
  /* min-height: 250vw;  */

  /* もしくは aspect-ratio を使う（モダンブラウザ対応） */
  /* aspect-ratio: 375 / 1200; (スマホ用画像の横幅 / 縦幅) */
  aspect-ratio: 375 / 1550;

  @media (440px <= width) {
    background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/parts/parts_street_02@2x.png?auto=format');
    aspect-ratio: 375 / 1300;
  }

  @media (480px <= width) {
    background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/parts/parts_street_03@2x.png?auto=format');
    aspect-ratio: 375 / 1350;
  }

  @media (510px <= width) {
    background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/parts/parts_street_04@2x.png?auto=format');
    aspect-ratio: 375 / 1130;
  }

  @media (600px <= width) {
    background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/parts/parts_street_05@2x.png?auto=format');
    aspect-ratio: 375 / 980;
  }

  @media (48.0625rem <= width) {
    background-image: none;
    aspect-ratio: initial;
    margin-bottom: initial;
    /* background-image: url('https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/parts/parts_circle_curve_.png?auto=format');
    min-height: 150vw; */
  }


  	/* position: relative;
    z-index: 1;
    padding-top: 280px;

    @media (48.0625rem <= width ) {
      padding-top: initial;
    } */

    .sec_curve_contents {
      padding-top: 70vw;

      @media (600px <= width) {
        padding-top: 75vw;
      }


      /* margin-top: -30px;


      @media (380px <= width ) {
        margin-top: 20px;
      }

      @media (390px <= width ) {
        margin-top: 1em;
      }

      @media (400px <= width ) {
        margin-top: 50px;
      }

      @media (440px <= width ) {
        margin-top: 20px;
      }

      @media (455px <= width ) {
        margin-top: 70px;
      }

      @media (500px <= width ) {
        margin-top: 100px;
      }

      @media (550px <= width ) {
        margin-top: 150px;
      }

      @media (580px <= width ) {
        margin-top: 190px;
      }

      @media (620px <= width ) {
        margin-top: 200px;
      }

      @media (670px <= width ) {
        margin-top: 250px;
      }

      @media (700px <= width ) {
        margin-top: 300px;
      }*/

      @media (48.0625rem <= width ) {
        margin-top: -480px;
        padding-top: initial;
      }

      @media (1170px <= width ) {
        margin-top: -440px;
      }

      @media (1330px <= width ) {
        margin-top: -370px;
      }

      @media (1400px <= width ) {
        margin-top: -370px;
      }

      @media (1440px <= width ) {
        margin-top: -350px;
      }

      @media (1500px <= width ) {
        margin-top: -250px;
      }

      @media (1700px <= width ) {
        margin-top: -150px;
      }

      @media (1850px <= width ) {
        margin-top: -100px;
      }

      @media (1910px <= width ) {
        margin-top: -50px;
      }

      @media (2100px <= width ) {
        margin-top: 100px;
      }

      @media (2270px <= width ) {
        margin-top: 200px;
      }

      @media (2400px <= width ) {
        margin-top: 300px;
      }

      @media (2500px <= width ) {
        margin-top: 400px;
      }

      @media (2800px <= width ) {
        margin-top: 300px;
      } 
    }

    h2 {
        width: fit-content;
        font-size: var(--24px);
        color: #ffffff;
        text-align: center;
        margin: 0 auto 1.5em;
        padding: 0 20px 10px;
        position: relative;

        @media (48.0625rem <= width ) {
          font-size: var(--32px);
          margin: 0 auto;
          margin: 0 auto 1em;
        }

        @media (74.375rem <= width ) {/* 1190px */
          margin: 0 auto 1.5em;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            border: 2px solid #fff;
            border-radius: 0 0 15px 15px;
            mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
        }

        &::before {
            content: "";
            position: absolute;
            bottom: -13px;
            left: 50%;
            width: 2px;
            height: 23px;
            background: #fff;
            transform: rotate(45deg);
        }
    }

		.sec_curve_caption {
			color: #ffffff;
			font-size: var(--14px);
			text-align: center;
      margin-bottom: 2.5em;

      @media (27.5rem <= width ) {/* 440px */
        margin-bottom: 70px;
      }

      @media (48.0625rem <= width ) {
        font-size: var(--18px);
        margin-bottom: initial;
        margin-bottom: 0;
      }

      @media (74.375rem <= width ) {/* 1190px */
        margin-bottom: 2.5em;
      }
		}

		.sec_curve_box_each {
			max-width: 1000px;
			margin: auto;
			position: relative;

      @media (48.0625rem <= width ) {
        transform: scale(0.9);
      }

      @media (74.375rem <= width ) {/* 1190px */
        transform: scale(1);
      }
		}

		.sec_curve_list {
			max-width: 740px;
      width: 85%;
      margin: auto;
			display: grid;
			grid-template-columns: 1fr;
			background: #ffffff;
			border-radius: 50px;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
			padding: 35px 30px 30px 30px;

      @media (48.0625rem <= width ) {
        grid-template-columns: 20% 78%;
			  column-gap: 2%;
        padding: 30px 4% 30px 2%;
        width: initial;
        margin: initial;
      }

      li {
        position: relative;
      }

			img {
        width: 60px;
        position: absolute;
        top: -55px;
        left: -40px;

        @media (48.0625rem <= width ) {
          width: initial;
          top: -40px;
          left: initial;
        }
			}
		}

		.sec_curve_list_mid {
			max-width: 740px;
      width: 85%;
      margin: auto;
			display: flex;
      flex-direction: column-reverse;
			background: #ffffff;
			border-radius: 50px;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
      padding: 35px 30px 30px 30px;

      @media (25rem <= width ) {/* 400px */
        
      }

      @media (48.0625rem <= width ) {
        display: grid;
        flex-direction: initial;
        grid-template-columns: 78% 20%;
			  column-gap: 2%;
        padding: 30px 2% 30px 4%;
        width: initial;
        margin: initial;
        margin-left: auto;
      }

      li {
        position: relative;
      }

			img {
				width: 60px;
        position: absolute;
        top: -65px;
        right: -40px;

        @media (48.0625rem <= width ) {
          width: initial;
          top: -40px;
          right: initial;
        }
			}
		}

		.mb_40 {
			margin-bottom: 40px;

      @media (510px <= width ) {
        margin-bottom: 40px;
      }

      @media (48.0625rem <= width ) {
        margin-bottom: 40px;
      }
		}

    .mb_40_ {

      @media (48.0625rem <= width ) {
        margin-bottom: 40px;
      }

      @media (1200px <= width ) {
        margin-bottom: initial;
      }
		}

		h3 {
			font-size: var(--22px);
			color: #0e4b78;
			font-weight: bold;
      text-align: center;
			border-bottom: dotted 3px #0e4b78;
			padding-bottom: 10px;
			margin-bottom: 20px;

      @media (48.0625rem <= width ) {
        grid-template-columns: 20% 78%;
			  column-gap: 2%;
        text-align: initial;
        border-bottom: dotted 1px #0e4b78;
      }
		}

		.sec_curve_desc {
			font-size: var(--14px);
			color: #222222;
		}
}

.sec_curve_img {
  display: none;
    text-align: center;
    margin-top: -1460px;

    @media (24.375rem <= width ) {/* 390px */
      margin-top: -1480px;
    }

    @media (415px <= width ) {
      margin-top: -1430px;
    }

    @media (440px <= width ) {
      margin-top: -1440px;
    }

    @media (455px <= width ) {
      margin-top: -1470px;
    }

    @media (530px <= width ) {
      margin-top: -1470px;
    }

    @media (537px <= width ) {
      margin-top: -1450px;
    }

    @media (550px <= width ) {
      margin-top: -1480px;
    }

    @media (580px <= width ) {
      margin-top: -1460px;
    }

    @media (610px <= width ) {
      margin-top: -1480px;
    }

    @media (670px <= width ) {
      margin-top: -1500px;
    }

    @media (700px <= width ) {
      margin-top: -1520px;
    }

    @media (48.0625rem <= width ) {
      margin-top: -1370px;
      display: block;
    }

    @media (1170px <= width ) {
      margin-top: -1420px;
    }

    @media (1330px <= width ) {
      margin-top: -1520px;
    }

    @media (1500px <= width ) {
      margin-top: -1650px;
    }

    @media (1700px <= width ) {
      margin-top: -1700px;
    }

    @media (1900px <= width ) {
      margin-top: -1750px;
    }

    @media (2100px <= width ) {
      margin-top: -1950px;
    }

    @media (2200px <= width ) {
      margin-top: -2050px;
    }

    @media (2400px <= width ) {
      margin-top: -2150px;
    }
}

.sec_curve_img img{
    width: 100%;
    margin-bottom: -33px;

    @media (2100px <= width ) {
      margin-bottom: -20px;
    }
}


/*　タレントマネジメントで実現できること
--------------------------------------------------------*/
.content_happen {
  background: linear-gradient(180deg, rgba(253, 248, 250, 0.6) 0%, rgba(255, 255, 255, 1) 50%);
  margin-top: -10vw;

  @media (769px <= width ) {
    background: none;
    margin-top: initial;
  }
}

.sec_happen {
	background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_jitugen_01@2x.png?auto=format);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top 100px center;
  position: relative;
  /* top: -90px; */
  padding-top: -10vw;
  z-index: 10;

  /* @media (480px <= width ) {
    top: -170px;
  }

  @media (510px <= width ) {
    top: -100px;
  }

  @media (550px <= width ) {
    top: -170px;
  }

  @media (600px <= width ) {
    top: -100px;
  }

  @media (650px <= width ) {
    top: -170px;
  } */

  @media (48.0625rem <= width ) {
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/bg/bg_jitugen_01.png?auto=format);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    top: 70px;
  }

  @media (1590px <= width ) {
    padding-bottom: 80px;
  }

  @media (1790px <= width ) {
    background-position: top center;
  }

  @media (1910px <= width ) {
    background-size: contain;
  }

	.sec_happen_h2 {
        width: fit-content;
        font-size: var(--24px);
        color: #0e4b78;
        text-align: center;
        margin: 0 auto 1.5em;
        padding: 0 20px 10px;
        position: relative;

        @media (48.0625rem <= width ) {
          font-size: var(--32px);
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            border: 2px solid #0e4b78;
            border-radius: 0 0 15px 15px;
            mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
        }

        &::before {
            content: "";
            position: absolute;
            bottom: -13px;
            left: 50%;
            width: 2px;
            height: 23px;
            background: #0e4b78;
            transform: rotate(45deg);
        }
    }

		.sec_happen_caption {
			color: #222222;
			font-size: var(--14px);
			text-align: center;
			line-height: 1.8em;
			margin-bottom: 3em;

      @media (48.0625rem <= width ) {
        font-size: var(--18px);
        margin-bottom: 4em;
      }
		}
}

/* ===== アコーディオン ===== */
.accordion-container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 4em;
  overflow: hidden;
  border: none;

  @media (48.0625rem <= width ) {
    width: 100%;
  }
}

.accordion-box {
	display: grid;
	grid-template-columns: 1fr;
	border: 2px solid #104e82;
  border-radius: 20px;
  background: #ffffff;
  margin-bottom: 15px;

  @media (48.0625rem <= width ) {
    grid-template-columns: 20% 80%;
    margin-bottom: 25px;
  }
}

.accordion-box_question {
	display: grid;
	grid-template-columns: 10% 90%;
  border-radius: 15px;
  background: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* *共通 */
.accordion-item {
}

.accordion-item:last-child {
  border-bottom: none;
}

/* ヘッダーボタン *共通 */
.accordion-header {
  height: 70px;
  text-align: left;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #104e82;
  font-size: var(--16px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
	background: transparent;
}

.accordion-header-adjust-01 {/* 調整 */
  width: 80%;
  margin: -40px 0 0 auto;

  @media (48.0625rem <= width ) {
    width: 100%;
    margin: initial;
  }
}

.accordion-header-adjust-02 {/* 調整 */
  width: 100%;
  margin-left: 12px;
  padding-right: 40px;

  @media (400px <= width ) {
    padding-right: 30px;
  }

  @media (48.0625rem <= width ) {
    margin-left: initial;
    padding-right: initial;
  }
}

.accordion-header:hover {
  /* background-color: #ffffff; */
}

.accordion-header:focus {
  /* outline: 2px solid #104e82; */
  outline-offset: -2px;
}

/* 矢印アイコン */
.arrow,
.arrow-02 {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid #104e82;
  border-bottom: 2px solid #104e82;
  transform: rotate(45deg);
  transition: transform 0.4s ease;
  flex-shrink: 0;
	/* margin-right: 30px; */
}

.arrow {
	margin-right: 30px;
}

.arrow-02 {
  position: relative;
	right: -5px;

  @media (500px <= width ) {
    right: 30px;
  }
}

/* 開いている時の矢印 */
.accordion-item.is-open .arrow,
.accordion-item.is-open .arrow-02 {
  transform: rotate(-135deg);
}

/* コンテンツエリア *共通 */
.accordion-content {
  box-sizing: border-box;
  padding-left: 20px;

  @media (48.0625rem <= width ) {
    padding-left: initial;
  }
}

.accordion-content_list {
	display: grid;
	grid-template-columns: 1fr;
	border-top: dotted 3px #104e82;
	margin-right: 25px;

  @media (48.0625rem <= width ) {
    grid-template-columns: 60% 37%;
	  column-gap: 3%;
    border-top: dotted 1px #104e82;
  }

	li {

    @media (48.0625rem <= width ) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

		&:first-child{
			font-size: var(--14px);
			line-height: 1.6;
			color: #222222;
			padding: 20px 0 30px;
		}

    &:last-child{
      display: none;

      @media (48.0625rem <= width ) {
        display: block;
      }
		}
	}
}

/* 文章の画像回り込み＋画像を右下に配置 */
.bottom-float-wrapper {
  display: block !important;
  padding: 20px;
  background: #fff;
  /* overflow: hidden; は一旦外すか、clear属性をしっかり使う */

  /* iPhone対策：擬似要素で「右上」に空白を作る */
  &::before {
    content: "";
    display: block;
    float: right; /* 右に浮かせる */
    width: 1px;   /* ほとんど見えない幅 */
    height: 100px; /* ここが画像の上にくる文章の高さ */
    @media (48.0625rem <= width ) {
      display: none;
    }
  }

  /* 回り込み解除 */
  &::after {
    content: "";
    display: block;
    clear: both;
  }

  @media (48.0625rem <= width ) {
    display: initial !important;
    padding: initial;
    background: initial;
  }
}

.float-img-bottom {
  /* display: block; は float と相性が悪い場合があるので注意 */
  float: right; 
  clear: right; /* ★重要：上の::before(空白)の下に回り込ませる */
  width: 100px;
  height: auto;
  margin-left: 15px;
  margin-bottom: 5px; /* 下に少し余白 */
  
  /* margin-top と shape-outside は削除（::beforeが代わりをします） */

  @media (48.0625rem <= width ) {
    display: none;
  }
}

.bottom-float-wrapper p {
  display: block; /* Safariでは inline より block の方が回り込みが安定します */
  font-size: var(--14px);
  line-height: 1.6;
  margin: 0;

  @media (48.0625rem <= width ) {
    display: initial;
  }
}

.accordion-number_01,
.accordion-number_02,
.accordion-number_03,
.accordion-number_04,
.accordion-number_05 {
  width: 14%;
  font-size: var(--28px);
  font-weight: bold;
  color: transparent;
	position: relative;
  top: 10px;
  left: 6%;

  @media (48.0625rem <= width ) {
    width: initial;
    font-size: var(--40px);
    padding-left: 25px;
    top: 4px;
    left: initial;
  }
}

.accordion-number_01 {
  -webkit-text-stroke: 2px #cf2357;
}

.accordion-number_02 {
  -webkit-text-stroke: 2px #f39800;
}

.accordion-number_03 {
  -webkit-text-stroke: 2px #97c73b;
}

.accordion-number_04 {
	color: #ffffff; 
  -webkit-text-stroke: 4px #28a7e1;
  paint-order: stroke fill;
}

.accordion-number_05 {
  -webkit-text-stroke: 2px #aa529b;
}

.accordion-number_Q {
  font-size: var(--30px);
  font-weight: bold;
  color: #0e4b78;
  padding-left: 15px;
  padding-top: 6px;

  @media (48.0625rem <= width ) {
    padding-left: 25px;
  }
}

.accordion-number_A {
  font-size: var(--30px);
  font-weight: bold;
  color: #d4215f;
  position: absolute;
  top: 2.5em;
  left: 25px;
}

.accordion-content_desc {
  font-size: var(--16px);
  color: #454545;
	padding: 15px 0 30px;
  margin-right: 30px;
  border-top: dotted 3px #104e82;

  @media (48.0625rem <= width ) {
    padding: 15px 20px 30px 0;
    border-top: dotted 1px #104e82;
  }
}


/*　タレントマネジメントを行う際の注意点
--------------------------------------------------------*/
.inner_warning {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 4em;
    padding: 20px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    position: relative;

    @media (48.0625rem <= width ) {
      padding: 60px;
    }

    img {
      width: 65px;
      position: absolute;
      top: -20px;
      left: -1em;

      @media (48.0625rem <= width ) {
        width: initial;
        left: 4em;
      }
    }

	.inner_warning_h2 {
        width: fit-content;
        font-size: var(--24px);
        color: #0e4b78;
        text-align: center;
        margin: 0 auto 1em;
        padding-bottom: 10px;
        border-bottom: solid 2px #ea6390;

        @media (48.0625rem <= width ) {
          margin: 0 auto 2em;
        }
    }

    .inner_warning_list {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 1em;

        @media (48.0625rem <= width ) {
          grid-template-columns: 28% 68%;
          column-gap: 4%;
          margin-bottom: initial;
        }

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1em 0;

            @media (48.0625rem <= width ) {
              padding: 2em 0;
            }

            h3 {
                width: 100%;
                max-width: 400px;
                height: 80px;
                color: #fff;
                font-weight: bold;
                background: #1366a1;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                @media (400px <= width ) {
                  font-size: var(--18px);
                }

                @media (48.0625rem <= width ) {
                  height: 134px;
                }

                &::before,
                &::after {
                  content: "";
                  display: inline-block;
                  position: absolute;
                }

                &::before {
                  width: 22px;
                  height: 22px;
                  border-radius: 50px;
                  background: #ffffff;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 10px;

                  @media (420px <= width ) {
                    left: 20px;
                  }
                }

                &::after {
                  width: 10px;
                  height: 6px;
                  border-top: solid 2px #1366a1;
                  border-right: solid 2px #1366a1;
                  top: 49%;
                  transform: translateY(-50%) rotate(135deg);
                  left: 16px;

                  @media (420px <= width ) {
                    left: 26px;
                  }
                }
            }

            &:last-child {
              font-size: var(--16px);
              color: #222222;
              line-height: 1.6em;
            }
          }
    }

    .border_btn_gray {
      border-bottom: dotted 3px #e4e6e7;

      @media (48.0625rem <= width ) {
        border-bottom: dotted 1px #e4e6e7;
      }
    }
}


/*　自社に最適なタレントマネジメントを実践するために
--------------------------------------------------------*/
.sec_optimal {
  text-align: center;
  padding: 30px 0 80px;

  @media (440px <= width ) {
    padding: 170px 0 150px;
  }

  @media (550px <= width ) {
    padding: 320px 0 150px;
  }

  @media (48.0625rem <= width ) {
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/bg/bg_jitugen_02.png?auto=format);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 100px 0 80px;
  }

  @media (1790px <= width ) {
    padding: 150px 0 80px;
  }

	.inner_optimal {
		max-width: 900px;
		margin: 0 auto 4em;
		position: relative;
    
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_optimal@2x.png?auto=format);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;

    @media (440px <= width ) {
      margin: -50px auto 4em;
      top: -100px;
    }

    @media (550px <= width ) {
      margin: -200px auto 4em;
    }

    @media (48.0625rem <= width ) {
      margin: 0 auto 4em;
      top: initial;

      background: none;
      background-size: initial;
      background-repeat: initial;
      background-position: initial;
    }

		.inner_optimal_female {
      width: 30px;
			position: absolute;
			top: 0;
			right: 2%;

      @media (768px <= width ) {
        width: initial;
			  right: 0;
      }
		}

    .inner_optimal_male {
      width: 40px;
			position: absolute;
			top: 40px;
			left: 2%;
		}
	}

	.sec_optimal_h2 {
        width: fit-content;
        font-size: var(--20px);
        color: #fff;
        text-align: center;
        margin: 0 auto 2em;
        padding: 15px 30px;
        position: relative;
        background: #2ea7e0;
        border-radius: 50px;

        position: relative;
        top: -30px;

        @media (48.0625rem <= width ) {
          font-size: var(--28px);
          border-bottom: dotted 1px #e4e6e7;
          top: initial;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: -7px;
            left: 0.5%;
            width: 99%;
            height: 70px;
            border: 2px solid #2ea7e0;
            border-radius: 0 0 50px 50px;
            mask-image: linear-gradient(to bottom, transparent 50%, #2ea7e0 50%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #2ea7e0 50%);
        }

        &::before {
            content: "";
            position: absolute;
            bottom: -24px;
            left: 50%;
            width: 2px;
            height: 40px;
            background: #2ea7e0;
            transform: rotate(45deg);
        }
    }

    .sec_optimal_caption {
        color: #0e4b78;
        font-size: var(--14px);
        text-align: center;
        line-height: 1.8em;
        margin-bottom: 1.8em;

        @media (48.0625rem <= width ) {
          font-size: var(--18px);
        }
    }

		.sec_optimal_h3 {
			color: #ea6390;
			font-size: var(--24px);
      width: fit-content;
			margin: 0 auto 1.5em;
      position: relative;
      padding: 0 20px;

      @media (48.0625rem <= width ) {
        font-size: var(--28px);
      }

      &::before,
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        width: 1px;
        height: 100%;
        background-color: #ea6390;
        transform: translateY(-50%) rotate(145deg);
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
        transform: translateY(-50%) rotate(-145deg);
      }
		}

    /*　タレントマネジメントシステムの決定版
    --------------------------------------------------------*/
		.inner_management_system {
			max-width: 900px;
      width: 90%;
			margin: 0 auto 4em;
			padding: 40px 20px;
			border-radius: 50px;
			box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
			position: relative;
      background: 
      linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.8) 70%, 
        #ffffff 100%
      ),
      linear-gradient(125deg, 
        #ffffff 35%,   /* この数値を小さくするほど、右の色が左に食い込みます */
        #f5f9fa 35%
      );
      background-size: cover;
      z-index: 2;

      @media (48.0625rem <= width ) {
        padding: 60px;
        background: 
        linear-gradient(to bottom, 
          rgba(255, 255, 255, 0) 0%, 
          rgba(255, 255, 255, 0.8) 70%, 
          #ffffff 100%
        ),
        linear-gradient(135deg, 
          #ffffff 45%,   /* この数値を小さくするほど、右の色が左に食い込みます */
          #f5f9fa 35%
        );
      }

			.inner_management_system_male {
				position: absolute;
				top: -90px;
				left: 30px;
			}

			.inner_management_system_tp_logo {
				max-width: 350px;
        width: 70%;
				margin: 0 auto 1.5em;

        @media (48.0625rem <= width ) {
          margin: 0 auto 2.5em;
        }
			}

			.inner_management_system_desc {
				color: #222222;
        font-size: var(--14px);
				line-height: 1.8em;
        margin-bottom: 2em;

        @media (48.0625rem <= width ) {
          font-size: var(--16px);
          margin-bottom: 4em;
        }
			}

			.inner_management_system_tp_illust {
				max-width: 600px;
				margin: 0 auto;
			}
		}

	/*　タレントパレットの特徴
	--------------------------------------------------------*/
	.inner_feature {
			max-width: 1200px;
			margin: -300px auto 0;
			padding: 300px 20px 250px;

      background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_feature@2x.png?auto=format);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      position: relative;
      z-index: 1;

      @media (440px <= width ) {
        margin: -400px auto 0;
      }

      @media (48.0625rem <= width ) {
        padding: 60px 0 250px;
        margin: 0 auto 4em;

        background: none;
        background-size: initial;
        background-repeat: initial;
        background-position: initial;
      }

      @media (1910px <= width ) {
        padding: 200px 0 250px;
      }

      @media (2100px <= width ) {
        padding: 400px 0 250px;
      }

      @media (2800px <= width ) {
        padding: 1200px 0 250px;
      }

		.inner_feature_h2 {
					width: fit-content;
					font-size: var(--24px);
					color: #fff;
					text-align: center;
					margin: 0 auto 2.5em;
					padding: 0 20px 10px;
					position: relative;

          @media (48.0625rem <= width ) {
            font-size: var(--32px);
          }

					&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 30px;
							border: 2px solid #fff;
							border-radius: 0 0 15px 15px;
							mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
							-webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
					}

					&::before {
							content: "";
							position: absolute;
							bottom: -13px;
							left: 50%;
							width: 2px;
							height: 23px;
							background: #fff;
							transform: rotate(45deg);
					}
			}

			.inner_feature_modal {
				display: grid;
				grid-template-columns: 1fr;
				row-gap: 1.5em;
        margin-bottom: 3em;

        @media (48.0625rem <= width ) {
          grid-template-columns: 30% 30% 30%;
				  column-gap: 5%;
          row-gap: initial;
          margin-bottom: 7em;
        }

				li {
					padding: 30px 0 0 0;
					background: #fff;
					border-radius: 20px;
					box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);

					&:nth-of-type(2) {
						position: relative;

            @media (48.0625rem <= width ) {
              top: 2em;
            }
					}

					h3 {
						font-size: var(--18px);
						color: #0e4b78;
						margin-bottom: 1.3em;
						padding: 0 6%;
					}

					.inner_feature_img {
						border-bottom: dotted 1px #dee0e2;
						padding-bottom: 25px;

						img {
							height: 150px;
						}
					}

					.inner_feature_btn {

						a {
							padding: 15px 0;
							display: block;

              span {
                font-size: var(--16px);
                color: #1366a1;
                font-weight: bold;
                padding-right: 25px;
                position: relative;

                &::before,
                &::after {
                  content: "";
                  display: inline-block;
                  position: absolute;
                  background: #1366a1;
                  width: 3px;
                  height: 15px;
                  top: 5px;
                  right: 0;
                }

                &::after {
                  transform: rotate(90deg);
                }
              }
						}
					}
				}
			}
	}
}


/*　CTA
--------------------------------------------------------*/
.inner_feature_cta {
  max-width: 800px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 35px;

  @media (450px <= width ) {
    max-width: 400px;
    width: 80%;
  }

  @media (48.0625rem <= width ) {
    max-width: 800px;
    width: initial;
    grid-template-columns: 300px 300px;
    justify-content: space-around;
    row-gap: initial;
  }

  h4 {
    font-size: var(--16px);
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 0.5em;
  }

  .btn_documents,
  .btn_documents_pnk {
    width: 100%;
    text-align: center;
    display: inline-block;
    padding: 20px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: var(--14px);
    font-weight: bold;
    line-height: 1.2em;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    position: relative;
    font-size: var(--14px);
    box-shadow: 0 4px 0 0 #a11a49;
  }

  .btn_documents::before,
  .btn_documents_pnk::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: absolute;
    right: 14px;
  }

  .btn_documents:hover,
  .btn_documents_pnk:hover {
    box-shadow: none;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  .btn_documents::after,
  .btn_documents_pnk::after {
    content: "";
    width: 6px;
    height: 6px;
    border: 0;
    position: absolute;
    right: 23px;
    transform: rotate(45deg);
  }

  /* white */
  .btn_documents {
    background: #ffffff;
    color: #CE1E54;
    border: solid 1px #CE1E54;
  }

  @media (48.0625rem <= width ) {
    .btn_documents {
      font-size: var(--16px);
    }
  }

  .btn_documents::before {
    background: #CE1E54;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn_documents::after {
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    top: 44%;
  }

  /* pink */
  .btn_documents_pnk {
    background: rgb(226,108,144);
    background: linear-gradient(90deg, rgba(226,108,144,1) 0%, rgba(206,33,86,1) 100%);
    color: #ffffff;
  }

  @media (48.0625rem <= width ) {
    .btn_documents_pnk {
      font-size: var(--16px);
    }
  }

  .btn_documents_pnk::before {
    background: #fff;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn_documents_pnk::after {
    border-top: solid 2px #CE1E54;
    border-right: solid 2px #CE1E54;
    top: 44%;
  }
}

/* モーダル全体の重なり設定 */
.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 500px;
  padding: 40px;
  border-radius: 20px;
  transform: translateY(30px);
  transition: transform 0.4s ease;

  h3 {
    font-size: var(--18px);
    color: #0e4b78;
    margin-bottom: 0.8em;
  }

  p {
    font-size: var(--15px);
    color: #222222;
    margin-bottom: 1.2em;
  }

}

.modal-overlay.is-open .modal-content {
  transform: translateY(0);
}

/* 右上にはみ出すピンクの閉じるボタン */
.modal-close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  background-color: #ff6eb4;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 10;
}

/* 白色のバツ印 */
.modal-close-btn span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.modal-close-btn span::before,
.modal-close-btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 2px;
  background: #fff;
}

.modal-close-btn span::before { transform: rotate(45deg); }
.modal-close-btn span::after { transform: rotate(-45deg); }


/*　導入実績
--------------------------------------------------------*/
.sec_record {
	background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_case@2x.png?auto=format);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
  text-align: center;
  position: relative;
  z-index: 10;
  top: -250px;
  padding: 100px 2% 80px;
  margin-bottom: -4em;
  overflow: hidden;

  @media (480px <= width ) {
    padding: 100px 0 80px;
  }

  @media (600px <= width ) {
    padding: 200px 0 80px;
  }

  @media (48.0625rem <= width ) {
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/bg/bg_case.png?auto=format);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    top: -340px;
  }

  .sec_record_img_pc {
    width: 100px;
    position: absolute;
    top: -5px;
    right: 16%;

    @media (48.0625rem <= width ) {
      width: 200px;
      top: 10px;
    }
  }

  .sec_record_inner {
    padding: 0;
  }

  .sec_record_h2 {
      width: fit-content;
      font-size: var(--24px);
      color: #0e4b78;
      text-align: center;
      margin: 0 auto 1.5em;
      padding: 0 20px 10px;
      position: relative;

      @media (48.0625rem <= width ) {
        font-size: var(--32px);
      }

      &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30px;
          border: 2px solid #0e4b78;
          border-radius: 0 0 15px 15px;
          mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
          -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
      }

      &::before {
          content: "";
          position: absolute;
          bottom: -13px;
          left: 50%;
          width: 2px;
          height: 23px;
          background: #0e4b78;
          transform: rotate(45deg);
      }
  }

  .sec_record_caption {
    font-size: var(--15px);
    color: #454545;
    text-align: center;
    margin-bottom: 2em;
  }

  @media (48.0625rem <= width ) {
    .sec_record_caption {
        font-size: var(--18px);
        margin-bottom: 2.85em;
    }
  }

  .sec_record_list {
    max-width: 330px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-bottom: 1em;
  }

  @media (48.0625rem <= width ) {
    .sec_record_list {
      max-width: 780px;
      grid-template-columns: 48% 42%;
      column-gap: 10%;
      row-gap: initial;
      margin-bottom: 0.63em;
    }
  }

  .sec_record_list li {
    text-align: center;
    position: relative;
  }

  .sec_record_list li:first-child::before {
    content: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/parts/parts_collora_left@2x.png?auto=format);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -72px;
    left: 0;
    transform: scale(0.4);
  }

  @media (48.0625rem <= width ) {
    .sec_record_list li:first-child::before {
      top: -65px;
      left: 0;
      transform: scale(0.5);
    }
  }

  .sec_record_list li:first-child::after {
    content: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/parts/parts_collora_right@2x.png?auto=format);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -72px;
    right: -5px;
    transform: scale(0.4);
  }

  @media (48.0625rem <= width ) {
    .sec_record_list li:first-child::after {
      top: -65px;
      right: 0;
      transform: scale(0.5);
    }
  }

  .sec_record_list li:last-child::before {
    content: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/parts/parts_collora_left@2x.png?auto=format);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -72px;
    left: 0;
    transform: scale(0.4);
  }

  @media (48.0625rem <= width ) {
    .sec_record_list li:last-child::before {
      top: -65px;
      left: 0;
      transform: scale(0.5);
    }
  }

  .sec_record_list li:last-child::after {
    content: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/parts/parts_collora_right@2x.png?auto=format);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -72px;
    right: 0;
    transform: scale(0.4);
  }

  @media (48.0625rem <= width ) {
    .sec_record_list li:last-child::after {
      top: -65px;
      right: 0;
      transform: scale(0.5);
    }
  }

  .sec_record_ttl_number {
    font-size: var(--20px);
    color: #222222;
    font-weight: bold;
  }

  @media (31.25rem <= width ) {/* 500px */
    .sec_record_ttl_number {
      /* font-size: var(--18px); */
    }
  }

  @media (48.0625rem <= width ) {
    .sec_record_ttl_number {
      font-size: var(--22px);
    }
  }

  .sec_record_p_ratio,
  .sec_record_p_ratio_blu {
    font-size: var(--42px);
    color: #1366A1;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
  }

  @media (31.25rem <= width ) {/* 500px */
    .sec_record_p_ratio,
    .sec_record_p_ratio_blu {
    font-size: var(--48px);
  }
  }

  @media (48.0625rem <= width ) {
      .sec_record_p_ratio,
      .sec_record_p_ratio_blu {
      font-size: var(--64px);
    }
  }

  .sec_record_p_ratio span {
    font-size: var(--20px);
    color: #222222;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;

  }

  @media (31.25rem <= width ) {/* 500px */
    .sec_record_p_ratio span {
      font-size: var(--18px);
    }
  }

  @media (48.0625rem <= width ) {
    .sec_record_p_ratio span {
      font-size: var(--24px);
    }
  }

  .txt_sm {
    font-size: var(--32px);
    color: #1366A1;
    font-weight: bold;
    position: relative;
  }

  @media (31.25rem <= width ) {/* 500px */
    .txt_sm {
      font-size: var(--36px);
    }
  }

  @media (48.0625rem <= width ) {
    .txt_sm {
      font-size: var(--48px);
    }
  }

  .txt_xs {
    font-size: var(--12px);
    color: #1366A1;
    font-weight: bold;
  }

  @media (31.25rem <= width ) {/* 500px */
    .txt_xs {
      font-size: var(--18px);
    }
  }

  @media (48.0625rem <= width ) {
    .txt_xs {
      font-size: var(--24px);
    }
  }

  .txt_asterisk {
    font-size: var(--10px);
    color: #1366A1;
    font-weight: bold;
    position: absolute;
    top: -1em;
    right: -10px;
  }

  @media (31.25rem <= width ) {/* 500px */
    .txt_asterisk {
      font-size: var(--12px);
      top: -1.6em;
      right: -14px;
    }
  }

  @media (48.0625rem <= width ) {
    .txt_asterisk {
      top: -2em;
      right: -1em;
    }
  }

  .sec_record_note {
    font-size: var(--12px);
    color: #454545;
    text-align: center;
    margin-bottom: 3em;

    @media (48.0625rem <= width ) {
      margin-bottom: 4em;
    }
  }

}


/* slick */
.content-center-slide {
  width: 100%;
  position: relative;
  margin-bottom: 3em;
}

.content-center-slide .slider img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

p.company-name {
  font-size: 15px;
}

p.tag-function {
  font-size: 14px;
}

.margin-RL {
  margin: 0 10px;
  transition: 0.5s;

  background: #fff;
  border-radius: 20px;
  transition: opacity 0.3s, transform 0.3s;
  overflow: hidden;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);

  a {
    display: block;
    width: 100%;
  }
}

/* .margin-RL:hover {
  transform: scale(0.9, 0.9);
} */

.slick-item {
  text-align: left;
  padding: 20px 15px;
  background: #fff;
}

.slick-prev {
  width: 28px !important;
  height: 52px !important;
  margin-left: -10px;

  border: solid 2px #1366a1;
  border-radius: 50%;
  background: #ffffff;
  color: red;
}

.slick-next {
  width: 28px !important;
  height: 52px !important;
  margin-right: -10px;
}

/* 詳しく見るボタン */
.btn_slider_detail {
  display: none;
}


@media screen and (max-width: 769px) {
  .content-center-slide {
    padding: 0;
    margin-bottom: 2em;
  }
  .margin-RL {
    margin: 0 10px;
  }
  .slick-item {
    margin-bottom: 40px;
  }
  p.company-name {
    font-size: 3vw;
  }
  p.tag-function {
    font-size: 2.8vw;
    line-height: 1.4em;
  }

  /* 詳しく見るボタン */
  .btn_slider_detail {
    margin: 30px auto 0;
    max-width: 400px;
    text-align: center;
    display: block;
    background: #222222;
    box-sizing: border-box;
    border-radius: 40px;
    border: 2px solid #222222;
    color: #fff;
    font-weight: 700;
    position: relative;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .btn_slider_detail span {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 2.8vw;
    top: -2px;
    transition: all 0.3s ease-in-out 0s;
  }

  .btn_slider_detail::after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
    position: absolute;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
  }
}

@media screen and (max-width: 415px) {
  .btn_slider_detail {
    margin: 20px auto 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* __________________________各カードの装飾 */
.slick-item {
  text-align: initial;
  padding: 15px 0 25px;

  h3 {
    font-size: var(--15px);
    color: #1366a1;
    padding: 0 4%;
    margin-bottom: 1em;
  }

  @media (48.0625rem <= width ) {
    h3 {
      font-size: var(--17px);
      padding: 0 15px;
      margin-bottom: 0.7em;
    }
  }

  .company-name {
    font-size: var(--14px);
    color: #222222;
    font-weight: bold;
    padding: 0 4%;
    margin-bottom: 0.6em;
  }

  @media (48.0625rem <= width ) {
    .company-name {
      font-size: var(--16px);
      padding: 0 17px;
      margin-bottom: 0.6em;
    }
  }

  .slick-item_list {
    display: grid;
    grid-template-columns: 50% 1fr;
    justify-content: space-between;
    padding: 0 15px;

    li {
      &:first-child {
        border-right: solid 1px #e5e5e5;
      }
      &:last-child {
        padding-left: 20px;
        position: relative;

        &::before {
          content: "";
          width: 20px;
          height: 20px;
          background: #1366A1;
          border-radius: 50%;
          position: absolute;
          bottom: -2px;
          right: 0;
        }

        &::after {
          content: "";
          width: 6px;
          height: 6px;
          border: 0;
          border-top: solid 2px #ffffff;
          border-right: solid 2px #ffffff;
          position: absolute;
          bottom: 5px;
          right: 8px;
          transform: rotate(45deg);
        }
      }
    }
  }

  .cat_industry {
    font-size: var(--12px);
    color: #454545;
    padding-left: 15px;
    position: relative;
    display: block;

    &::before {
      content: url(https://tp-img.imgix.net/s/2024/pc/icon/icon_industry.svg);
      display: inline-block;
      width: 10px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .cat_num {
    font-size: var(--12px);
    color: #454545;
    padding-left: 15px;
    position: relative;

    &::before {
      content: url(https://tp-img.imgix.net/s/2024/pc/icon/icon_human.svg);
      display: inline-block;
      width: 10px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.btn_documents_sky {

  h4 {
    color: #0e4b78;
    margin-bottom: 0.8em;
  }

  a {
    max-width: 340px;
    text-align: center;
    display: block;
    font-size: var(--18px);
    color: #ffffff;
    font-weight: bold;
    line-height: 1.2em;
    padding: 20px 32px;
    margin: auto;
    border-radius: 6px;
    text-decoration: none;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    position: relative;
    background: #5EB2FF;
    background: linear-gradient(90deg, rgba(94, 178, 255, 1) 0%, rgba(76, 147, 231, 1) 100%);
    box-shadow: 0 4px 0 0 #3c72b5;

    &::before {
      content: "";
      width: 22px;
      height: 22px;
      border-radius: 50%;
      position: absolute;
      right: 14px;
      background: #fff;
      top: 50%;
      transform: translateY(-50%);
    }

    &:hover {
      box-shadow: none;
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }

    &::after {
      content: "";
      width: 6px;
      height: 6px;
      border: 0;
      position: absolute;
      right: 23px;
      transform: rotate(45deg);
      border-top: solid 2px #3c72b5;
      border-right: solid 2px #3c72b5;
      top: 44%;
    }
  }
}


/* slick 親コンテナ */
.slick-controls-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 40px;

  @media (550px <= width ) {
    gap: 0 30px;
  }
}

/* 矢印ボタン共通の土台（円形） */
.slick-prev, .slick-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;  /* 円のサイズ */
  height: 44px !important;
  background: #fff !important; /* 背景色（白） */
  border: 2px solid #1366a1 !important; /* 線の色 */
  border-radius: 50%;
  cursor: pointer;
  position: static !important;
  transform: none !important;
  font-size: 0 !important; /* "Previous" などの文字を消す */
  line-height: 0;
  outline: none;
  transition: all 0.3s ease;
}

/* ホバー時の効果（お好みで） */
.slick-prev:hover, .slick-next:hover {
  background: #f5f5f5 !important;
  opacity: 0.7;
}

/* 矢印のアイコン部分（自作） */
.slick-prev::before, .slick-next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #1366a1;  /* 矢印の太さと色 */
  border-right: 2px solid #1366a1;
  opacity: 1 !important;
}

/* 左矢印向き（135度回転） */
.slick-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px; /* 中心位置の微調整 */
}

/* 右矢印向き（45度回転） */
.slick-next::before {
  transform: rotate(45deg);
  margin-right: 4px; /* 中心位置の微調整 */
}

.slick-prev { order: 1; }
.slick-dots { order: 2; }
.slick-next { order: 3; }

/* ドットの親（ul） */
.slick-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 20px 0 0 13px !important;
  padding: 0 !important;
  position: static !important; /* 絶対配置を解除 */
  width: auto !important;
}

/* 各ドットの箱（li） */
.slick-dots li {
  position: relative;
  width: 1px;  /* クリック範囲を確保 */
  height: 10px;
  margin: 0;
  padding: 0;
}

/* ボタンそのもの（button） */
.slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  font-size: 0; /* 数字を消す（text-indentより安全） */
  line-height: 0;
  cursor: pointer;
  outline: none;
}

/* ドットの見た目（擬似要素） */
.slick-dots li button::before {
  content: ""; /* 文字ではなく「図形」として作る */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 真ん中に配置 */
  width: 12px!important; /* ドットの大きさ */
  height: 12px!important;
  background-color: #cccccc; /* デフォルトの色 */
  border-radius: 50%;
  transition: background-color 0.3s;
}

/* アクティブ時の色 */
.slick-dots li.slick-active button::before {
  background-color: #1366a1;
}


/*　導入までたったの4ステップ
--------------------------------------------------------*/
.sec_step {
  max-width: 1000px;
  width: 94%;
  margin: -180px auto 5em;

  @media (48.0625rem <= width ) {
    margin: -250px auto 5em;
  }

  .sec_step_h2 {
    width: fit-content;
    font-size: var(--24px);
    color: #0e4b78;
    text-align: center;
    margin: 0 auto 3em;
    padding: 0 20px 10px;
    position: relative;

    @media (48.0625rem <= width ) {
      font-size: var(--32px);
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      border: 2px solid #0e4b78;
      border-radius: 0 0 15px 15px;
      mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 50%);
    }

    &::before {
      content: "";
      position: absolute;
      bottom: -13px;
      left: 50%;
      width: 2px;
      height: 23px;
      background: #0e4b78;
      transform: rotate(45deg);
    }
  }

  .sec_step_list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1em;

    @media (48.0625rem <= width ) {
      grid-template-columns: 25% 25% 25% 25%;
      row-gap: initial;
      justify-content: space-around;
      margin-left: 20px;
    }
  }

  .sec_step_list_sub {
    display: grid;
    grid-template-columns: 30% 70%;
    margin-left: 10px;

    @media (420px <= width ) {
      margin-left: initial;
    }

    @media (460px <= width ) {
      margin-right: 4%;
    }

    @media (570px <= width ) {
      margin-right: 8%;
    }

    @media (48.0625rem <= width ) {
      grid-template-columns: 1fr;
    }

    li {
      text-align: center;
      display: flex;
      align-items: center;

      @media (48.0625rem <= width ) {
        display: initial;
        align-items: initial;
      }

      .sec_step_box_01,
      .sec_step_box_02,
      .sec_step_box_03,
      .sec_step_box_04 {
        width: 100px;
        height: 100px;
        margin: 0 -10% 0.8em auto;/* 重なり調整 */
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        @media (48.0625rem <= width ) {
          width: 150px;
          height: 150px;
          margin:0 auto 0.8em;
        }

        img {
          width: 50%;

          @media (48.0625rem <= width ) {
            width: 70%;
          }
        }

        &::before {
          display: inline-block;
          color: #ffffff;
          font-size: var(--18px);
          width: 45px;
          height: 45px;
          border-radius: 50px;
          padding-top: 15px;
          background: #e76b91;
          position: absolute;
          top: -0.5em;
          left: -0.7em;

          @media (48.0625rem <= width ) {
            font-size: var(--24px);
            width: 60px;
            height: 60px;
            padding-top: 18px;
          }
        }

        &::after {
          content: "step";
          display: inline-block;
          color: #ffffff;
          font-size: var(--12px);
          padding-top: 15px;
          position: absolute;
          top: -1.7em;
          left: -2px;

          @media (48.0625rem <= width ) {
            font-size: var(--14px);
            top: -1.5em;
            left: -1px;
          }
        }
      }

      .sec_step_box_01 {
        background: #2ea7e0;

        &::before {
          content: "01";
        }
      }

      .sec_step_box_02 {
        background: #1b91d1;

        &::before {
          content: "02";
        }
      }

      .sec_step_box_03 {
        background: #167cb7;

        &::before {
          content: "03";
        }
      }

      .sec_step_box_04 {
        background: #1366a1;

        &::before {
          content: "04";
        }
      }

      h3 {
        width: 100%;
        color: #222222;
        border: solid 2px #1b91d1;
        border-radius: 50px;
        padding: 15px 25px;
        margin-left: -10%;/* 重なり調整 */

        @media (48.0625rem <= width ) {
          border: none;
          border-radius: initial;
          padding: initial;
          margin-left: initial;
        }
      }

    }

    .sec_step_box_01_sub {
      position: relative;

        &::after {
          content: "";
          display: inline-block;
          width: 2px;
          height: 40px;
          position: absolute;
          top: 60px;
          left: 50%;
          transform: translateX(-50%);
          background: #2EA7E0;
          background: linear-gradient(180deg, rgba(46, 167, 224, 1) 0%, rgba(27, 145, 209, 1) 100%);

          @media (48.0625rem <= width ) {
            width: 110px;
            height: 2px;
            top: 42%;
            right: -190px;
            left: initial;
            background: linear-gradient(90deg, rgba(46, 167, 224, 1) 0%, rgba(27, 145, 209, 1) 100%);
          }
        }
    }

    .sec_step_box_02_sub {
      position: relative;

        &::after {
          content: "";
          display: inline-block;
          width: 2px;
          height: 40px;
          position: absolute;
          top: 60px;
          left: 50%;
          transform: translateX(-50%);
          background: #1B91D1;
          background: linear-gradient(180deg, rgba(27, 145, 209, 1) 0%, rgba(22, 124, 183, 1) 100%);

          @media (48.0625rem <= width ) {
            width: 110px;
            height: 2px;
            top: 42%;
            right: -190px;
            left: initial;
            background: linear-gradient(90deg, rgba(27, 145, 209, 1) 0%, rgba(22, 124, 183, 1) 100%);
          }
        }
    }

    .sec_step_box_03_sub {
      position: relative;

        &::after {
          content: "";
          display: inline-block;
          width: 2px;
          height: 40px;
          position: absolute;
          top: 63px;
          left: 50%;
          transform: translateX(-50%);
          background: #167CB7;
          background: linear-gradient(180deg, rgba(22, 124, 183, 1) 0%, rgba(19, 102, 161, 1) 100%);

          @media (48.0625rem <= width ) {
            width: 110px;
            height: 2px;
            top: 42%;
            right: -200px;
            left: initial;
            background: linear-gradient(90deg, rgba(22, 124, 183, 1) 0%, rgba(19, 102, 161, 1) 100%);
          }
        }
    }

  }
}


/*　CTA 資料もデモ体験も、まずはお気軽にご相談ください！
--------------------------------------------------------*/
.sec_cta {
  padding: 100px 0;
  background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/sp/bg/bg_cta_pnk@2x.png?auto=format) no-repeat center/cover;

  @media (48.0625rem <= width ) {
    background: url(https://tp-img.imgix.net/s/lp/what-is-talent-management/pc/bg/bg_cta_pnk.png?auto=format) no-repeat center/cover;
  }

  .sec_cta_inner {
    max-width: 1000px;
    width: 94%;
    margin: 0 auto;
    padding: 55px 40px 40px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  }

  .sec_cta_h2 {
    width: fit-content;
    font-size: var(--18px);
    color: #ffffff;
    text-align: center;
    margin: 0 auto -2em;
    padding: 10px 8% 15px;
    background: #1366a1;
    border-radius: 50px;
    position: relative;
    z-index: 10;

    @media (48.0625rem <= width ) {
      font-size: var(--22px);
      margin: 0 auto -1em;
      padding: 10px 25px 15px;
    }
  }

  .sec_cta_list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;

    @media (48.0625rem <= width ) {
      grid-template-columns: 25% 37.5% 37.5%;
      row-gap: initial;
    }

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;

      &:first-child {
        position: relative;
        margin-bottom: 1em;

        @media (48.0625rem <= width ) {
          border-right: solid 1px #d9d9d9;
          margin-bottom: initial;
        }

        &::before {
          content: "";
          display: inline-block;
          width: 80px;
          height: 3px;
          background: #d9d9d9;
          position: absolute;
          bottom: -30px;
          left: 50%;

          transform: translateX(-50%);
          @media (48.0625rem <= width ) {
            display: none;
          }
        }
      }

      img {
        max-width: 80%;

        @media (48.0625rem <= width ) {
          max-width: initial;
          max-height: 160px;
        }
      }
    }
  }

  .mb_10 {
    margin-bottom: 1em;
  }

  .btn_documents,
  .btn_documents_pnk {
    width: 80%;
    text-align: center;
    display: inline-block;
    padding: 20px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: var(--14px);
    font-weight: bold;
    line-height: 1.2em;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    position: relative;
    font-size: var(--14px);
    box-shadow: 0 4px 0 0 #a11a49;
  }

  .btn_documents::before,
  .btn_documents_pnk::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: absolute;
    right: 14px;
  }

  .btn_documents:hover,
  .btn_documents_pnk:hover {
    box-shadow: none;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  .btn_documents::after,
  .btn_documents_pnk::after {
    content: "";
    width: 6px;
    height: 6px;
    border: 0;
    position: absolute;
    right: 23px;
    transform: rotate(45deg);
  }

  /* white */
  .btn_documents {
    background: #ffffff;
    color: #CE1E54;
    border: solid 1px #CE1E54;
  }

  @media (48.0625rem <= width ) {
    .btn_documents {
      font-size: var(--16px);
    }
  }

  .btn_documents::before {
    background: #CE1E54;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn_documents::after {
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    top: 44%;
  }

  /* pink */
  .btn_documents_pnk {
    background: rgb(226,108,144);
    background: linear-gradient(90deg, rgba(226,108,144,1) 0%, rgba(206,33,86,1) 100%);
    color: #ffffff;
  }

  @media (48.0625rem <= width ) {
    .btn_documents_pnk {
      font-size: var(--16px);
    }
  }

  .btn_documents_pnk::before {
    background: #fff;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn_documents_pnk::after {
    border-top: solid 2px #CE1E54;
    border-right: solid 2px #CE1E54;
    top: 44%;
  }
}


/*　よくあるご質問
--------------------------------------------------------*/
.sec_question {
  padding: 80px 0 30px;
  background: #f0f3f6;

  .sec_question_inner {
    max-width: 1000px;
    width: 94%;
    margin: 0 auto;
  }

  .sec_question_h2 {
    font-size: var(--22px);
    color: #0e4b78;
    text-align: center;
    margin-bottom: 1.5em;

    @media (48.0625rem <= width ) {
      font-size: var(--32px);
    }
  }

  a {
    font-weight: bold;
    color: #0e4b78;

    &:hover {
      text-decoration: underline;
    }
  }
}





/*　Footer 未使用
--------------------------------------------------------*/
.box-footer-01 {
    text-align: center;
    padding: 30px 0;
    letter-spacing: 0;
    background: #2A5370;
}

@media (48.0625rem <= width ) {
    .box-footer-01 {
        letter-spacing: 0.1em;
    }
}

ul.footer_link {
    max-width: 400px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: center;
}

ul.footer_link li:first-child a {
    padding-right: 10px;
    border-right: solid 1px #ffffff;
}

ul.footer_link li:last-child {
    padding-left: 10px;
}

ul.footer_link a {
    font-size: var(--12px);
    color: #ffffff;
}

@media (48.0625rem <= width ) {
    ul.footer_link a {
        font-size: var(--14px);
    }
}

ul.footer_link a:hover {
    text-decoration: underline;
}

.footer-copyright {
    font-size: var(--10px);
    color: #ffffff;
    opacity: 0.4;
}

@media (48.0625rem <= width ) {
    .footer-copyright {
        font-size: var(--12px);
    }
}