@charset "utf-8";

  /* ----------------------------------
    共通スタイル・リセット
  ---------------------------------- */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size:15px;
    color: #333333;
    line-height: 1.5;
    background-color: #ffffff;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  ul {
    list-style: none;
  }
  .marker-line {
    /* 下半分（50%〜100%の位置）に黄色のグラデーションを引く */
    background: linear-gradient(transparent 50%, #f8e962 50%);
    /* マーカーの太さや位置の微調整（必要に応じて変更） */
    padding: 0 4px;
    font-weight:bold;
  }

 /* ----------------------------------
   ヘッダー（2段構成）
---------------------------------- */
header {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0);
  position: sticky;
  top: 0;
  z-index: 9999;
  border-bottom: 1px solid #aaaaaa;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px 20px 10px 20px;
  display: flex;
  flex-direction: column; /* 縦方向（2段）に並べる */
  gap: 15px;
}
/* 一段目（ロゴとエントリーボタン） */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo-img {
  height: 50px;
  width: auto;
  display: block;
}

/* ----------------------------------
   二段目（ナビゲーション）
---------------------------------- */
.header-nav {
  width: 100%;
  background-color: #ffffff; /* ※薄い黄色にする場合は #fffdf0 */  
  padding-top: 5px;  
}
.nav-list {
  display: flex;
  align-items: center;
  justify-content: center; /* PCでは中央寄せ */
  color: #222222;
  font-size: 16px;
  font-weight: bold;
}
/* 各メニュー項目の間に線を引く */
.nav-list li {
  border-right: 1px solid #aaaaaa;
}
.nav-list li:first-child {
  border-left: 1px solid #aaaaaa;
}
/* リンク共通のレイアウトと余白 */
.nav-list a {
  display: inline-block;
  padding: 5px 40px; /* 上下5px、左右40pxをまとめてスッキリ指定 */
  transition: color 0.2s;
}
/* アクティブ（現在地）のスタイル（下線は引かず文字色のみ変更） */
.nav-list a.active {
  color: #1f5a99;
}
.nav-list a:hover {
  color: #1f5a99;
}

