@charset "UTF-8";

/* =========================================
   ベーススタイル
========================================= */
/* =========================================
   基本設定（スルスルスクロール設定）
========================================= */
html {
  /* スムーズスクルール*/
  scroll-behavior: smooth;
  
  /* ヘッダーの下に隠れないようにする
     ヘッダーの高さ分（約80px）＋少し余裕を持たせて調整 */
  scroll-padding-top: 80px;
}

/* ...以下、既存のコード... */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================
   ヘッダーセクション（共通・PCベース）
========================================= */
h1{
    margin: 0;
}
.l-header {
  width: 100%;
  background: #fff;
  border-bottom: 3px solid #0fa961;
  position: fixed; /* ヘッダー固定 */
  top: 0;
  left: 0;
  z-index: 100;
}

.l-header__inner {
    max-width: 1500px; /* デザインに合わせて調整 */
    margin: 0 auto;
    margin-right: 0;
    padding: 0 0 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* ロゴ部分 */
.l-header__logo {
    max-width: 200px;
    width: 15%;
}
.l-header__logo h1 a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.l-header__logo h1 a img{
    width: 100%;
}
.company-name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}
.recruit-label::before,
.recruit-label::after {
  content: '';
  display: block;
  width: 25%;
  height: 2px;
  background: #0fa961;
}
.recruit-label {
font-size: calc(8px + 4 * ((100vw - 768px) / 512));
    color: #0fa961;
    /* background: #000; */
    padding: 2px 0;
    font-weight: 700;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.recruit-label::before {
  margin-right: 0.5em;
}
.recruit-label::after {
  margin-left: 0.5em;
}

/* ハンバーガーボタン（PCでは非表示） */
.l-header__hamburger {
  display: none;
}

/* ナビゲーション部分（PC） */
.l-header__nav {
  display: flex;
  align-items: center;
    width: 85%;
    justify-content: space-between;
}

.l-header__nav-list {
    display: flex;
    margin-right: 30px;
    width: 70%;
    justify-content: flex-end;
}
li.l-header__nav-item{
    margin-left: 1.8rem;
    font-size: calc(11px + 4 * ((100vw - 768px) / 512));
    font-weight: 500;
    padding-bottom: 1px;
    background: url(../image/arrow_down_w.png) no-repeat center bottom 0;    
}

li.l-header__nav-item a {
  padding-bottom: 8px;
  position: relative;
  display: block;
}

/* ホバー時の下線アニメーション */
li.l-header__nav-item a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #0fa961;
    transition: width 0.3s ease-in-out;
}

li.l-header__nav-item a:hover::after {
  width: 100%; /* ホバー時に幅100% */
}

/* お問い合わせ部分（PC） */
.l-header__contact {
  display: flex;
  align-items: center;
  width: 30%;
  padding: 0;
}

.tel-box {
    display: flex;
    flex-direction: column;
    color: #009959; /* 緑の文字色 */
    background: #d9f0e6; /* 薄い緑の背景 */
    padding: 14px 10px;
    width: 55%;
    text-align: center;
    min-height: 80px;
}

.tel-label {
  font-size: 14px;
}

.tel-number {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.tel-time {
    font-size: calc(8px + 4 * ((100vw - 768px) / 512));
    color: #666;
    text-align: center;
}

.contact-btn {
    background: #009959;
    color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: 30px;
    transition: background 0.3s;
    font-size: calc(13px + 5 * ((100vw - 782px) / 417));
    font-weight: bold;
    width: 45%;
    line-height: 1.4;
    min-height: 80px;
}

.contact-btn:hover {
  background: #007a47;
  opacity: 1;
}

.contact-btn span:first-child {
  font-size: calc(8px + 4 * ((100vw - 768px) / 512));
  margin-bottom: 0;
    font-weight: normal;
}

.contact-btn svg {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.pc{
    display: block;
}
.sp{
    display: none;
}


/* =========================================
   SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
.pc{
    display: none;
}
.sp{
    display: block;
}
    .l-header__inner {
    padding: 5px 15px;
    height: 80px;
    /* ロゴを中央、ハンバーガーを右端にするための配置 */
    position: relative;
    justify-content: flex-start; 
    }
    .l-header__logo {
    max-width: 125px;
    width: 100%;
    }
    .company-name {
        font-size: 15px;
    margin-bottom: 0;
    margin-top: 0;
    }
    .recruit-label{
    padding: 4px 0;
        font-size: 14px;
    }
    .recruit-label::before, .recruit-label::after {
    content: '';
    display: block;
    width: 21%;
    height: 2px;
    background: #0fa961;
}
    .recruit-label::before {
    margin-right: 0;
}
    .recruit-label::after {
    margin-left: 0;
}

    /* ロゴ中央寄せ */
    .l-header__logo {
    text-align: center;
    }
    .l-header__logo h1 a {
    align-items: center;
    }

  /* ハンバーガーボタン表示と配置 */
  .l-header__hamburger {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101; /* ナビより上へ */
    padding: 0;
  }

  /* ハンバーガーの三本線 */
  .l-header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    position: absolute;
    left: 0;
    transition: 0.3s;
  }
  .l-header__hamburger span:nth-child(1) { top: 0; }
  .l-header__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .l-header__hamburger span:nth-child(3) { bottom: 0; }

  /* ハンバーガーが開いた時の三本線のアニメーション */
  .l-header__hamburger.is-active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .l-header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .l-header__hamburger.is-active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  /* ナビゲーション部分（SP：初期非表示、開くと全画面） */
  .l-header__nav {
    display: block; /* Flexを解除 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 30px 20px 20px; /* ヘッダーの高さ分下げる */
    box-sizing: border-box;
    transform: translateX(100%); /* 初期は画面外（右）へ */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto; /* コンテンツが多い場合はスクロール */
      z-index: 100;
  }

  /* ナビが開いた時の状態 */
  .l-header__nav.is-active {
    transform: translateX(0); /* 画面内へ移動 */
  }

  /* SP時のリストスタイル */
  .l-header__nav-list {
    display: block; /* Flex解除 */
    margin-right: 0;
    margin-bottom: 30px;
      width: 100%;
  }
  li.l-header__nav-item {
    margin-left: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  li.l-header__nav-item a {
    font-size: 1.2rem;
    padding: 10px;
  }
  /* SPではホバーアニメーションは不要（タップになるため）なので解除 */
  li.l-header__nav-item a::after {
    display: none;
  }

  /* SP時のお問い合わせ部分スタイル調整 */
  .l-header__contact {
    flex-direction: column;
    background: none;
    padding: 0;
    align-items: stretch; /* 横幅いっぱい */
      width: inherit;
  }
  .tel-box {
    margin-right: 0;
    margin-bottom: 20px;
    align-items: center;
      width: 100%;
  }
    span.tel-time , .contact-btn span:first-child{
        font-size: 14px;
    }
  .contact-btn {
    width: 100%;
    box-sizing: border-box;
      font-size: 30px;
  }
}
/* =========================================
   Mainコンテンツ（ヘッダー固定分の調整）
========================================= */
main {
  /* ヘッダーの高さ分だけ下げる（仮の値。実際はヘッダーの高さに合わせて調整してください） */
  padding-top: 80px; 
}
@media (max-width: 768px) {
  main {
    /* SPのヘッダー高さに合わせて調整 */
    padding-top: 80px; 
  }
}

