@charset "utf-8";

header {
  height:auto;
}

main {
  padding-top:10vh;
}

.bread-comb {
  font-size:0.7rem; padding-left: 4.8rem;
}

.bread-comb-box {
  height:5vh;
}

/* --- スペシャリストバナー用スタイル --- */

/* リンク全体のホバーアクション（オプション） */
.specialist-banner-link {
  display: block;
  color: inherit; /* 文字色を親に合わせる */
  transition: opacity 0.3s;
}
.specialist-banner-link:hover {
  opacity: 0.9;
}

/* 左側の背景色（画像のような薄いグレー） */
.bg-light-gray {
  background-color: #f4f4f4; /* ban.jpgに近い色 */
  min-height: 300px; /* PC表示時の最低高さ確保 */
}

/* 緑のタグ部分 */
.banner-tag {
  background-color: #227934; /* テーマカラーの緑 */
  color: #fff;
  padding: 1rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 左上に配置するため幅は指定せず中身なりにする */
  align-self: flex-start; 
  margin-bottom: 2rem;
}

.tag-role {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.tag-name {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

/* テキストコンテンツエリア */
.banner-content {
  padding: 0 3rem 3rem 3rem; /* 下と左右に余白 */
}

.banner-title {
  font-weight: 700;
  color: #555; /* 濃いグレー */
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.banner-desc {
  font-size: 0.9rem;
  color: #777;
  line-height: 1.8;
  margin-bottom: 0;
}

/* --- 右側の画像エリア設定（背景画像版） --- */
.banner-img-col {
  /* 背景画像の共通設定 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  /* スマホ等で縦並びになった際、中身が空でも高さが出るようにする */
  min-height: 250px;
  
  /* PC表示(横並び)時は、BootstrapのFlexboxの仕様で
     隣のテキストカラムと同じ高さまで自動的に伸びます */
  height: auto; 
}

.interview-mainbox {
  height:80vh;
  margin-bottom:5vh;
}

.interview-mainbox h1 {
  font-weight: 700;
    color: #eee;
    font-size: 6vw;
    margin-bottom: 2rem;
}

.interview-mainbox h2 {
  font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.interview-mainbox h3 {
  padding-top:2rem;
  padding-left:1rem;
  font-weight: 900;
  color: #717171;
  font-size: 2.5vw;
  line-height: 120%;
}

.specialist-badge {
  position: absolute;
  bottom:0;
  right:3rem;
}

.specialist-ky {
  background:url(../img/interview/ky/main.jpg) no-repeat center center;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  height:100%;
  width:100%;
}
.specialist-rh {
  background:url(../img/interview/rh/main.jpg) no-repeat center center;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  height:100%;
  width:100%;
}
.specialist-ti {
  background:url(../img/interview/ti/main.jpg) no-repeat center center;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  height:100%;
  width:100%;
}
.specialist-rt {
  background:url(../img/interview/rt/main.jpg) no-repeat center center;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  height:100%;
  width:100%;
}
.specialist-jn {
  background:url(../img/interview/jn/main.jpg) no-repeat center center;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  height:100%;
  width:100%;
}

.specialist-messagebox {
background-color:#f2f2f2;
border-radius:20px 0 0 20px;
padding:5rem 0 5rem 5rem;
overflow: hidden;
}

.specialist-message-lead {
font-weight:700;
margin-bottom:2rem;
font-size:1.7rem;
line-height: 170%;
}

.specialist-message-image img {
  border-radius:20px 0 0 20px;
  border:1px solid #ccc;
}

.contents-title {
        margin-bottom:4rem;
      }
      .contents-title h1 {
        margin-top:4rem;
        font-weight: 700;
        color: #eee;
        font-size: 6vw;
        margin-bottom: 2rem;
      }

      .contents-title h2 {
        font-weight: 700;
        font-size: 0.9rem;
        margin-bottom: 1rem;
        padding-left: 1rem;
      }

      .contents-title h3 {
        font-weight: 700;
        font-size: 1.5rem;
        color:#227934;
        padding:3rem 0 3rem 1rem;
      }

      .contents-title p {
        padding:0 1rem;
        line-height:170%;
      }

      .service-item {
        background-color:#f2f2f2;
        padding:3rem 2rem;
        border-radius:20px;
      }

      .service-item h4 {
        font-weight:700;
        font-size:1.2rem;
        border-bottom:1px solid #227934;
        padding-bottom:1.5rem;
        margin-bottom:1.5rem;
        color:#227934;
      }

      .service-item p {
        font-size:0.9rem;
        line-height:170%;
      }

      .service-item li {
        font-size:0.9rem;
        line-height:160%;
        margin-bottom:0.5rem;
      }

      .service-item li span {
        font-size:1rem;
        font-weight:700;
        color:#227934;
      }

      .kome {
        font-size:0.8rem; line-height:150%; margin-top:1rem; padding-left:1rem; text-indent: -0.8rem;
      }

      .s-i-banner {
        margin-bottom:7rem;
      }




      /* contents.css に追記 */

/* ページヘッダー用Swiper設定 */
.pageHeadSwiper {
  width: 100%;
  height: auto;
  /* 元のimgタグについていた角丸スタイルをコンテナに適用 */
  border-radius: 0 0 20px 20px;
  /* 角丸からはみ出さないようにする */
  overflow: hidden;
}

.pageHeadSwiper .swiper-slide img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 下部の隙間除去 */
  object-fit: cover; /* 画像のトリミング設定 */
}

.contents-head-box {
padding:0 10vh 0 4.8rem;
}




/* --- レスポンシブ調整 (スマホ用) --- */
@media (max-width: 991px) {
  .bg-light-gray {
    min-height: auto; /* 高さは中身なりに */
  }
  
  .banner-tag {
    width:100%;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.2rem;
  }
  
  .tag-name {
    font-size: 2rem;
  }
  
  .banner-content {
    padding: 0 1.5rem 2rem 1.5rem; /* スマホ用に余白を縮小 */
  }
  
  .banner-title {
    font-size: 1.2rem;
  }

  .banner-desc {
    font-size:0.8rem;
  }
  
  .banner-img-col {
    min-height:150px;
    height: 150px; /* スマホでの画像の高さ固定 */
  }
}

@media (max-width: 767px) {
  main {
  padding-top:5svh;
}
.bread-comb {
  padding-left: 2rem;
}

.contents-head-box {
padding:0 5svh 0 2rem;
}

.bread-comb-box {
  height:3svh;
}

.specialist-ky,
.specialist-rh,
.specialist-ti,
.specialist-rt,
.specialist-jn {
    height:30svh;
    margin-top:1svh;
  }

  .interview-mainbox {
  height:60svh;
  margin-bottom:5svh;
}

.interview-mainbox h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.specialist-badge {
  right:1rem;
  bottom:-1rem;
}

.specialist-message-lead {
font-size:1.1rem;
}

.specialist-messagebox {
padding: 2rem 0rem 2rem 2rem;
}

.interview-mainbox h3 {
  padding-top: 0rem;
  font-size: 1.2rem;
}


.contents-title h1 {
  margin-top:1.5rem;
        font-size: 2.5rem;
    margin-bottom: 1rem;
      }

      .contents-title h3 {
        font-size:1.2rem;
        padding:1.5rem 0 1.5rem 1rem;
      }

      .contents-title p {
        padding:0rem;
        line-height:170%;
        font-size:0.9rem;
      }

      .contents-title {
        margin-bottom:2rem;
      }

      .s-i-banner {
        margin-bottom:2rem;
      }


}