@charset "utf-8";
/* CSS Document */

/* --- 共通設定 --- */
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #2B303A;
  line-height: 1.6;
}

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

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

/* --- ヘッダー --- */
.header {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E0E7ED; /* 薄いグレー線ですっきり */
  padding: 15px 0;
}

.header-inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between; /* ロゴとメニューを左右に振る */
  align-items: center;
}

.header-logo img {
  max-height: 50px; /* ロゴの高さ調整 */
  display: block;
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 30px; /* メニュー間の余白 */
}

.header-nav a {
  color: #1A2E40; /* 濃紺 */
  font-weight: bold;
  font-size: 15px;
}

.header-nav a:hover {
  color: #007BFF; /* ホバーで少し明るい青に */
}

/* お問い合わせボタンのデザイン */
.header-nav a.btn-contact {
  background-color: #1A2E40;
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
}

.header-nav a.btn-contact:hover {
  background-color: #2B4661; /* ホバーで少し明るく */
  transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* --- メイン --- */

/* コンテナ（メイン幅） */
.container {
  max-width: 850px;
  margin: 40px auto;
  padding: 0 10px;
}

/* h1 求人告知 */
.page-title {
  color: #1A2E40;
  font-size: 28px;
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 3px solid #1A2E40; /* 濃紺のアクセントライン */
}


/* 記事本文内のテーブル全体のスタイル */
.recruit-body table {
  width: 100% !important; /* エディタの幅指定を無視して100%に */
  border-collapse: collapse;
  margin-bottom: 30px;
  border: none !important; /* HTMLのborder="1"を打ち消す */
  border-top: 2px solid #1A2E40 !important; /* 上部に濃紺のライン */

}


/* 1列目（項目名）のスタイル */
.recruit-body td:first-child {
  width: 25% !important; /* 幅を25%に固定（インラインスタイルを上書き） */
  background-color: #F4F7F9; /* 薄いブルーグレー */
  color: #1A2E40;
  font-weight: bold;
  padding: 15px;
  border-bottom: 1px solid #E0E7ED;
  vertical-align: top;
}

/* 2列目（内容）のスタイル */
.recruit-body td:last-child {
  width: 75% !important; /* 残りの幅を当てる */
  padding: 15px;
  border-bottom: 1px solid #E0E7ED;
  line-height: 1.8;
  background-color: #FFFFFF;
}

/* 共通の形 */
.recruit-entry-title .badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 4px;
  color: #FFFFFF !important;
  font-weight: bold;
  background-color: #007BFF; /* とりあえず全部この色で固定 */
  margin-right: 10px;
  vertical-align: middle;
}









/* 応募ボタンエリア */
.recruit-action {
  text-align: center;
  margin-top: 50px;
}

.btn-entry {
  display: inline-block;
  background-color: #1A2E40;
  color: #FFFFFF;
  padding: 20px 60px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
  transition: 0.3s;
  text-decoration: none;
}

.btn-entry:hover {
  background-color: #007BFF; /* ホバーで鮮やかな青に */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- 会社概要 --- */

/* 外枠の調整 */
.company-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 40px;
  position: relative;
}

/* リスト全体の装飾 */
.profile-list {
  border-top: 1px solid #333;
}

.profile-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

/* 項目名（左側） */
.profile-row dt {
  width: 250px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0; /* 幅が勝手に縮まないように固定 */
}

/* 内容（右側） */
.profile-row dd {
  flex-grow: 1;
  margin-left: 0;
  line-height: 1.6;
  color: #555;
}

/* --- スマホ表示（640px以下）の調整 --- */
@media screen and (max-width: 640px) {
  .profile-row {
    display: block; /* 横並びを解除 */
    padding: 15px 0;
  }

  .profile-row dt {
    width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
    color: #888; /* 項目名を少し控えめに */
  }

  .profile-row dd {
    font-size: 16px;
    color: #000;
  }
}

/* --- 個人情報保護方針 --- */

/* 外枠の調整 */
.privacy-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.8; /* 行間を広めに */
  color: #333;
}

/* リード文 */
.privacy-lead {
  margin-bottom: 40px;
  font-size: 15px;
}

/* 各条文の見出し */
.privacy-item-title {
  font-size: 18px;
  font-weight: bold;
  border-left: 4px solid #333; /* 縦線で強調 */
  padding-left: 15px;
  margin: 40px 0 20px;
  color: #1a1a1a;
}

/* 本文テキスト */
.privacy-content p {
  margin-bottom: 20px;
  font-size: 15px;
}

/* 箇条書き */
.privacy-list {
  margin-bottom: 20px;
  padding-left: 20px;
}