/* =========================================
   FVセクション
========================================= */
.p-fv {
  width: 100%;
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.p-fv__inner {
  position: relative;
  width: 100%;
  /* PC版の背景画像の比率を維持するための高さ確保（例：アスペクト比 16:9 の場合）
     必要に応じて調整してください。画像自体の高さに任せる場合は height: auto; でOK */
  /* height: 56.25vw; */ 
}

/* 画像の共通スタイル */
.p-fv__image img,
.p-fv__copy img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 画像の下に隙間ができるのを防ぐ */
}

/* PC版背景画像 */
.p-fv__bg {
  display: block;
  width: 100%;
  object-fit: cover; /* エリアいっぱいにトリミングして表示 */
  /* 必要に応じて高さを指定
  height: 600px; 
  */
}

/* PC版コピー画像エリア */
.p-fv__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 上下左右中央寄せ */
  width: 100%; /* コピーの最大幅（調整してください） */
  max-width: 740px;
  z-index: 10; /* 背景より手前に */
}


/* =========================================
   FVセクション：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  .p-fv {
    /* SPでは高さを指定せず画像なりに表示 */
    height: auto;
  }

  /* PC用のコピー画像を非表示にする */
  .p-fv__copy {
    display: none;
  }

  /* pictureタグ内のimg（SP用画像）のスタイル */
  .p-fv__image img {
    /* SP用画像はそのまま表示されるので特別な指定は不要ですが、
       念のためwidth: 100%を継承させておきます */
  }
}

/* =========================================
   共通コンポーネント・ユーティリティ（必要に応じて追加）
========================================= */
/* 緑色のセクションタイトル */
.c-section-title--green {
font-size: 2.4rem;
font-weight: bold;
color: #009959;
text-align: center;
margin-bottom: 5px;
margin-top: 0;
}

/* PCで改行を隠すユーティリティ */
@media (min-width: 769px) {
  .u-hidden-pc {
    display: none;
  }
}


/* =========================================
   筑豊舗道とは セクション
========================================= */
.p-about {
  padding-top: 60px; /* セクション間の余白 */
  padding-bottom: 0; /* 下部は背景が続くので余白なし */
}

/* 上部見出しブロック */
.p-about__header {
  text-align: center;
  margin-bottom: 0;
  padding: 0 20px; /* SPでの横幅確保用 */
}

.p-about__lead {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8;
        margin-top: 5px;
}

/* 斜め背景のメインブロック（PC版） */
.p-about__main {
  width: 100%;
  /* 背景画像の指定。高さを確保する必要があります */
  background-image: url('../image/about-bg.jpg'); /* 画像パスに注意 */
  background-size: cover; /* coverだと大きくなるので変更 */
  background-position: center;
  background-repeat: no-repeat;
  /* コンテンツの上下余白を確保（背景の高さ確保も兼ねる） */
  padding: 70px 0 100px; 
  color: #fff; /* テキスト色を白に */
}

/* テキストコンテナ（ここがポイント！） */
.p-about__text-box {
  /* 画面幅に応じて幅が変わるように vw 単位を使用 */
  /* デザインに合わせて数値を調整してください。例えば50vwなら画面半分 */
  width: 55vw; 
  max-width: 700px; /* 広がりすぎないように上限を設定 */
  margin-left: 11.5vw;  /* 左端からの余白も少し％で空ける */
  padding-right: 20px; /* 右側のテキストの余白 */
  box-sizing: border-box;
}

.p-about__sub-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 0;
}