/* ----------------------------------
   レスポンシブ（スマホ対応：768px以下）
---------------------------------- */
@media (max-width: 768px) {
  .header-inner {
    padding: 10px 10px 10px 10px;
    gap: 10px;
  }
  .logo-img {
    height: 30px;
  }
  /* スマホの二段目は「会社情報」「お問合せ」を非表示 */
  .nav-list .pc-menu {
    display: none;
  }
  /* スマホの二段目メニューの全体位置調整 */
  .nav-list {
    width: 100%;                  /* ★幅を100%にして確実に画面全体に広げる */
    font-size: 15px;
    justify-content: space-around; /* 均等配置 */
    padding: 0;                   /* ★不要な余白をリセット */
    margin: 0;
  }
  /* 各メニュー項目の枠幅調整 */
  .nav-list li {
    flex: 1;                      /* ★3つの幅を均等に分ける */
    text-align: center;           /* ★各枠の中で文字を中央揃えにする */
  }
  /* スマホ時のリンク余白をリセット */
  .nav-list a {
    display: block;               /* ★タップ領域を広げて中央揃えを安定させる */
    padding: 5px 0;               /* ★左右のpaddingを0にして右寄りを防ぐ */
    width: 100%;
  }
}
  /* ----------------------------------
   ヘッダーの「かんたんエントリー」ボタン
---------------------------------- */
.btn-header {
  position: relative; /* 光のエフェクトを配置するために必要 */
  overflow: hidden;   /* ボタンからはみ出た光を隠すために必要 */
  display: inline-block;
  
  font-size: 15px;
  color: #ffffff;
  font-weight: normal;
  background-color: #D67C1D;
  background: linear-gradient(#DB8823 0%, #DB8823 50%, #D67C1D 50%, #D67C1D 100%);    
  border-radius: 5px;
  padding: 10px 18px;
  box-shadow: 1px 2px 3px rgba(63, 63, 63, 0.6);
}
/* 上品にキラッと光るエフェクト */
.btn-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 8s infinite;
}
.btn-header:hover {
  background: linear-gradient(#e99c3e 0%, #e99c3e 50%, #DB8823 50%, #DB8823 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  transition: all 0.2s;
}
@media (max-width: 768px) {
  .btn-header {
    font-size: 13px;
    padding: 8px 8px;
  }
}

  /* ----------------------------------
   ページヘッダー（共通ベース）
   ---------------------------------- */
  .page-header {
      width: 100%;
      height: 60vw;
      min-height: 250px;
      max-height: 450px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      padding: 0 20px;
  }
  /* ページごとの画像指定 */
  .page-header.recruit {
      background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('img/recruit/recruit.webp');
  }
  .page-header.voice {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/voice/voice.webp');
  }
  .page-header.company {
      background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('img/company.webp');
      height: 25vw;
      min-height: 200px;
      max-height: 250px;
  }
  .page-header.contact {
      background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('img/contact.webp');
      height: 25vw;
      min-height: 200px;
      max-height: 250px;
  }
  .page-header.request {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/request.webp');
      height: 25vw;
      min-height: 200px;
      max-height: 250px;
  }
  .page-header.privacy {
      background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('img/privacy.webp');
      height: 25vw;
      min-height: 200px;
      max-height: 250px;
  }
  .page-header-content h1 {
      font-size: 36px;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 8px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  .page-header-content p {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 3px;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  @media (max-width: 768px) {
      .page-header {
          min-height: 200px;
      }
      .page-header-content h1 {
          font-size: 26px;
      }
      .page-header-content p {
          font-size: 14px;
      }
  }

  /* ----------------------------------
      セクション設定
  ---------------------------------- */
  section {
    width: 100%; /* 横幅いっぱいに広げる */
  }
  /* 背景色ありのセクション（背景色だけを適用） */
  section.bg-color {
    background-color: #e8dcd1; /* ライトグレーE1E9F2 dcebfc FDF1EC*/
  }
  /* 中身のコンテンツをまとめる共通エリア */
  .section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 30px 60px 30px;
  }  
  /* タイトルの設定 */
  .section-title {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    color: #1f5a99;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 2px solid #1f5a99;
    text-align: center;
  }
  @media (max-width: 768px) {
    .section-title {      
      margin-bottom: 30px;      
      font-size: 19px;      
      padding-bottom: 8px;      
    }
  }

  /* ----------------------------------
      ボタン
  ---------------------------------- */
  
  /* ボタンの基本設定 */
  .btn-main {
    position: relative; /* 光のエフェクトを配置するために必要 */
    overflow: hidden;   /* ボタンからはみ出た光を隠すために必要 */
    
    box-shadow: 0px 2px 5px #bbb;
    display: inline-block;
    background-color: #D67C1D;
    background: linear-gradient(#DB8823 0%, #DB8823 50%, #D67C1D 50%, #D67C1D 100%);
    color: #ffffff;
    font-weight: normal;
    font-size: 18px;
    padding: 15px 50px;
    border-radius: 5px;
    box-shadow: 0 5px 6px rgba(103, 63, 51, 0.5);/* 横、縦、ぼかし */
  }
  /* 上品にキラッと光るエフェクト */
  .btn-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%, /* 不透明度を下げて馴染ませています */
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 8s infinite; /* 10秒に1回の間隔に調整 */
  }
  /* 光が移動するアニメーション */
  @keyframes shine {
    0% {
      left: -75%;
    }
    20% {
      left: 125%;
    }
    100% {
      left: 125%; /* 残りの時間は待機 */
    }
  }
  .btn-main:hover {
    background:linear-gradient(#e99c3e 0%, #e99c3e 50%, #DB8823 50%, #DB8823 100%);
    transform: translateY(-2px);
    transition: all 0.2s;
  }
  @media (max-width: 768px) {    
    .btn-main {
      font-size: 15px;
      padding: 14px 24px;
      width: 85%;          /* 100% から 85% や 80% に減らす */
      max-width: 280px;    /* 広がりすぎないように最大幅を指定 */
      margin: 0 auto;      /* ボタンを中央に寄せる */
      display: block;      /* margin: 0 auto を効かせるために必要 */  
      text-align: center;
    }
  }

  /* ----------------------------------
      サブボタン
  ---------------------------------- */
  .btn-sub {
    display: inline-block;
    border: 2px solid #333333;
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    background-color: #ffffff;
    padding: 15px 40px;
    margin-top: 10px;
    border-radius: 5px;    
  }
  .btn-sub:hover {    
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3);/* 横、縦、ぼかし */
    transform: translateY(-2px);
    transition: all 0.2s;
  }
  @media (max-width: 768px) {
    .btn-sub {
      font-size: 15px;
    }    
  }
  /* ----------------------------------
      送信ボタン
  ---------------------------------- */
    /*送信ボタンエリア*/
    .send-area {
      width:800px;
      margin: 0 auto;
      text-align: right;
      padding-top: 30px;      
    }   
    .btn-send {
      width: 67%;
      padding: 10px 0px;
      color: #ffffff;
      background-color: #3897E0;      
      border: 3px;
      border-radius: 5px;
      font: inherit;
      font-size: 18px;
      font-weight: normal;
      cursor: pointer;      
      box-shadow: 0 3px 7px rgba(0,0,0,0.4);      
      transition: all 0.2s;
    }
    .btn-send:hover {
      background: linear-gradient(#3188e6, #1f5a99);
      transform: translateY(-2px);
    }
    /* スマホ表示対応 */
    @media (max-width: 768px) {
      .send-area {
        width: 100%;
      }    
      .btn-send {
        width: 100%;
        padding: 12px 0;
      }
    }
  /* ----------------------------------
       文字内リンク
    ---------------------------------- */
    a.link {
      color: #D67C1D;
      font-weight:bold;
      text-decoration: underline;      
    }
  /* ----------------------------------
       必須・任意バッジ
    ---------------------------------- */     
    .badge {
      display: inline-block;
      font-size: 13px;
      font-weight: bold;
      padding: 2px 8px;
      border-radius: 4px;
      margin-right: 8px;
    }
    .badge-required {
      background-color: #a01515;
      color: #ffffff;
    }
    .badge-optional {
      background-color: #a0aec0;
      color: #ffffff;
    }

  /* ----------------------------------
       テーブル
    ---------------------------------- */
    .table {      
      border-collapse: collapse;
      background-color: #ffffff;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    }
    .table th, .table td {      
      border-bottom: 1px solid #1f5a99;      
    }
    .table th {      
      background-color: #e8dcd1;
      color: #1f5a99;      
      font-weight: bold;
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
    }    
    .table tr:last-child th,
    .table tr:last-child td {
      border-bottom: none;
    }

    /* テーブル内のリスト */
    .table-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .table-list li {
      position: relative;
      padding-left: 1.2em;
      margin-bottom: 6px;
    }
    .table-list li:last-child {
      margin-bottom: 0;
    }
    .table-list li::before {
      content: "・";
      position: absolute;
      left: 0;
      top: 0;
    }
    .table-note {
      margin-top: 10px;
    }    
    
    /* ページごとのテーブル指定 */
    /* 求人情報 */
    .table.recruit {
      width: 100%;    
    }
    .table.recruit th, .table.recruit td {
      padding: 10px 20px 10px 20px;
    }
    .table.recruit th {
      width: 20%;
    }
    .table.recruit td {
      width: 80%;
    }    
    /* 会社情報 */
    .table.company {
      margin: 0 auto;     
    }
    .table.company th, .table.company td {
      padding: 10px 40px 10px 20px;
    }
    .table.company th {
      width: 25%;
    }
    .table.company td {
      width: 75%;
    }
    @media (max-width: 768px) {
      .table.recruit{      
        border-radius: 0px;      
      }
      .table.recruit th, .table.recruit td {
        display: block;
        width: 100%;
      }
      .table.recruit th {               
        border-bottom: 1px solid #1f5a99;
        border-left: 3px solid #1f5a99;
        padding: 5px 20px;
      }
      .table.recruit td {
        border-bottom: none;
        padding: 10px;
      }
      .table.company{      
        border-radius: 0px;      
      }
      .table.company th, .table.company td {
        display: block;
        width: 100%;
      }
      .table.company th {               
        border-bottom: 1px solid #1f5a99;
        border-left: 3px solid #1f5a99;
        padding: 5px 20px;
      }
      .table.company td {
        border-bottom: none;
        padding: 10px;
      }
    }
    
  
  /* ----------------------------------
       CV（応募誘導）エリア
  ---------------------------------- */   
  .cta-section {
    background: #ffffff;
    border-radius: 0px;
    text-align: center;
    padding: 50px 20px;
    margin: 20px auto 20px;
    max-width: 1100px;
  }    
  .cta-text {
    font-size: 20px;
    margin-bottom: 15px;
    color: #960326;      
    font-weight: bold;
  }
  @media (max-width: 768px) {
    .cta-section {
      max-width: 100%;
      padding: 40px 15px;
    }
    .cta-text {
      font-size: 15px;
    }      
  }

 /* ----------------------------------
    トップに戻るボタン
   ---------------------------------- */
  .page-top-btn {
    position: fixed;
    bottom: 0;          /* 画面の下端にピッタリくっつける */
    right: 0;           /* 画面の右端にピッタリくっつける */
    left: auto;         /* 左側の指定を解除 */
    z-index: 999;
    width: 50px;        /* 正方形のサイズ（お好みで調整してください） */
    height: 50px;
    background-color: rgba(0, 0, 0, 0.4); /* 黒の半透明（0.6の部分で濃さを調整可能） */
    color: #ffffff;
    border-radius: 0;   /* 真四角にする（角丸をなくす） */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;   /* 画面端に密着させるため影を削除 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
  }
  .page-top-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* ホバー時は少し濃くする */
  }
  /* 表示状態のクラス */
  .page-top-btn.is-active {
    opacity: 1;
    visibility: visible;
  }
  /* スマホ表示時の微調整（必要に応じて） */
  @media (max-width: 768px) {
    .page-top-btn {
      bottom: 0;
      right: 0;
      width: 50px;
      height: 50px;
    }
  }

/* ----------------------------------
   フッター
---------------------------------- */
footer {
  background: #1f5a99; /* グレーなら383E4B */
  color: #ffffff;
  padding: 50px 30px 25px 30px;  
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;              /* ★ 会社名エリアとサイトマップエリアの間の距離 */
  padding-bottom: 40px;
}
.footer-info { 
  width: 280px;           /* ★ 会社名エリアの幅を指定（調整可能） */
}
.footer-info .footer-company {
  font-size: 17px;
  margin: 10px 0px 15px 40px;
  color: #ffffff;
}
.footer-info p {
  font-size: 13px;
  color: #DCDCDC;  
}

/* ----------------------------------
   ナビゲーションの3列レイアウト ＋ 縦線（PC用）
---------------------------------- */
.footer-nav-columns {
  display: flex;
  gap: 60px; /* カラム（列）同士の間隔 */
}

.footer-col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px; /* 各項目の縦の隙間 */
  /* 各列の右側に縦線を引く（1列目と2列目の間、2列目と3列目の間） */
  border-right: 1px solid rgba(255, 255, 255, 0.5); 
  padding-right: 40px; /* 縦線と文字の間に余白を作る */
}

/* 3列目（一番右側）の右側の線は不要なので消す */
.footer-col:last-child {
  border-right: none;
  padding-right: 0;
}

.footer-col a {
  color: #ffffff;
  font-size: 14px;
  transition: color 0.2s;
  text-decoration: none;
  white-space: nowrap; /* 項目名が途中で不自然に改行されるのを防ぐ */
}

.footer-col a:hover {
  color: #DCDCDC;
}

.copyright {
  text-align: center;
  font-size: 14px;
  color: #DCDCDC;
  padding-top: 25px;
}

/* ----------------------------------
   レスポンシブ（スマホ対応：768px以下）
---------------------------------- */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    padding-bottom: 20px;
  }

  .footer-info {
    width: 100%;
  }

  /* スマホ時は3列と縦線を解除し、縦に繋がったブロック状にする */
  .footer-nav-columns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }

  .footer-col {
    display: contents; /* ulタグの影響をなくし、中のliを直接並べる */
    border-right: none;  /* スマホ時は縦線を消す */
    padding-right: 0;
  }

  .footer-col li {
    width: 100%;
  }

  .footer-col a {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 15px;
    white-space: normal;
  }
}