/* 目次

1. 全体のレイアウト
2. 紹介文 
3. 説明
4. スタッフ紹介
5. 保有資格
9. メディアクエリ


目次ここまで */

main {
  width: 100%;
  max-width: var(--conten-width);
  margin: var(--margin-5) auto;
  padding: 0 8rem;
}

@media (width < 950px) {
  main {
    width: 90%;
    padding: 0;
    margin: var(--margin-2) auto;
  }
}
.w80 {
  width: 80%;
  margin: 0 auto;
}

/* 紹介文 */
.business_text {
  color: #959da4;
  margin: 0 auto var(--margin-5);
  line-height: 2rem;
}

.business_text-sub {
  margin-bottom: var(--margin-5);
}

/* 説明 */
.business_description div {
  margin: 0 0 var(--margin-5);
}
.business_description div img {
  width: 100%;
}
.business_description div p {
  line-height: 2rem;
}
@media screen and (min-width: 1000px) {
  .business_description div {
    display: var(--d_f);
    align-items: start;
    gap: 2rem;
  }
  .business_description div img {
    width: 50%;
  }
  .business_description div:first-of-type img {
    order: 2;
  }
  .business_description div:first-of-type p {
    order: 1;
  }
}

/* 下部 */

.business_description-botom {
  text-align: center;
  font-size: var(--font-size-sub18);
}
.business_description-botom::after {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
  background: url(/img/business_lin.png) no-repeat center / contain;
  margin: var(--margin-3) auto 0;
}

@media screen and (max-width: 1000px) {
  .w80 {
    width: 100%;
  }
}

/* スタッフ紹介 */
.staff_profile_flex {
  display: var(--d_f);
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-around;
  margin-bottom: var(--margin-5);
}

.staff_profile_flex div {
  width: calc(100% / 4 - 2rem);
  text-align: center;
}

/* スタッフ　サブ写真 */
.staff_profile_flex div picture {
  display: block;
  background: url(/img/staff_01.jpg) no-repeat center;
  width: 150px;
  height: 155px;
  background-size: 180%;
  border-radius: 5%;
}

.staff_profile_flex div:nth-of-type(2) picture {
  background: url(/img/staff_02.jpg) no-repeat center;
  background-size: cover;
  background-position-y: -20px;
}

.staff_profile_flex div:nth-of-type(3) picture {
  background: url(/img/staff_03.jpg) no-repeat center;
  background-size: cover;
}
.staff_profile_flex div:nth-of-type(4) picture {
  background: url(/img/staff_mask.png) no-repeat center;
  background-size: cover;
}

/* staff_04、8を非表示にする（予備として残しておく） */
.non_display {
  display: none;
}

.non_display__mai {
  display: none;
}


/* TOK */
.staff_profile_flex-tok div:nth-of-type(1) picture {
  background: url(/img/staff_05.webp) no-repeat center;
  background-size: cover;
}
.staff_profile_flex-tok div:nth-of-type(2) picture {
  background: url(/img/staff_06.webp) no-repeat center;
  background-size: cover;
}
.staff_profile_flex-tok div:nth-of-type(3) picture {
  background: url(/img/staff_07.webp) no-repeat center;
  background-size: cover;
}
.staff_profile_flex-tok div:nth-of-type(4) picture {
  background: url(/img/staff_mask.png) no-repeat center;
  background-size: cover;
}

/* サブ写真　下　名前 */
.staff_profile_flex p {
  text-align: left;
}
.staff_profile_flex p span:first-of-type,
.staff_profile_img-box-text span:first-of-type {
  color: var(--accent-color);
}
.staff_profile_flex p span {
  display: block;
  font-size: var(--font-size-sub14);
}

/* プロフィール　メイン */
.staff_profile_main {
  background-color: #f8f4f2;
  padding: 5rem 2rem;
}
@media (1000px <= width) {
  .staff_profile_img-box-name {
    display: var(--d_f);
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
  }
  .staff_profile_img-box-name .slider {
    width: 34%;
  }
  .staff_profile_img-box-name .staff_profile_img-box-text {
    width: calc(100% - 34% - 2rem);
  }
}
.staff_profile_img-box-text p:first-of-type {
  font-size: var(--font-size-sub18);
  margin-bottom: 0.5rem;
}
.staff_profile_img-box-text span:first-of-type {
  font-size: var(--font-size-sub14);
  display: block;
  margin-bottom: 0.5rem;
}
.staff_profile_img-box-text span:nth-of-type(2) {
  font-size: var(--font-size-sub14);
  padding-left: 0.5rem;
}