.p-about__description {
  font-size: 1.2rem;
  line-height: 2.2; /* 読みやすく広めに */
  font-weight: 500;
    font-feature-settings: 'palt';
}
/* 【追加】SP専用画像エリア（PCでは非表示） */
.p-about__sp-image {
  display: none;
}
.p-about__sp-image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* =========================================
   筑豊舗道とは：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
    h3 {
    margin-top: 0;
}
  .p-about {
    /* SPでの余白調整（任意） */
    padding-top: 30px;
      text-align: center;
  }

  /* 上部見出しブロックの調整 */
  .p-about__header {
    margin-bottom: 30px;
    text-align: left; /* SPでは左寄せにする場合 */
  }
  .p-about__lead {
    font-size: 1.2rem; /* 少し文字サイズを小さく */
    line-height: 1.6;
      text-align: center;
      font-feature-settings: 'palt';
  }

  /* 【ここが重要】表示の切り替え */

  /* 1. SP用画像を表示する */
  .p-about__sp-image {
    display: block;
  }

/* 【修正】2. PC用の斜め背景を、SP用の背景画像に変更 */
  .p-about__main {
    background-image: url('../image/about-sp-road-bg.jpg');
    background-size: cover; /* 領域いっぱいに表示 */
    background-position: center; /* 中央寄せ */
    background-repeat: no-repeat; /* 繰り返さない */    
    padding: 40px 20px; /* SP用の余白（そのまま） */
  }

  /* 3. テキストコンテナの幅指定(vw)を解除し、SP用に調整 */
  .p-about__text-box {
    width: auto; /* vwを解除 */
    max-width: none;
    margin-left: 0; /* 左余白を解除 */
    padding-right: 0; /* 右余白を解除 */
    text-align: center; /* テキストを中央揃えにする場合 */
  }

  /* テキストスタイルのSP調整 */
  .p-about__sub-title {
    font-size: 24px; /* 少し小さく */
    margin-bottom: 0;
  }
  .p-about__description {
    font-size: 1.2rem; /* 少し小さく */
    line-height: 1.8;
    text-align: center; /* 本文は左寄せの方が見やすいかも（デザインに合わせて調整） */
    display: inline-block; /* text-align:centerの影響下で左寄せにするテクニック */
  }
}
/* =========================================
   共通ユーティリティ追加
========================================= */
/* SPで改行を隠す */
@media (max-width: 768px) {
  .u-hidden-sp {
    display: none;
  }
}

/* =========================================
   主要領域（事業内容）セクション
========================================= */
.p-domain {
  padding: 40px 0;
  background-color: #fff; /* 背景色（任意） */
}

.p-domain__inner {
  max-width: 1200px; /* コンテンツ幅の制限 */
  margin: 0 auto;
  padding: 0 20px; /* 左右の余白 */
}

/* ヘッダー部分 */
.p-domain__header {
  text-align: center;
  margin-bottom: 40px;
}

.p-domain__lead-main {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 5px;
}

.p-domain__lead-sub {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 5px;
}


/* 4つのパネルリスト（ここがGridの親要素） */
.p-domain__list {
  display: grid;
  /* PC: 4カラム（1frを4回繰り返す） */
  grid-template-columns: repeat(4, 1fr);
  /* パネル間の余白（横 縦） */
  gap: 30px;
}

/* 各パネル（カード） */
.p-domain__item {
  display: flex;
  flex-direction: column; /* 画像とテキストを縦積みに */
  height: 100%; /* 高さを揃える */
}

.p-domain__item-img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  /* 画像の比率を揃えたい場合は以下などを追加
  aspect-ratio: 4 / 3;
  object-fit: cover;
  */
}

/* 緑色のテキストエリア */
.p-domain__item-body {
  background-color: #009959; /* 緑色 */
  color: #fff;
  padding: 20px;
  flex-grow: 1; /* テキスト量が違っても緑エリアの高さを揃えて下まで伸ばす */
  text-align: left;
}

.p-domain__item-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 15px;
text-align: center;
margin-top: 0;
font-feature-settings: 'palt';
}

.p-domain__item-text {
  font-size: 1rem;
  line-height: 1.6;
margin-top: 10px;
}


/* =========================================
   主要領域：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  .p-domain {
    padding: 40px 0;
  }
  
  .p-domain__header {
    margin-bottom: 30px;
    text-align: left;
  }
  .p-domain__lead-main {
    font-size: 20px;
      text-align: center;
  }
  .p-domain__lead-sub {
    font-size: 1.2rem;
    display: block;
      text-align: center;
  }

  /* 【重要】赤枠指示の反映：1×4にする */
  .p-domain__list {
    /* SP: 2カラムに変更 */
    grid-template-columns: repeat(1, 1fr);
    /* 余白を少し狭く調整 */
    gap: 15px;
  }

  .p-domain__item-body {
    padding: 15px;
  }
  .p-domain__item-title {
    font-size: 20px;
      margin-bottom: 0;
  }
  .p-domain__item-text {
    font-size: 1rem;
  }
}
/* =========================================
   自社プラント（アピールポイント）セクション
========================================= */
.p-plant {
  /* PCでは上下に余白はいらない（背景画像で調整するため） */
  width: 100%;
}

/* --- PC版スタイル --- */
.p-plant__main {
  width: 100%;
  /* PC用の一枚背景画像 */
  background-image: url('../image/plant-pc-bg.jpg');
  background-size: cover; /* coverだと大きくなるので変更 */
  background-position: center;
  background-repeat: no-repeat;
  /* 上下余白（背景の高さ確保） */
  padding: 80px 0 50px;
  color: #fff;
}

.p-plant__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  /* Flexboxでレイアウト制御 */
  display: flex;
  /* 右寄せにする魔法！ */
  justify-content: flex-end; 
}