.privacy-list li {
  margin-bottom: 10px;
  list-style-type: disc;
}

/* お問い合わせ窓口のボックス */
.contact-box {
  background-color: #f9f9f9;
  padding: 25px;
  border: 1px solid #ddd;
  margin-top: 20px;
  font-size: 15px;
}

/* スマホ表示の調整 */
@media screen and (max-width: 640px) {
  .privacy-item-title {
    font-size: 17px;
  }
}

/* --- 特商法 --- */

/* 外枠の調整 */
.tokusho-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* リスト全体の装飾 */
.tokusho-list {
  border-top: 1px solid #333;
}

.tokusho-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

/* 項目名（左側） */
.tokusho-row dt {
  width: 250px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
}

/* 内容（右側） */
.tokusho-row dd {
  flex-grow: 1;
  margin-left: 0;
  line-height: 1.6;
  color: #444;
}

/* --- スマホ表示（640px以下）の調整 --- */
@media screen and (max-width: 640px) {
  .tokusho-row {
    display: block; /* 横並びを解除 */
    padding: 15px 0;
  }

  .tokusho-row dt {
    width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
    color: #888;
  }

  .tokusho-row dd {
    font-size: 15px;
    color: #000;
  }
}

/* --- お問い合わせ --- */


/* 1. 入力枠（テキストボックス、メール、ドロップダウン、本文）全体のデザイン */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
select, 
textarea {
  width: 100%;                  /* 横幅をいっぱい（100%）に広げる */
  padding: 12px 15px;           /* ★重要：内側の余白を広げて上下に厚みを持たせる */
  font-size: 16px;              /* ★重要：文字の大きさを16pxに（スマホで拡大されるのを防ぐ） */
  border: 2px solid #ddd;       /* 枠線の太さを「2px」にして少し濃いめのグレーに */
  border-radius: 6px;           /* 枠線の角を少し丸くして柔らかい印象に */
  background-color: #fff;       /* 背景色は白 */
  box-sizing: border-box;       /* 枠線や余白を含めたサイズ計算にする（はみ出し防止） */
  transition: border-color 0.3s; /* クリックした時のアニメーション効果 */
}

/* 2. 本文（お問合せ内容など）のテキストエリアの高さを確保 */
textarea {
  min-height: 150px;            /* 縦幅の最低サイズを大きくする */
  resize: vertical;             /* ユーザーが縦方向にだけサイズ調整できるようにする */
}

/* 3. マウスを合わせた時、クリック（選択）した時に枠線の色を変える */
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
select:focus, 
textarea:focus {
  border-color: #0076a3;        /* ★クリックした時に枠線を好みのブランドカラー（例: 青）にする */
  outline: none;                /* ブラウザ標準の余計な青枠を消す */
  box-shadow: 0 0 5px rgba(0, 118, 163, 0.2); /* 枠線の周りをほんのり光らせる */
}

/* 4. 送信ボタン・確認ボタンのデザインも合わせてかっこよくする */
input[type="submit"], 
input[type="button"],
.btn-submit {
  display: block;
  width: 250px;                 /* ボタンの横幅 */
  margin: 30px auto 0;          /* ボタンを中央に配置し、上に余白を作る */
  padding: 15px 30px;           /* ボタン内の余白（押しやすくする） */
  font-size: 18px;              /* 文字を少し大きめ太字に */
  font-weight: bold;
  color: #fff;                  /* 文字色は白 */
  background-color: #0076a3;    /* ★ボタンの背景色（お好みの色に変えてください） */
  border: none;
  border-radius: 30px;          /* カプセル型の丸いボタンにする */
  cursor: pointer;
  transition: background-color 0.3s;
}

/* ボタンにマウスを乗せた時に少し暗くする効果 */
input[type="submit"]:hover, 
input[type="button"]:hover {
  background-color: #005577;
}





/* --- フッター --- */
.footer {
  background-color: #1A2E40; /* 背景を濃紺に */
  color: #FFFFFF;
  padding: 40px 0;
  margin-top: 60px;
}

.footer-inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.footer-links a {
  color: #FFFFFF;
  font-size: 13px;
  opacity: 0.8;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.copyright {
  font-size: 12px;
  opacity: 0.6;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 600px) {
  .header-inner {
    flex-direction: column; /* 縦並びに */
    gap: 15px;
  }
  
  .header-nav ul {
    gap: 15px;
  }

  .header-nav a {
    font-size: 13px;
  }
    .recruit-body td:first-child {
    width: 35% !important; /* スマホでは少し項目名を広げる */
    font-size: 14px;
  }
  .recruit-body td:last-child {
    font-size: 14px;
  }

}