.staff_profile_img-box-text p:nth-of-type(2) {
  background-color: var(--accent-color);
  width: 50%;
  border-radius: 2rem;
  font-weight: 400;
  text-align: center;
}
.staff_profile_img-box-text p:nth-of-type(2) img {
  width: 15px;
  vertical-align: middle;
  margin-right: 0.5rem;
  display: inline-block;
}
.staff_profile_img-box-text p:nth-of-type(2) a {
  color: #fff;
  display: block;
  padding: 0.2rem 1rem 0.3rem;
  font-size: 14px;
  margin-bottom: var(--margin-1);
}

/* プロフィール　メイン　＞スライダー */
.slider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.slide-item {
  height: auto !important;
  aspect-ratio: 3 / 3; /* 横:縦の比率 */
  /*height: 236px !important;  スライドの高さを指定 */
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.slider .slick-prev,
.slider .slick-next {
  z-index: 10;
}
.slider .slick-next {
  right: -6px;
}
.slider .slick-prev {
  left: 4px;
}
.slider .slick-prev:before {
  content: "";
  background: url(/img/slide_L.png) no-repeat;
  width: 18px;
  height: 33px;
  display: block;
  background-size: 10px;
}
.slider .slick-next:before {
  content: "";
  background: url(/img/slide_R.png) no-repeat;
  width: 18px;
  height: 33px;
  display: block;
  background-size: 10px;
}

/* ドット 横長のカスタムスタイル */
.slider .slick-dots li button:before {
  font-size: 0; /* デフォルトのドットを非表示にする */
}

.slider .slick-dots li button {
  width: 20px; /* 横幅を指定 */
  height: 5px; /* 高さを指定 */
  border-radius: 5px; /* 角を丸くする */
  padding: 2px;
  background-color: #ccc; /* 背景色を指定 */
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* アクティブ状態のスタイル */
.slider .slick-dots li.slick-active button {
  background-color: #000; /*アクティブ時の背景色 */
}

/* ホバー時のスタイル */
.slider .slick-dots li button:hover {
  background-color: black; /* ホバー時の背景色 */
}

/* 各スライドの背景画像 */
.slide1 {
  background-image: url("/img/staff_01.jpg");
}
.slide11 {
  background-image: url("/img/staff_01.jpg");
}
.slide12 {
  background-image: url("/img/staff_01.jpg");
}

.slide2 {
  background-image: url("/img/staff_02.jpg");
  background-position-y: -20px;
}
.slide21 {
  background-image: url("/img/staff_02.jpg");
  background-position-y: -20px;
}
.slide22 {
  background-image: url("/img/staff_02.jpg");
  background-position-y: -20px;
}

.slide3 {
  background-image: url("/img/staff_03.jpg");
}
.slide31 {
  background-image: url("/img/staff_03.jpg");
}
.slide32 {
  background-image: url("/img/staff_03.jpg");
}

.slide4 {
  background-image: url("/img/staff_mask.png");
}
.slide41 {
  background-image: url("/img/staff_mask.png");
}
.slide42 {
  background-image: url("/img/staff_mask.png");
}

/* tok スライド画像 */
.slide5 {
  background-image: url("/img/staff_05.webp");
}
.slide51 {
  background-image: url("/img/staff_51.webp");
}

.slide6 {
  background-image: url("/img/staff_06.webp");
}
.slide61 {
  background-image: url("/img/staff_61.webp");
}

.slide7 {
  background-image: url("/img/staff_07.webp");
}
.slide71 {
  background-image: url("/img/staff_71.webp");
}

/* 保有資格 */
.owned_qualification {
  padding: 2rem;
  background-color: var(--main-color);
  border-radius: 1rem;
  border: 1px solid var(--accent-color);
  margin-top: 2rem;
  position: relative;
}
.owned_qualification dt {
  padding: 0 0.5rem;
  color: var(--accent-color);
  position: absolute;
  top: -12px;
  letter-spacing: 2px;
  background: linear-gradient(to bottom, #f8f4f2 60%, #fff 40%);
}
.owned_qualification dd {
  padding: 0 0.5rem;
}

@media (width < 900px) {
  .staff_profile_flex div {
    width: calc(100% / 2 - 2rem);
  }
  .staff_profile_flex div picture {
    width: 100%;
  }
  .staff_profile_flex {
    justify-content: space-between;
}
}