/* テキストボックス */
.p-plant__text-box {
  /* 幅の調整（画面の右半分くらいに収まるように） */
  width: 50%; 
  /* 必要に応じてパディング調整 */
  padding-left: 80px; 
}

.p-plant__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.p-plant__sub-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #ccc; /* サブタイトルは少しグレーに（デザインに合わせて） */
}

.p-plant__description {
font-size: 1.2rem;
line-height: 2.2;
font-weight: 500;
}

/* SP用画像エリア（初期非表示） */
.p-plant__sp-image {
  display: none;
}
.p-plant__sp-image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* =========================================
   自社プラント：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  
  /* 1. SP用画像を表示 */
  .p-plant__sp-image {
    display: block;
  }

  /* 2. 背景をSP用に切り替え */
  .p-plant__main {
    /* PC背景を解除して、SP用のテクスチャ背景へ */
    background-image: url('../image/plant-sp-bg.jpg'); 
    background-size: cover;
    padding: 30px 20px; /* 余白調整 */
  }

  .p-plant__inner {
    display: block; /* Flex解除 */
  }

  /* 3. テキストボックスの幅と配置を解除 */
  .p-plant__text-box {
    width: 100%;
    padding-left: 0;
    text-align: left; /* 左寄せ（中央がいい場合はcenterへ） */
  }

  /* フォントサイズ調整 */
  .p-plant__title {
    font-size: 24px;
    margin-bottom: 15px;
      text-align: center;
  }
  .p-plant__sub-title {
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
      text-align: center;
  }
  .p-plant__description {
    font-size: 1rem;
    line-height: 1.8;
      text-align: center;
  }
}
/* =========================================
   共通パーツ追加
========================================= */
/* 白いセクションタイトル */
.c-section-title--white {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 5px;
    margin-top: 5px;
}

/* 白いボタン（CTA用） */
.c-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #009959; /* 文字は緑 */
  font-weight: 700;
  padding: 15px 60px; /* 横幅広め */
  border-radius: 0; /* 角丸なし（デザインに合わせて） */
  transition: all 0.3s;
  position: relative;
    border-radius: 10px;
    font-size: 1.4rem;
}

.c-btn-white:hover {
  background-color: #f0f0f0;
  opacity: 1; /* opacity遷移はaタグ共通にあるので上書きしてもOK */
}

.c-btn-white svg {
  margin-left: 10px;
}

/* =========================================
   数値で見る筑豊舗道 セクション
========================================= */
.p-figures {
  width: 100%;
  background-image: url('../image/figures-bg.jpg'); /* グリッド背景 */
  background-size: cover;
  background-position: center;
  padding: 60px 0;
  color: #fff;
}

.p-figures__inner {
  max-width: 1000px; /* カードが横に並ぶので少し狭めに */
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.p-figures__lead {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 2;
    margin-top: 5px;
}

/* カードエリア（Flexboxで横並び） */
.p-figures__content {
  display: flex;
  justify-content: center;
  gap: 30px; /* カード間の隙間 */
  margin-bottom: 50px;
}

/* 白いカード */
.p-figures__card {
  background: #fff;
  width: 48%; /* 2つ並べるので半分弱 */
  padding: 30px;
  color: #333; /* 中の文字は黒 */
  text-align: center;
}

.p-figures__chart img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.p-figures__card-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* ボタンエリア */
.p-figures__btn-area {
  text-align: center;
}


/* =========================================
   数値で見る：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  .p-figures {
    padding: 40px 0;
  }
  
  .c-section-title--white {
    font-size: 24px;
  }
  
  .p-figures__lead {
    text-align: center; /* SPでは読みやすく左寄せにする場合 */
      font-size: 1.1rem;
        font-feature-settings: 'palt';
  }

  /* カードを縦積みに */
  .p-figures__content {
    flex-direction: column;
    gap: 20px;
        margin-bottom: 30px;
  }

  .p-figures__card {
    width: 100%; /* 横幅いっぱい */
    padding: 20px;
  }

  .p-figures__card-title {
    font-size: 18px;
  }
  
  /* ボタン幅調整 */
  .c-btn-white {
    width: 100%; /* SPではボタンを幅いっぱいにすることが多い */
    box-sizing: border-box;
  }
}
/* =========================================
   職場環境（働きやすさ）セクション全体
========================================= */
.p-workplace {
  width: 100%;
}

/* --- ① 導入ブロック --- */
.p-workplace__intro {
  padding-top: 60px;
  /* 下部は次のブロックとくっつくのでpaddingなし */
}

.p-workplace__intro-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 20px;
}
.p-workplace__lead {
    font-weight: 500;
    margin-top: 5px;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    display: inline-block;
}

/* 緑のエリアと画像のレイアウト */
.p-workplace__intro-body {
  display: flex; /* PCは横並び */
}

.p-workplace__intro-body {
  background-image: url('../image/p-workplace__intro-content-bg.jpg'); /* 濃い緑背景 */
    background-size: cover; /* 左右いっぱい */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%; 
  background-color: #009959;
  color: #fff;
  padding: 70px 0 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
        margin-bottom: 60px;
}
.p-workplace__text-box{
    width: 55vw;
    max-width: 700px;
    margin-left: 11.5vw;
    padding-right: 20px;
    box-sizing: border-box;
}
.p-workplace__intro-title {
  font-size: 32px;
  font-weight: 700;
    margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

.p-workplace__intro-text {
  font-size: 1.2rem;
  line-height: 1.8;
}

.p-workplace__intro-img {
  width: 60%; /* 右側画像エリア */
}
.p-workplace__intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* エリアいっぱいに表示 */
  vertical-align: bottom;
}


/* --- ② ポイントブロック（3つの枠） --- */
.p-workplace__points {
  background-image: url('../image/points-bg.jpg'); /* 濃い緑背景 */
  background-size: cover;
  padding: 60px 0;
  color: #fff;
  text-align: center;
}

.p-workplace__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.p-workplace__points-header {
  margin-bottom: 20px;
}
.p-workplace__points-header .sub-label {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}
.p-workplace__points-header .main-title {
  font-size: 2.5rem;
  font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
}

/* 3カラムレイアウト */
.p-workplace__points-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.p-workplace__point-item {
  border: 3px solid #fff; /* 白い枠線 */
  padding: 20px 15px;
  background-color: rgba(0, 153, 89, 0.8); /* 背景少し透過させるか、ベタ塗りかデザインに合わせて */
}

.point-head {
    color: #ffcc00; /* 黄色文字 */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 3px solid #ffcc00;
    display: inline-block;
    margin-top: 0;
}
.point-head span{
    font-size: 2rem;
}
.point-text {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left; /* テキストは左揃えが見やすい */
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
}


/* --- ③ 数値ブロック（4つの枠） --- */
.p-workplace__figures {
  background-image: url('../image/figures-bg-green.jpg'); /* グリッド背景 */
  background-size: cover;
  background-position: center;
  padding: 40px 0 80px;
  color: #fff;
  text-align: center;
        margin-bottom: 60px;
}

.p-workplace__figures-title {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 20px;
    margin-top: 0;
}

/* 4カラムレイアウト */
.p-workplace__figures-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-workplace__figure-item {
  border: 4px solid #fff; /* 太めの白枠 */
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.figure-label {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.figure-number {
  font-size: 40px; /* 数字大きく */
  font-weight: 700;
  color: #ffcc00; /* 黄色 */
  line-height: 1;
}
.figure-number small {
  font-size: 0.6em; /* 単位などは少し小さく */
}


/* =========================================
   職場環境：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  
  /* ① 導入ブロック：縦積み */
  .p-workplace__intro {
    padding-top: 40px;

  }
  .p-workplace__intro-body {
    flex-direction: column-reverse; /* 画像を上に、テキストを下に */
                /* PC背景を解除して*/
    background-image: none;
      padding: 0;
  }
.p-workplace__lead {
    font-size: 1.2rem;
}
  .p-workplace__intro-img {
    width: 100%;
    height: 250px; /* SPでの画像の高さ指定 */
  }
.c-section-title--green {
    font-size: 2rem;
}
    .p-workplace__text-box {
    width: 100%;
    max-width: inherit;
    margin-left: 0;
    padding-right: 0;
    box-sizing: border-box;
        
}
  .p-workplace__intro-content {
    width: 100%;
    padding: 30px 20px;
  }
  .p-workplace__intro-title {
    font-size: 24px;
      margin-bottom: 10px;
      text-align: center;
  }
    .p-workplace__intro-text {
    text-align: center;
}
    .roadmap__image{
        width: 100%;
    }
    .roadmap__image img{
        width: 100%;
    }

  /* ② ポイントブロック：1カラム縦積み */
  .p-workplace__points {
    padding: 60px 0;
  }
  .p-workplace__points-list {
    grid-template-columns: 1fr; /* 1列 */
    gap: 20px;
  }
  .p-workplace__points-header .main-title {
    font-size: 24px;
  }


  /* ③ 数値ブロック：2カラム（2x2） */
  .p-workplace__figures {
    padding: 60px 0;
  }
  .p-workplace__figures-list {
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列が見やすい */
    gap: 15px;
  }
  .p-workplace__figure-item {
    min-height: 120px;
  }
  .figure-number {
    font-size: 28px; /* スマホでは少し文字サイズを落とす */
  }
}
/* =========================================
   資格取得支援制度 セクション
========================================= */
.p-support {
  width: 100%;
    padding-top: 60px;
}

/* --- PC版スタイル --- */
.p-support__main {
  width: 100%;
  /* PC用の一枚背景画像 */
  background-image: url('../image/support-pc-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 80px 0;
  color: #fff;
}

.p-support__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

.p-support__text-box {
  width: 50%; /* 右半分 */
  padding-left: 80px;
}

.p-support__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.4;
}
.p-support__title .sub {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}

.p-support__description {
  font-size: 1.2rem;
  line-height: 2.0;
  font-weight: 500;
  margin-bottom: 30px;
}

/* 白枠の資格リストボックス */
.p-support__list-box {
  border: 1px solid #fff;
  padding: 5px 25px 20px;
  width: 100%;
  max-width: 450px; /* 横に広がりすぎないように */
}

.box-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.support-list li {
  font-size: 1.2rem;
  line-height: 1.8;
  list-style: none;
}
.roadmap__image{
    margin: 40px auto 0;
    text-align: center;
}

/* SP用画像エリア（初期非表示） */
.p-support__sp-image {
  display: none;
}
.p-support__sp-image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* =========================================
   資格支援：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  
  /* 1. SP用画像を表示 */
  .p-support__sp-image {
    display: block;
  }

  /* 2. 背景をSP用に切り替え */
  .p-support__main {
    /* SP用の黒テクスチャ背景へ */
    background-image: none; 
    background-size: cover;
    padding: 30px 20px;
      background-color: #1b1b1b;
  }

  .p-support__inner {
    display: block; /* Flex解除 */
      padding: 0;
  }

  /* 3. テキストボックス調整 */
  .p-support__text-box {
    width: 100%;
    padding-left: 0;
    text-align: left;
  }

  .p-support__title {
    font-size: 24px;
      margin-bottom: 10px;
        text-align: center;
  }
.p-support__description {
    text-align: center;
}
  .p-support__title .sub {
    font-size: 14px;
      text-align: center;
  }
  
  .p-support__list-box {
    max-width: 100%; /* SPでは幅いっぱい */
    padding: 20px;
  }
  .support-list li {
    font-size: 14px;
  }
}
/* =========================================
   募集要項（タブ切り替え）セクション
========================================= */
.p-recruit {
  padding: 60px 0;
  background: #fff;
}

.p-recruit__inner {
  max-width: 900px; /* テーブルが見やすい幅に */
  margin: 0 auto;
  padding: 0 20px;
}

/* ① タブナビゲーション */
.p-recruit__tab-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
  list-style: none;
}

.p-recruit__tab-item {
  cursor: pointer;
  text-align: center;
  opacity: 0.6; /* 非アクティブ時は少し薄く */
  transition: opacity 0.3s;
  width: 200px;
}

.p-recruit__tab-item:hover,
.p-recruit__tab-item.is-active {
  opacity: 1; /* アクティブorホバーで濃く */
}

.tab-thumb img {
  width: 100%;
  height: auto;
  border: 2px solid transparent;
  margin-bottom: 10px;
}
/* アクティブ時はサムネに枠線をつけるなどしても分かりやすい */
.p-recruit__tab-item.is-active .tab-thumb img {
  border-color: #009959;
}

.tab-label {
  font-weight: 700;
  font-size: 1rem;
  display: block;
}


/* ② コンテンツエリア（表示制御） */
.p-recruit__panel {
  display: none; /* デフォルトで非表示 */
  animation: fadeIn 0.5s; /* 切り替え時にふわっと表示 */
}

/* is-showクラスがついたものだけ表示 */
.p-recruit__panel.is-show {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.recruit-table-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  border-left: 5px solid #009959;
  padding-left: 7px;
}


/* テーブルスタイル */
.c-recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.1rem;
}

.c-recruit-table th,
.c-recruit-table td {
  padding: 7px;
  border: 1px solid #ddd;
  text-align: left;
}

.c-recruit-table th {
  background-color: #009959; /* 緑背景 */
  color: #fff;
  width: 25%; /* 見出しの幅 */
  white-space: nowrap; /* 見出しは改行しない */
  vertical-align: middle;
}

.c-recruit-table td {
  background-color: #fff;
}
.c-recruit-table caption{
    text-align: left;
    margin-top: 15px;
    font-weight: bold;
}
    dt{
        font-weight: bold;
    }

/* =========================================
   募集要項：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  /* タブナビを少し小さく */
    .p-recruit{
        margin-bottom: 30px;
    }
  .p-recruit__tab-nav {
    gap: 10px;
  }
  .p-recruit__tab-item {
    width: 30%;
  }
  .tab-label {
    font-size: 12px;
  }

  /* テーブルのスマホ最適化（ここが重要） */
  .c-recruit-table, 
  .c-recruit-table tbody, 
  .c-recruit-table tr, 
  .c-recruit-table th, 
  .c-recruit-table td {
    display: block; /* ブロック要素にして縦積みに */
    width: 100%;
  }

  .c-recruit-table th {
    width: 100%;
    white-space: normal;
    background-color: #009959;
    padding: 10px;
  }
  
  .c-recruit-table td {
    margin-bottom: 8px; /* 次の項目との間隔 */
    border-top: none; /* 見出しとの境界線を消す */
  }
    .c-recruit-table caption {
        margin-top: 10px;
        margin-bottom: 5px;
    width: 100%;
    display: inline-block;
}
    dt{
        font-weight: bold;
    }
    dl.jddl dt {
    width: 100%!important;
}
}
/* =========================================
   フッター（CTA・お問い合わせ）セクション
========================================= */
.l-footer {
  width: 100%;
}

/* CTAエリア（緑背景） */
.l-footer__cta {
  background-color: #009959; /* メインカラーの緑 */
  color: #fff;
  padding: 30px 0;
  text-align: center;
}

.l-footer__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.l-footer__title {
  font-size: calc(28px + 6 * ((100vw - 890px) / 1030));
  font-weight: 700;
  margin-bottom: 0;
}

/* 問い合わせブロック共通 */
.l-footer__contact-block {
  margin-bottom: 0px;
}

.contact-label {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
    margin-top: 10px;
}

/* CONTACTボタン調整 */
.l-footer__btn {
  width: 100%;
  max-width: 400px; /* PCでは幅を広めに制限 */
  height: 60px; /* 高さを出して押しやすく */
  font-size: 24px;
  /* 既存の .c-btn-white を継承しつつ調整 */
    margin-bottom: 30px;
}

/* 電話リンク */
.l-footer__tel-link {
  display: inline-block;
  color: #fff;
  transition: opacity 0.3s;
  text-decoration: none;
}
.l-footer__tel-link:hover {
  opacity: 0.7;
}

.tel-number {
  font-size: calc(14px + 4 * ((100vw - 768px) / 512)); /* 電話番号は大きく強調 */
  font-weight: 700;
  line-height: 1.4;
  font-family: 'Noto Sans JP', sans-serif; /* 数字も見やすく */
}.tel-number-footer {
  font-size: calc(45px + 6 * ((100vw - 890px) / 1030)); /* 電話番号は大きく強調 */
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif; /* 数字も見やすく */
}

.tel-note {
  font-size: 14px;
  margin-top: 10px;
}
.tel-note-footer {
  font-size: 16px;
  margin-top: 10px;
}


/* コピーライトエリア */
.l-footer__copyright {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
}


/* =========================================
   フッター：SP版レスポンシブ (max-width: 768px)
========================================= */
@media (max-width: 768px) {
  .l-footer__cta {
    padding: 40px 0;
  }
  
  .l-footer__title {
    font-size: 22px; /* 少し小さく */
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .contact-label {
    font-size: 15px;
  }

  /* SPではボタンを画面幅いっぱいに */
  .l-footer__btn {
    max-width: 100%; 
      margin-bottom: 20px;

  }

  .tel-number {
    font-size: 2.4rem; /* スマホで改行しない程度に調整 */
  }
}
/* =========================================
   PageTopボタン
========================================= */
.c-pagetop {
  position: fixed;
  /* ご指定通り ％ で位置指定 */
  bottom: 5%; 
  right: 3%;
  z-index: 1000; /* 最前面に */
  
  width: 50px;
  height: 50px;
  background-color: #009959; /* ブランドカラーの緑 */
  color: #fff;
  border-radius: 50%; /* 丸くする */
    border: 3px solid #fff;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  opacity: 0; /* 最初は隠す */
  visibility: hidden; /* クリック判定も消す */
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  
  /* 最初は少し下に沈めておく（出現時にふわっと浮き上がらせるため） */
  transform: translateY(10px);
    
}

/* ホバー時の動き */
.c-pagetop:hover {
  background-color: #007a47;
  transform: translateY(-5px); /* 少し浮く */
}

/* 表示クラスがついた時 */
.c-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 元の位置へ */
}

/* SP版での位置調整（少し内側に入れるなど） */
@media (max-width: 768px) {
  .c-pagetop {
    width: 44px; /* 少し小さく */
    height: 44px;
    bottom: 3%;
    right: 4%;
      z-index: 50;
  }
}
/*求人情報*/
th{
    vertical-align: middle;
}
dl.jddl{
    width: 100%;
    margin: 0;
}
dl.jddl dt{
    width: 100%;
}
dl.jddl dd{
    width: 100%;
    margin-left: 0;
}
.salary-dl-sub dt{
    font-weight: bold;
}
.sr-left-new {
  width: 100%;
}
.sr-left-new-left {
  width: 700px;
  float:left;
}
.sr-left-new-right {
  width: 240px;
  float: right;
  padding-top: 25px;
}
.f-srh-side-banner {
  width: 240px;
  margin: -10px 0 0 0;
  box-sizing: border-box;
  padding: 0;
  border-left: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-top: 1px solid #E5E5E5;
  border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -webkit-border-radius: 6px 6px 0px 0px;
  color: #333333;
  background: #F4F4F4;
}
.f-srh-side-banner img {
  vertical-align: bottom;
}
.f-srh-side-banner2 {
  background: #000000;
  width: 240px;
  margin: 0 0 15px 0;
  padding: 0;
  border-left: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  border-radius: 0px 0px 6px 6px;
  -moz-border-radius: 0px 0px 6px 6px;
  -webkit-border-radius: 0px 0px 6px 6px;
  box-sizing: border-box;
}
.f-srh-side-banner2 a {
  padding: 10px 0;
  display: block;
  text-align: center;
}
.f-srh-side-banner3 {
  width: 240px;
  margin: 8px 0 0 10px;
  box-sizing: border-box;
  padding: 0;
}

.option-pr ul {
  list-style-type: none;
  font-size: 12px;
  margin: 7px 0 0 2em;
  padding: 0;
}
.option-pr li:first-child {
  background: url(https://www.hellowork.careers/images/icon-mental.png);
}
.option-pr li:last-child {
  background: url(https://www.hellowork.careers/images/icon-roumu.png);
  margin: 0 0 0 10px;
}
.option-pr li {
  height: 23px;
  background-repeat: no-repeat !important;
  padding: 3px 0 0 22px;
  float: left;
}
/* mental-healthモーダル */
.mental-health .modal_window {
  width: 500px;
  position: fixed;
  display: none;
  z-index: 2;
  margin: 0;
  background: #FFFFFF;
  padding: 20px 15px 10px 15px !important;
  border: 1px solid #000000;
}
.mental-health .modal_window p {
  margin: 0;
  padding: 0 0 15px 0;
}
.mental-health .modal_overlay {
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color:rgba(0,0,0,0.75);
}
.mental-health .modal_open {
  text-decoration: underline;
}
.mental-health .modal_open:hover {
  cursor: pointer;
  opacity: 0.7;
  text-decoration: none;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mental-health a.modal_close {
  background: #DDDDDD;
  color: #333333 !important;
  display: block;
  border-radius: 5px;
  text-align: center;
  margin: 5px auto 5px auto;
  padding: 10px 0;
  text-decoration: none;
}
.mental-health a.modal_close:hover {
  cursor: pointer;
  color: #FF0000;
}

/* 社労士バッジ */

.srh-badge {
  width: 630px;
  background: #F5F4EF;
  padding: 8px 10px 5px 10px;
  margin: 0;
  color: #333333;
  border: 1px solid #D0CEC2;
}
.srh-badge::after {
  content: "";
  display: block;
  clear: both;
}
.srh-badge a {
  cursor: pointer;
  color: #333333 !important;
  text-decoration: none;
  display: block;
}
.srh-badge dl {
  padding: 0;
  margin: 0;
}
.srh-badge dt {
  color: #333333;
  font-size: 14px;
  padding: 0 0 2px 0;
  margin: 0 0 4px 0;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
}
.srh-badge dd {
  padding: 0;
  margin: 0;
  line-height: 1.4;
}
.srh-name {
  background: #FFFFFF;
  padding: 5px 10px;
  margin: 5px auto 0 auto;
  font-weight: bold;
  box-sizing: border-box;
  position: relative;
}
.srh-name::after {
  content: "";
  display: block;
  clear: both;
}
.srh-name img {
  width: 60px;
  float: left;
  margin: 0 0 0 10px;
}
.srh-name strong {
  display: block;
  font-size: 15px;
  margin: -5px 0 0 0;
  padding: 0 0 20px 5px;
  position: absolute;
  top: 10px;
  left: 85px;
}
.srh-name p {
  width: calc(100% - 80px);
  float: right;
  font-size: 13px;
  color: #666666;
  padding: 0;
  margin: 0;
}
.srh-name p:nth-of-type(1) {
  padding: 26px 0 0 0;
}
.srh-name span {
  color: #999999;
  font-size: 13px;
  font-weight: normal;
}
.srh_btn {
  width: 150px;
  border: 1px solid #008040;
  color: #008040;
  text-align: center;
  padding: 4px;
  margin: 5px auto 0 auto;
  background: #FFFFFF;
  border-radius: 4px;
}
.srh-unit .modal_window {
  width: 600px;
  height: 460px;
  overflow-y: auto;
  position: fixed;
  display: none;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  padding: 0 !important;
  border: 1px solid #000000;
}
.srh-unit .modal_window p {
  margin: 0 40px 15px 40px !important;
  padding: 0;
  font-size: 16px;
}
.srh-unit .modal_window .title {
  text-align: center;
  font-size: 18px;
  font-weight :bold;
  padding: 20px 20px 30px 20px;
  margin:0;
}
.srh-unit .modal_window img {
  width: 100px;
  float: left;
  margin: 0 20px 0 80px;
}
.srh-unit .modal-srh-box {
  width: calc(100% - 220px);
  float: left;
  margin: 0;
}
.srh-unit .modal-srh-box::after {
  content: "";
  display: block;
  clear: both;
}
.srh-unit .modal_window strong {
  display: block;
  font-size: 14px;
  padding: 30px 0 10px 0;
}
.srh-unit .modal-srh-box span {
  line-height: 1.2;
  display: block;
  color: #666666;
  padding: 0 0 5px 0;
  box-sizing: border-box;
  font-size: 14px;
}
.modal_overlay {
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color:rgba(0,0,0,0.75);
}
.srh-unit .modal_open {
  text-decoration: none;
}
.srh-unit .modal_open:hover {
  cursor: pointer;
  opacity: 0.7;
  text-decoration: none;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.srh-unit a.modal_close {
  width: 200px;
  background: #DDDDDD;
  color: #333333;
  display: block;
  border-radius: 5px;
  text-align: center;
  margin: auto;
  padding: 5px 10px;
  text-decoration: none;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
}
.srh-unit a.modal_close:hover {
  cursor: pointer;
  color: #FF0000;
}
.srh-badge-link {
  text-align: right;
  margin: 5px 20px 15px 0;
}
.srh-badge-link-modal {
  text-align: right;
  margin: 0;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 10px;
}
/* /社労士バッジ */

/* 2018-10-15追加 */
/* ガイドマークと返信期限 */

.content-footer {
}
.content-footer::after {
  content: "";
  display: block;
  clear: both;
}
.content-left {
  float: left;
  padding: 10px 0 0;
}
.content-right {
  float: right;
}
.content-right ul {
  margin: 0 0 0 18px;
  padding: 5px 0 0 0;
  font-size: 14px;
  list-style-type: none;
  color: #848484;
}
.content-right ul::after {
  content: "";
  display: block;
  clear: both;
}
.content-right ul li {
  position: relative;
  float: left;
  margin: 0 20px 0 0;
}
.content-right ul li:last-child {
  margin: 0;
}
.content-right ul li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 8px;
  height: 3px;
  border-left: 2px solid #3498db;
  border-bottom: 2px solid #3498db;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.reply-limit {
  margin: 0;
  padding: 6px 0 0 2px;
  position: relative;
  font-size: 14px;
  text-align: right;
}
.row {
  padding: 0 15px;
}
.snip {
  padding-bottom: 10px;
}
.snip .sum {
  padding-bottom: 5px;
}
.location {
  white-space: initial;
}
#breadcrumbs {
  margin: 0 20px 15px 20px;
}
#breadcrumbs::after {  content: "";  display: block;  clear: both;}
#breadcrumbs div {
  float: left;
}
dl.salary-dl-main dt {
    margin: 0;
    padding: 6px 0 6px 8px;
    background: #EFEFEF;
    font-weight: bold;
}
dl.salary-dl-sub dt {
    margin: 0;
    padding: 0;
    background: none;
    /*font-weight: normal;*/
}
dl.salary-dl-main dd {
    margin: 7px 0 0 0;
    padding: 0 0 10px 10px;
}
dl.jddl dt::before, dl.jddl-pdleftg0 dt::before,dl.salary-dl-sub dt::before {
    content: "▼";
}
dl.jddl dd, dl.jddl-pdleftg0 dd {
    margin: 0;
    padding: 0 0 10px 10px;
}