/* 基本レイアウト */
html, body {
margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横揺れ防止 */
background-color: #f5f5f5;
}

/* 全ての要素に明朝体を適用 */
html, body, *, 
input, button, select, textarea {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "MS Mincho", serif !important;
}

/* タイトルなどは特に太めの明朝にするとかっこいいです */
h1, h2, h3, .section-title, .gallery-title h2 {
    font-weight: 700; /* または 900 */
}

body {
    -webkit-font-smoothing: antialiased; /* 文字のギザギザを抑える */
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.03em;             /* 文字間隔をほんの少し広げる */
    line-height: 1.8;                   /* 行間をゆったり取る */
}

/* 検索フォームの入力欄などは少し太めにするのがおすすめ */
.search-input {
    font-weight: 400;
}

a {
  text-decoration: none;
  color: inherit;
  letter-spacing: 1.2px;
}
a.initial {
  text-decoration: underline;
  color: initial;
}

li {
  list-style: none;
}
h1,
h2,
h4,
h5,
p,
span {
  letter-spacing: 1.2px;
  line-height: 1.7;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

table {
  width: 100%;
  table-layout: fixed;
  word-break: break-word;
  word-wrap: break-word;
}
.inline {
  display: inline-block;
}



/* =========================
  *アニメーション*
========================= */

.minimal-mission {
  width: 100%;
  /* 上下の余白をさらにタイトに調整 */
  padding: 60px 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
	opacity: 0; /* 最初は隠しておく */
  transform: translateY(30px); /* 少し下げておく（リッチな演出） */
  transition: all 1.0s ease; /* 動きを滑らかに */
}

/* スクロールが到達した時に付与されるクラス */
.minimal-mission.is-active {
  opacity: 1;
  transform: translateY(0);
  /* ここに既存のアニメーション（animationプロパティなど）を記述 */
}

.mission-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 1400px;
  min-height: 300px; /* 長方形の高さを少し低くしてスマートに */
}

/* 長方形のフレーム */
.mission-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.draw-path {
  fill: none;
  /* 白背景に映える少し濃いめのゴールド、またはアクセントカラー */
  stroke: #b8860b; 
  stroke-width: 1.5; /* 少し太くして存在感を出します */
  stroke-dasharray: 1500; 
  stroke-dashoffset: 1500;
  animation: draw-rect 2.5s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes draw-rect {
  to { stroke-dashoffset: 0; }
}

.mission-content {
  text-align: center;
  z-index: 2;
  opacity: 0;
  animation: text-reveal 1.2s forwards 1s;
  padding: 20px;
}

/* サブラベル：少し落ち着いた色に */
.mission-sub {
  color: #b8860b; 
  font-size: 0.9rem;
  letter-spacing: 0.6em;
  margin-bottom: 20px;
}

/* メインテキスト：濃い色にして読みやすく */
.mission-main {
  color: #1a202c; /* 深い紺色、または黒に近いグレー */
  font-size: clamp(22px, 3.5vw, 42px); 
  line-height: 1.6;
  font-weight: 700;
}

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


@media screen and (max-width: 768px) {
  .minimal-mission {
    /* 上下の余白をスマホ向けにコンパクトに調整 */
    padding: 40px 0; 
  }

  .mission-container {
    /* 左右のゆとりをキープしつつ、少し高さを自動調整できるように */
    width: 92%;
    min-height: 220px; 
  }

  .mission-content {
    /* スマホで文字が枠にぶつからないよう内側の余白をしっかり確保 */
    padding: 15px;
  }

  .mission-sub {
    /* 文字サイズを少しだけ小さくし、文字間隔（レタースペース）が広すぎて
       スマホではみ出るのを防ぐために0.4emに微調整 */
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    margin-bottom: 12px;
  }

  .mission-main {
    /* スマホ（375px〜）で16px〜22px程度に綺麗に収まるサイズ感に変更 */
    font-size: clamp(16px, 4.5vw, 22px);
    line-height: 1.5;
    /* 長い文章でも不自然に途切れないように、単語の区切りで改行を許可 */
    word-break: break-all;
  }
}


/* =========================
  *header*
========================= */

.site-header {
  position: fixed; /* 常に上部に固定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* 上部を少し暗くして文字を見やすくする */
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  padding: 20px 40px;
}

.header-inner {
display: flex;
  align-items: center;
  justify-content: space-between; /* 左右に振り分け */
  max-width: 1500px; 
  margin: 0 auto;
  padding: 0 40px; /* 画面を小さくした時のための余白 */
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 60px; /* ロゴとメニューの間隔 */
  flex-grow: 2; /* これで右側のボタンを右端へ追いやり、自分は左へ伸びる */
}

/* ロゴ画像のサイズ調整 */
.logo-img {
  height: 30px; /* サイトに合わせて調整してください */
  width: auto;
  display: block;
}

/* ナビゲーション */
.header-nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
}
.header-nav a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 13px;
}
.header-nav .en {
  display: block;
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
}

/* ヘッダーボタン */
.header-btns {
  display: flex;
  gap: 15px;
  flex-shrink: 0; /* ボタンが潰れないように固定 */
}

.btn-outline, .btn-filled {
  padding: 10px 20px;
  font-size: 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: 0.3s;
}

.btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
}

.btn-filled {
  background: #fff;
  color: #000;
  font-weight: bold;
}

.btn-outline:hover, .btn-filled:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}


/* ==========================================
 * スマホ用（画面幅768px以下）ヘッダー完全一列化
 * ========================================== */
@media screen and (max-width: 768px) {

  /* ヘッダー全体をシンプルに */
  html body .site-header,
  html body .header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;  /* ロゴを左端に */
    padding: 10px 15px;
    height: 60px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ロゴのみ表示 */
  html body .site-header .header-logo,
  html body .header-container .site-logo {
    margin: 0;
    flex-shrink: 0;
    max-width: 140px;
    display: flex;
    align-items: center;
  }
	
  html body .header-nav {
    display: none !important;
  }	
	

  html body .site-header .header-logo img,
  html body .header-container .site-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ナビゲーション・その他要素を非表示 */
  html body .site-header .header-nav,
  html body .header-container .gnav-list {
    display: none;  /* スマホでは完全に消去 */
  }

.header-btns {
  display: flex;
  gap: 0;                       /* ボタン間の隙間をなくす */
  flex-shrink: 0;
  
  /* 【重要】下部に固定 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  
  width: 100%;
  z-index: 999;                 /* 他の要素より前面に */
  
  box-sizing: border-box;
}

.btn-outline, .btn-filled {
  /* 【重要】スマホ幅ぴったりの四角にする */
  flex: 1;                      /* 均等に幅を分割 */
  padding: 16px 10px;           /* ボタン内の余白 */
  font-size: 12px;
  text-decoration: none;
  border-radius: 0;             /* 角を取る */
  border: none;
  transition: 0.3s;
  cursor: pointer;
  text-align: center;
}

.btn-outline {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);  /* 背景を少し暗く */
  border-right: 1px solid rgba(255, 255, 255, 0.2);  /* ボタン間の区切り線 */
}

.btn-filled {
  background: #fff;
  color: #000;
  font-weight: bold;
}

.btn-outline:hover, .btn-filled:hover {
  opacity: 0.8;
  transform: none;              /* スマホではtranslateYを無効化 */
}

.btn-outline:active, .btn-filled:active {
  opacity: 0.6;                 /* タップ時のフィードバック */
}
}

/* =========================
  *main*
========================= */
/* ベースレイアウト */
.hero-section {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* 背景スライドショーの設定 */
.background-slideshow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0; /* 上端に固定 */
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top; /* 中央上部を基準にする */
  background-repeat: no-repeat;
  animation: fadeAnimation 15s infinite;
  opacity: 0;
}

/* 3枚の画像を順番に表示させるための遅延設定 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }

@keyframes fadeAnimation {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; transform: scale(1.1); } /* ふわっとズームしながら消える */
  100% { opacity: 0; }
}

/* 下部の暗めグラデーション（可読性アップ） */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  z-index: 2;
}

/* コンテンツ配置 */
.hero-container {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 60px 80px; /* 左右の余白を少し広めに */
  display: flex;
  flex-direction: column;
  /* 下記を調整することで、コンテンツ全体を上に移動 */
  justify-content: flex-start; /* 上から配置を開始 */
  padding-top: 50vh; /* ヘッダーとの被りを避けつつ、上部に配置 */
}

.main-copy {
  font-size: 4rem; /* image_66e15b.jpgに合わせた力強いサイズ */
  line-height: 1.2;
  margin: 15px 0;
}

/* ボタンデザイン */
.cta-area {
  align-self: flex-end; /* 右下に配置 */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cta-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 350px;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: 0.3s;
}

.cta-button.primary {
  background: #fff;
  color: #000;
}

.cta-button:hover {
  transform: translateX(-10px);
  background: rgba(255, 255, 255, 0.2);
}


@media screen and (max-width: 768px) {
  
  /* ===== ヒーローセクション全体 ===== */
  .hero-section {
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* ===== スライド画像：完全にスマホ幅に合わせる ===== */
  .slide {
    /* 【最重要】画像を親要素いっぱいに拡大 */
    width: 100%;
    height: auto;
    min-height: 50%;           /* 最小高さ（文字エリアのために50%確保） */
    
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* 画像をコンテナの上部に固定 */
    flex-shrink: 0;
    object-fit: cover;         /* imgタグの場合に効く */
  }

  /* ===== コンテンツ配置：画像下に文字を配置 ===== */
  .hero-container {
    /* 文字を下部に配置するようにフレックス設定 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* 下部に寄せる */
    align-items: flex-start;    /* 左寄せ */
    
    padding: 30px 20px;         /* 左右の余白 */
    background: rgba(0, 0, 0, 0.3);  /* 文字の背景を暗くして視認性UP（オプション） */
    flex: 1;                    /* 残り高さを埋める */
    
    gap: 20px;
  }

  /* ===== メインコピー ===== */
  .main-copy {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 100%;
  }

  /* ===== ボタンエリア ===== */
  .cta-area {
    display: flex;
    flex-direction: column;     /* スマホではボタンを縦積み */
    gap: 12px;
    width: 100%;
    align-self: stretch;
  }

  /* ===== 各ボタン ===== */
  .cta-button {
    width: 100%;
    padding: 14px 20px;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease;
  }

  .cta-button:hover,
  .cta-button:active {
    transform: translateY(-2px);
  }

}


/* =========================
  *search　ポップアップ*
========================= */

.about-section {
  padding: 100px 40px;
  color: #333;
}

.about-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px; /* 隙間も少し広げるとゆとりが出ます */
}

/* 画像のスタイル */
.about-image-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px; /* 少し角を丸くしてモダンに */
  aspect-ratio: 16 / 9;
}

.about-image-wrap img {
width: 100%;
  height: 100%;     /* 親要素の比率に合わせる */
  object-fit: cover; /* 比率を保ったまま枠いっぱいに広げる（重要！） */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-image-wrap:hover img {
  transform: scale(1.05); /* 軽くズーム */
}

/* テキストのスタイル */
.about-text {
  flex: 1;
}

.section-label {
  font-size: 13px;
  font-weight: bold;
  color: #0c4728; /* アクセントカラー */
  margin-bottom: 10px;
}

.section-title {
font-size: 3rem; /* 全体が広がった分、タイトルも少し大きく */
  margin-bottom: 20px;
  line-height: 1.3;
}


/* ポップアップのスタイル */
.popup-overlay {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center; 
  
  /* ポップアップが画面より長くなった時のためのスクロール設定 */
  overflow-y: auto;
}

.popup-overlay.is-open {
  display: flex !important;
}

.popup-content {
background: #fff;
  padding: 40px 40px 30px 40px;
  width: 100%;
max-width: 1200px;
padding: 60px 50px; 
  border-radius: 12px;
  position: relative;
max-height: 90vh; 
  overflow-y: auto;
animation: popupFade 0.3s ease-out;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* 大きくなった分、影も少し深くして立体感アップ */
}

/* ポップアップ内スクロールを安定させる */
.popup-scroll-area {
  margin-top: 20px;
  padding-right: 10px; /* スクロールバーとの被り防止 */
}

/* 検索バーのデザイン */
.popup-search-box {
  max-width: 800px; /* 検索窓自体は広すぎると入力しづらいので、中央に寄せる */
  margin: 0 auto 50px;
}

.popup-search-box form {
display: flex;
  gap: 10px;
}

.search-input {
flex: 1; /* 入力欄を広げる */
  height: 50px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.search-submit {
padding: 0 25px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.search-submit:hover {
  opacity: 0.8;
}

/* 人気キーワード */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.keyword-tags a {
  font-size: 13px;
  color: #333;
  text-decoration: none;
  background: #f5f5f5;
  padding: 5px 15px;
  border-radius: 20px;
}

/* 特集画像グリッド（ここがポイント！） */
.feature-grid {
display: grid;
  /* ▼ 強制的に4列に固定 */
  grid-template-columns: repeat(4, 1fr); 
  /* 隙間を少し広げると、個々の画像が小さく、スッキリ見えます */
  gap: 20px; 
  /* グリッド全体を中央に寄せて、左右にゆとりを持たせる */
  max-width: 1000px; 
  margin: 0 auto;
}

/* スマホでは2列にするなど、レスポンシブ対応 */
@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

.feature-item {
width: 100%;
  /* ▼ ここでカード自体の最大幅を制限すると「小さく」なります */
  max-width: 200px; 
  margin: 0 auto; /* 列の中で中央寄せ */
  text-align: center;
}

.feature-item img {
width: 100%;
  /* 縦を少し短く（3:2など）すると、より「一覧」として収まりが良くなります */
  aspect-ratio: 3 / 2; 
  object-fit: cover;
  margin-bottom: 10px;
}

.feature-item span {
font-size: 13px;
  font-weight: bold;
  display: block;
  line-height: 1.4;
}

.feature-item:hover img {
  transform: scale(1.1);
  filter: brightness(0.9);
}

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

.close-btn {
  position: absolute;
  top: 15px; right: 15px;
  background: none; border: none;
  font-size: 30px; cursor: pointer;
}

@media screen and (max-width: 768px) {

  /* =========================
    * About セクション スマホ版
  ========================= */

  .about-section {
    padding: 40px 20px;         /* 上下左右を削減 */
    color: #333;
  }

  .about-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;     /* 【重要】横並びを縦積みに変更 */
    align-items: center;
    gap: 30px;                  /* 画像とテキストの間隔を調整 */
  }

  /* 画像のスタイル */
  .about-image-wrap {
    flex: none;                 /* flexを無効化 */
    width: 100%;                /* 画面幅いっぱい */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    aspect-ratio: 16 / 9;       /* 比率は維持 */
  }

  .about-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* スマホではホバーをタップに変更 */
  .about-image-wrap:active img {
    transform: scale(1.05);
  }

  /* テキストのスタイル */
  .about-text {
    flex: none;
    width: 100%;                /* 画面幅いっぱい */
  }

  .section-label {
    font-size: 12px;
    font-weight: bold;
    color: #0c4728;
    margin-bottom: 10px;
  }

  .section-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);  /* 3remはスマホで大きすぎるため調整 */
    margin-bottom: 16px;
    line-height: 1.3;
  }

}



/* =========================
  *search　検索バー*
========================= */

.fjs-modal-body {
  background-color: #fcfcfc !important;
  padding: 40px 32px !important; /* 全体の余白を広げてゆったりと */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* フォーム全体のコンテナ */
.fjs-modal-body .tansaku-container {
  max-width: 760px; /* 横幅も少しゆとりを持たせる */
  margin: 0 auto;
}

/* 各入力ブロックの枠 */
.fjs-modal-body .top-detailedsearch-box {
  margin-bottom: 32px; /* ブロック間の余白を広げて見やすく */
}

/* 項目タイトル（地域、職種、雇用形態など） */
.fjs-modal-body .top-detailedsearch-title {
  font-size: 16px; /* 14px → 16px に拡大 */
  font-weight: 600;
  color: #2c3238;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding-left: 4px;
  position: relative;
}

/* 2カラム（雇用形態×給与）の横並び調整 */
.fjs-modal-body .fjs-row-2col {
  display: flex;
  gap: 20px; /* 間隔を少し広く */
}
.fjs-modal-body .fjs-row-2col .top-detailedsearch-box {
  flex: 1;
  min-width: 0;
}

/* 入力エリアのインナー（セレクトの並びなど） */
.fjs-modal-body .top-detailedsearch-inner {
  display: flex;
  gap: 16px; /* セレクトボックス同士の間隔を広く */
  width: 100%;
}

/* セレクトボックス ＆ テキスト入力の共通シックデザイン */
.fjs-modal-body select,
.fjs-modal-body input[type="search"] {
  width: 100%;
  height: 56px; /* 48px → 56px にサイズアップ */
  padding: 0 20px; /* 内側の余白をゆったりに */
  font-size: 16px; /* 14px → 16px に拡大して視認性アップ */
  color: #333d46;
  background-color: #ffffff;
  border: 1px solid #c8ccd0; /* 枠線をわずかにくっきりさせて引き締め */
  border-radius: 6px; /* 角丸も少し滑らかに */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
  transition: all 0.25s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* セレクトボックス専用：ミニマルな矢印アイコン（サイズに合わせて位置調整） */
.fjs-modal-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center; /* 位置を内側に微調整 */
  background-size: 18px; /* 矢印もほんの少し大きく */
  padding-right: 44px;
}

/* 選択不可（disabled）状態 */
.fjs-modal-body select:disabled {
  background-color: #f4f5f6;
  border-color: #e2e4e6;
  color: #a0a7ae;
  cursor: not-allowed;
  opacity: 0.7;
}

/* フォーカス時の色合い */
.fjs-modal-body select:focus,
.fjs-modal-body input[type="search"]:focus {
  outline: none;
  border-color: #4a5056;
  box-shadow: 0 0 0 4px rgba(74, 80, 86, 0.12); /* ぼかしを少し広く */
}

/* キーワード検索の入力欄 */
.fjs-modal-body input[type="search"] {
  flex: 1;
}

/* 検索ボタン：サイズアップに合わせて圧倒的な存在感に */
.fjs-modal-body button[type="submit"] {
  height: 56px; /* 48px → 56px にサイズアップ */
  padding: 0 40px; /* 横幅に風格を出すために広めに */
  font-size: 17px; /* 15px → 17px に拡大 */
  font-weight: 600;
  color: #ffffff;
  background-color: #1e252b;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.15em; /* 文字のトビを少し広げてより高級に */
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* ボタン：ホバー効果 */
.fjs-modal-body button[type="submit"]:hover {
  background-color: #333d46;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.fjs-modal-body button[type="submit"]:active {
  transform: translateY(0);
}

/* エラーメッセージ */
.fjs-modal-body .submit-error {
  font-size: 13px;
  color: #d9383a !important;
  margin-top: 10px !important;
  padding-left: 4px;
}

/* =========================
  * search 検索バー スマホ版
========================= */

@media screen and (max-width: 768px) {

  .fjs-modal-body {
    background-color: #fcfcfc !important;
    padding: 20px 16px !important;  /* モバイルは余白を削減 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  }

  /* フォーム全体のコンテナ */
  .fjs-modal-body .tansaku-container {
    max-width: 100%;             /* スマホは画面幅いっぱい */
    margin: 0 auto;
  }

  /* 各入力ブロックの枠 */
  .fjs-modal-body .top-detailedsearch-box {
    margin-bottom: 20px;         /* モバイルは余白を縮小 */
  }

  /* 項目タイトル */
  .fjs-modal-body .top-detailedsearch-title {
    font-size: 14px;             /* スマホは少し小さく */
    font-weight: 600;
    color: #2c3238;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding-left: 4px;
  }

  /* 【重要】2カラム → 1カラムに変更 */
  .fjs-modal-body .fjs-row-2col {
    display: flex;
    flex-direction: column;       /* 縦積みに変更 */
    gap: 20px;
  }
  .fjs-modal-body .fjs-row-2col .top-detailedsearch-box {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  /* 入力エリアのインナー */
  .fjs-modal-body .top-detailedsearch-inner {
    display: flex;
    flex-direction: column;       /* セレクトも縦積み */
    gap: 12px;
    width: 100%;
  }

  /* セレクトボックス & テキスト入力 */
  .fjs-modal-body select,
  .fjs-modal-body input[type="search"] {
    width: 100%;
    height: 48px;                /* スマホは少し小さく */
    padding: 0 16px;
    font-size: 16px;             /* iOSでズームを防ぐため16px以上必須 */
    color: #333d46;
    background-color: #ffffff;
    border: 1px solid #c8ccd0;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* セレクトボックス専用：矢印アイコン */
  .fjs-modal-body select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
  }

  /* Disabled状態 */
  .fjs-modal-body select:disabled {
    background-color: #f4f5f6;
    border-color: #e2e4e6;
    color: #a0a7ae;
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* フォーカス時 */
  .fjs-modal-body select:focus,
  .fjs-modal-body input[type="search"]:focus {
    outline: none;
    border-color: #4a5056;
    box-shadow: 0 0 0 3px rgba(74, 80, 86, 0.12);
  }

  /* キーワード検索の入力欄 */
  .fjs-modal-body input[type="search"] {
    flex: none;
    width: 100%;
  }

  /* 検索ボタン */
  .fjs-modal-body button[type="submit"] {
    height: 48px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #1e252b;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.15em;
    transition: all 0.25s ease;
    white-space: nowrap;
    width: 100%;               /* スマホではボタン幅も100% */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  }

  /* ボタン：ホバー / タップ効果 */
  .fjs-modal-body button[type="submit"]:hover {
    background-color: #333d46;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }

  .fjs-modal-body button[type="submit"]:active {
    transform: translateY(0);
  }

  /* エラーメッセージ */
  .fjs-modal-body .submit-error {
    font-size: 13px;
    color: #d9383a !important;
    margin-top: 10px !important;
    padding-left: 4px;
  }

}






/* =========================
  *ランダム求人　スライダーの見出し*
========================= */
/* スライダーの全体ラッパー */
.kwt-auto-slider-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 40px 20px;
    position: relative;
}

/* 左側のテキスト部分 */
.kwt-slider-left {
    flex-shrink: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 0;
    height: 100%;
    min-height: 400px;
    margin-left: 0;
    position: absolute;
    left: 120px;
}

/* スライダーの見出し */
.kwt-slider-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0 0 80px 0;
    padding: 0;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* 記事一覧へのリンク */
.kwt-see-all {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #333;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0;
}

.kwt-see-all:hover {
    background: #333;
    color: #fff;
}

/* スライダーコンテナ */
.kwt-auto-slider {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-left: 0;
}

/* =========================
  *ランダム求人　スライダー*
========================= */

.kwt-full-slider {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin-left: 300px; /* 左に200pxの余白を持たせて調整 */
}

.kwt-full-rail {
    display: flex;
    width: max-content;
    animation: kwt-flow 120s linear infinite;
}

/* リンクのスタイル */
.kwt-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    cursor: pointer;
}

.kwt-card-link:hover .kwt-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.kwt-card {
    width: 300px;
    margin: 0 15px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

/* 画像のスタイル */
.kwt-image {
    width: 100%;
    height: 200px;
    overflow: hidden;

}

.kwt-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストエリア */
.kwt-txt {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kwt-card h3 {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px 0;
    font-weight: normal;
}

.job-name {
    display: block;
    font-size: 17px;
    color: #004098;
    font-weight: bold;
    margin-bottom: 10px;
}

.salary {
    font-size: 14px;
    color: #d32f2f;
    font-weight: bold;
    margin: 0;
}

@keyframes kwt-flow {
    0% { 
        transform: translateX(0); 
    }
    99.99% { 
        transform: translateX(calc(-100% / 3)); 
    }
    100% { 
        transform: translateX(0); 
    }
}

/* ==========================================
 * スマホ用（画面幅768px以下）のランダム求人スライダー調整
 * ========================================== */
@media screen and (max-width: 768px) {
  /* 全体の配置を横並びから、縦並びに切り替え */
  .kwt-auto-slider-wrapper {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 0; /* 左右のパディングをなくしてスライダーを画面端まで広げる */
    overflow: hidden;
  }

  /* 左側にあった見出しエリアを「上部中央」へ配置換え */
  .kwt-slider-left {
    position: static; /* 絶対配置（浮かす設定）を解除 */
    width: 100%;
    min-height: auto; /* PC用の400pxの高さを解除 */
    height: auto;
    padding: 0 20px 25px 20px; /* 下のスライダーとの間に適度な隙間を作る */
    left: auto;
  }

  /* スライダーの見出しタイトル */
  .kwt-slider-title {
    font-size: 22px; /* スマホ向けに少しコンパクトに */
    margin: 0 0 15px 0; /* 下のボタンとの余白（PC用80px）をスマートに縮める */
  }

  /* 記事一覧へのリンクボタン */
  .kwt-see-all {
    width: 200px; /* スマホで押しやすい手頃な横幅に固定 */
    padding: 10px 20px;
    font-size: 13px;
    margin-bottom: 10px;
  }

  /* スライダー外枠：PC用の左マージンを完全リセット */
  .kwt-full-slider {
    width: 100%;
    margin-left: 0; /* PC用の margin-left: 300px を無くして画面いっぱいに */
    padding: 0;
  }

  /* 自動で流れるレール枠 */
  .kwt-full-rail {
    /* アニメーションのスピードがスマホだと速く感じやすいため、
       もし速すぎる場合はここの120sを少し増やすとゆっくりになります */
    animation: kwt-flow 100s linear infinite; 
  }

  /* 求人カード本体のスマホサイズ微調整 */
  .kwt-card {
    width: 260px; /* スマホ画面のサイズに合わせて一回りスリム（300px→260px）に */
    margin: 0 10px; /* カード同士の隙間を少し引き締める */
  }

  /* 求人画像 */
  .kwt-image {
    height: 160px; /* カードが小さくなった分、画像の高さも160pxに抑えて黄金比率をキープ */
  }

  /* テキストエリア */
  .kwt-txt {
    padding: 15px; /* 内側の余白を少しスリムに */
  }

  .job-name {
    font-size: 15px; /* タイトルを少しだけ小さくして、2行以内に収まりやすく */
  }
}


/* =========================
  *トップページ2分割会社案内*
========================= */

.environment-section {
width: 80%; /* 画面幅の95%にする（左に5%の隙間ができる） */
  margin-top: 100px;
  margin-left: auto; /* 左の余白を自動（最大）にして右端に押しやる */
  margin-right: 0;   /* 右端は画面にぴったりくっつける */
  padding: 120px 5%;
  background: #dcdcdc;

  /* ワンポイント: 左側だけ角丸にすると洗練されたデザインになります */
  border-radius: 20px 0 0 20px;
}

.env-grid {
max-width: 1400px;
  margin: 0 auto; /* 背景枠の中で中央寄せになるため、結果的に画面全体から見ると少し右に寄ります */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.env-item {
  overflow: hidden;
  position: relative;
}

/* 画像コンテナに高さを指定 */
.env-img-right,
.env-img-left {
  width: 100%;
  height: 400px; /* 好みの高さに調整してください */
}

/* 共通：画像スタイル */
.env-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
  /* 初期位置：枠のすぐ下に隠しておく */
  transform: translateY(101%);
  transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* スクロールして表示された時の動き */
.env-item.is-active img {
  transform: translateY(0);
}

/* 右と左でタイミングをずらす */
.env-img-right.is-active img {
  transition-delay: 0.1s;
}

.env-img-left.is-active img {
  transition-delay: 0.3s;
}

/* 左上テキスト */
.env-text-top {
  padding-left: 10%;
}

.env-label {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: #666;
}

.env-title {
  font-size: 3rem;
  margin-bottom: 40px;
}

.env-description {
  font-size: 16px;
  line-height: 2;
}

/* 右上画像：少し上にずらす */
.env-img-right {
  margin-top: -60px;
}

/* 左下画像：少し右に寄せるなどの調整 */
.env-img-left {
  margin-top: 40px;
}

/* 右下メッセージエリア */
.env-message-bottom {
  padding-left: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.message-inner p {
  font-size: 18px;
  margin-bottom: 30px;
}

/* ボタン */
.env-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #333;
  padding: 15px 25px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  width: 100%;
  max-width: 300px;
  transition: all 0.3s;
}

.env-btn:hover {
  background: #333;
  color: #fff;
}

@media screen and (max-width: 768px) {
  
  .environment-section {
    width: 100%;
    margin-top: 60px;
    padding: 60px 16px; /* 左右16pxに削減して、より余裕を持たせる */
    border-radius: 0;
    box-sizing: border-box; /* paddingを幅に含める */
  }

  .env-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* テキストエリアの調整 */
  .env-text-top {
    padding-left: 0;
    padding-right: 0; /* 右側の余白もリセット */
    order: 1;
    width: 100%;
    box-sizing: border-box;
  }

  .env-title {
    font-size: 1.75rem; /* 2remから1.75remに調整（切れやすいなら1.5remまで縮小可） */
    margin-bottom: 20px;
    word-break: break-word; /* 長い単語は行を分割して折り返す */
    overflow-wrap: break-word; /* IE対応 */
    line-height: 1.3; /* タイトルは行間を少し詰めて高さを抑える */
  }

  .env-description {
    font-size: 15px;
    line-height: 1.8;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 画像コンテナ */
  .env-img-right,
  .env-img-left {
    height: 250px;
    width: 100%;
    margin-top: 0;
    box-sizing: border-box;
  }

  /* メッセージエリア */
  .env-message-bottom {
    padding-left: 0;
    padding-right: 0; /* 右側の余白もリセット */
    order: 4;
    width: 100%;
    box-sizing: border-box;
  }

  .message-inner p {
    font-size: 15px; /* 16pxから15pxに調整 */
    margin-bottom: 20px;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ボタン */
  .env-btn {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    box-sizing: border-box;
    justify-content: center;
    gap: 15px;
    white-space: normal; /* ボタン内のテキストも折り返す */
    word-break: break-word;
  }

  /* ボタン内のテキストと矢印が折り返らないようにしたい場合 */
  .env-btn span {
    white-space: nowrap; /* スパン内は折り返さない */
  }
}


/* =========================
  *コラム*
========================= */

.useful-section {
width: 80%; /* 画面幅の95%にする（右に5%の隙間ができる） */
  margin-top: 100px;
  margin-left: 0;    /* 左端は画面にぴったりくっつける */
  margin-right: auto;/* 右の余白を自動（最大）にして左端に押しやる */
  margin-right: auto;/* 右の余白を自動（最大）にして左端に押しやる */
  padding: 120px 0%;
  background: #dcdcdc;
  overflow: hidden; /* セクション自体からもはみ出さないようにガード */
  /* ワンポイント: 右側だけ角丸にする */
  border-radius: 0 20px 20px 0;
}

/* ヘッダー周り */
.useful-header-inner {
max-width: 1200px;
margin: 0 auto 50px;
  padding: 0 40px; /* 背景の右端ぴったりにならないよう、適度な余白を作る */
  display: flex;
  justify-content: flex-end; /* これで右側に寄ります */
}

/* タイトルとラベルをまとめるボックス */
.useful-title-group {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: flex-end;   /* テキスト自体も右揃えにする */
  gap: 4px;                /* ラベルとタイトルの隙間 */
}

.useful-header-box {
display: flex;
flex-direction: column;
gap: 4px;
}

/* メインタイトル */
.useful-title {
    font-size: 3rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  line-height: 1.2;
}

.useful-sub-label {
  font-size: 14px;
  font-weight: 600;
  color: #888; /* 背景色に合わせて調整してください */
  letter-spacing: 0.1em;
}

.env-btn:hover {
background-color: #f0f0f0;
transform: translateY(-2px);
}


.useful-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #000;
  margin: 0;
}

.env-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  color: #001d4d;
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.3s;
}

.env-btn:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

/* スライダー外枠 */
.useful-slider-outer {
position: relative;
  width: 100%;
  padding-left: 5%; /* スライダーの開始位置をヘッダーと合わせる */
}

.useful-slider-container {
width: 100%;
  /* overflow: visible; から hidden に変更して右側をカット */
  overflow: hidden;
}

.useful-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  align-items: center;
}

/* カード単体 */
.useful-list-item {
flex: 0 0 480px; 
  margin: 0 30px;
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0.4;
  transform: scale(0.85);
}

/* 中央アクティブ時の拡大 */
.useful-list-item.is-active {
opacity: 1;
  transform: scale(1.0); /* 1.1だと右端でカットされる可能性があるため1.0〜1.05推奨 */
  z-index: 10;
}

.useful-list-link {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #333;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  height: 100%;
}

.useful-image-box {
  width: 100%;
  height: 380px; /* 全カード一律の高さ */
}

.useful-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.useful-content-box {
  padding: 30px;
}

.useful-item-title {
  font-size: 22px;
  margin-bottom: 15px;
  color: #001d4d;
  font-weight: 700;
}

.useful-item-text {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

/* 矢印ボタン */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
  color: #000;
  font-size: 32px;
  cursor: pointer;
  z-index: 100;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-arrow:hover {
  background: #fff;
  color: #001d4d;
}

.slider-arrow.next { 
  right: 7%; 
}
.slider-arrow.prev { 
  left: 2%; 
}

/* ==========================================
 * スマホ用（画面幅768px以下）のコラムスライダー調整
 * ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. 全体の外枠（セクション）の調整 */
  .useful-section {
    width: 100%; /* スマホでは左寄せを解除し、画面横幅いっぱいに広げる */
    margin-top: 60px; /* 上の要素との隙間をスマホ向けに調整 */
    padding: 50px 0; /* PC用の巨大な上下余白をスマホ向けにコンパクト化 */
    border-radius: 0; /* 右側の角丸をリセットして全画面に馴染ませる */
  }

  /* 2. ヘッダー周り（タイトルグループ）の調整 */
  .useful-header-inner {
    margin-0: auto 30px;
    padding: 0 20px; /* 左右の余白をスマホ標準の20pxに */
    justify-content: flex-start; /* 右寄せを解除し、スマホで見やすい「左寄せ」に変更 */
  }

  .useful-title-group {
    align-items: flex-start; /* テキスト自体も「左揃え」に変更 */
  }

  .useful-title {
    /* clampが効いていますが、スマホ向けに20px〜26px程度になるよう最適化 */
    font-size: clamp(20px, 6vw, 26px);
  }

  .useful-sub-label {
    font-size: 12px; /* ラベルを一回り小さく */
  }

  /* 3. カルーセルスライダー外枠の調整 */
  .useful-slider-outer {
    padding-left: 0; /* PC用の左5%のインデントをリセット */
  }

  /* 4. スライダーカード単体の縮小（ここが最重要！） */
  .useful-list-item {
    /* PC用の480pxを解除し、スマホの画面幅（例: 375px）に対して
       左右にチラッと前後のカードが見える「290px」に最適化 */
    flex: 0 0 290px; 
    margin: 0 10px; /* カード同士の隙間をPC用の30pxから10pxに引き締める */
    
    /* スマホでも縮小演出が綺麗に見えるよう、非アクティブ時の縮小率を微調整 */
    transform: scale(0.9); 
    opacity: 0.5;
  }

  /* 中央アクティブ時の拡大（スマホでもしっかり目立たせる） */
  .useful-list-item.is-active {
    opacity: 1;
    transform: scale(1.0);
  }

  /* 5. カード内コンテンツのサイズ調整 */
  .useful-image-box {
    height: 200px; /* PC用の380pxだと縦長すぎるので、スマホカードに合わせた200px（16:9に近い比率）に */
  }

  .useful-content-box {
    padding: 20px; /* 内側の余白を少しスリムに */
  }

  .useful-item-title {
    font-size: 17px; /* 22pxからスマホ向けに小さく */
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .useful-item-text {
    font-size: 13px; /* 15pxから13pxにして、文字が溢れるのを防ぐ */
    line-height: 1.5;
  }

	/* 6. 左右矢印ナビゲーションボタン */
  .slider-arrow {
    display: block;             /* 表示を許可 */
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;                /* カードより前面に */
  }

  .slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
  }

  .slider-arrow:active {
    transform: scale(0.95);
  }

}



/* =========================
  *ニュース*
========================= */

.env-news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* margin-bottom を 50px から 20px 程度に減らす */
    margin-bottom: 15px; /* さらに少し詰めました */
    padding-bottom: 10px; 
}

/* セクション全体の余白 */
.env-news-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px; /* 上下 80px → 40px にしてコンパクトに */
}

/* リスト全体の枠線 */
.top-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #ddd;
}

/* 1行ごとのスタイル */
.news-list-item {
    display: flex;
    gap: 20px;
padding: 15px 0; /* 30px → 15px にして高さを抑える */
    border-bottom: 1px solid #eee; /* #ddd → #eee で線を薄く */
    align-items: flex-start;
}

.news-list-link {
    display: flex;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    transition: opacity 0.3s;
}

.news-list-link:hover {
    opacity: 0.7;
}

/* 1行ごとのスタイル（お知らせと共通のものを想定） */
.news-list-item {
    list-style: none;
    border-bottom: 1px solid #ddd;
    padding: 30px 0; /* お好みの余白感に調整してください */
}

/* テキストエリア */
.news-content-box {
    flex: 1;
}

.news-item-title {
font-size: 15px; /* 18px → 15px に縮小 */
    font-weight: 600; /* bold(700) → 600 で少し細く */
    margin: 0 0 5px 0;
    color: #444; /* #333 → #444 でコントラストを微調整 */
}

.news-item-text {
font-size: 13px; /* 15px → 13px に縮小 */
    line-height: 1.6; /* 1.8 → 1.6 で少し引き締める */
    color: #888; /* #666 → #888 で文字の存在感を薄く */
    margin: 0;
}

/* 最後のアイテムの下線を消す場合は以下（任意） */
.news-list-item:last-child { border-bottom: none; }


/* ==========================================
 * スマホ用（画面幅768px以下）のニュースセクション調整
 * ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. ヘッダー（タイトルと「一覧を見る」ボタンなど）の調整 */
  .env-news-header {
    flex-direction: column; /* スマホでは縦並びにしてゆとりを持たせる */
    align-items: flex-start; /* 左揃えに統一 */
    gap: 10px;
    margin-bottom: 20px; /* スマホ用に余白をわずかに広げて調整 */
  }

  /* 2. セクション全体の余白調整 */
  .env-news-section {
    padding: 30px 20px; /* 左右の余白をスマホ標準の20pxに引き締め */
  }

  /* 3. ニュース1行ごとのレイアウト切り替え */
  .news-list-item {
    padding: 15px 0; /* PC用の30px指定が重複している部分を、コンパクトな15pxに一統 */
  }

  .news-list-link {
    flex-direction: column; /* 横並び（flex）を解除し、上から下への縦並びに切り替え */
    gap: 6px; /* 日付（またはカテゴリ）と、タイトルとの間の絶妙な隙間 */
  }

  /* 4. テキストエリアの調整 */
  .news-content-box {
    width: 100%; /* 横幅いっぱいに広げてテキストを読みやすく */
  }

  .news-item-title {
    font-size: 14px; /* スマホの画面に合わせて1pxだけスマートに調整 */
    line-height: 1.4; /* スマホで2行に改行された時も美しく見えるバランス */
    margin-bottom: 4px;
    color: #333; /* スマホの液晶でもパッと見で読みやすいように、わずかに視認性をアップ */
  }

  .news-item-text {
    font-size: 12px; /* 本文（概要）を一回り小さくして、タイトルとの主従関係をハッキリさせる */
    line-height: 1.5;
  }
}










/* =========================
  *faq*
========================= */


.faq-section {
  padding: 100px 5%;
  background: transparent; /* 背景なしに設定 */
}

.faq-inner {
max-width: 1400px; /* 他のセクションと数値を統一 */
    margin: 0 auto;
    padding: 0 40px;   /* 左右の余白（内側）も他のセクションと合わせる */
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

/* タイトルエリア */
.faq-header {
  flex: 0 0 300px;
}

.faq-main-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
}

.faq-sub-label {
  font-size: 14px;
  color: #0c4728; /* 画像のような青色 */
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.faq-sub-label::before {
  content: '◆'; /* 小さなダイヤマーク */
  font-size: 10px;
}

/* コンテンツエリア */
.faq-content {
  flex: 1;
}

.faq-list {
  border-top: 1px solid #ddd;
}

/* アコーディオンアイテム */
.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-question {
  padding: 30px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none; /* デフォルトの矢印を消す */
  position: relative;
}

.faq-question::-webkit-details-marker {
  display: none; /* Safari用 */
}

.q-icon {
  font-size: 20px;
  font-weight: bold;
  margin-right: 15px;
  color: #333;
}

.q-text {
  font-size: 16px;
  color: #333;
  flex: 1;
}

/* 右側の青い矢印 */
.faq-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid #6a89ff;
  border-bottom: 2px solid #6a89ff;
  transform: rotate(45deg);
  transition: transform 0.3s;
  margin-right: 10px;
}

/* 開いている時の矢印の向き */
.faq-item[open] .faq-arrow {
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 0 0 30px 40px;
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}

/* View moreボタン */
.faq-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

.view-more-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: opacity 0.3s;
}

.arrow-circle {
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a89ff;
  font-size: 20px;
}

.view-more-btn:hover {
  opacity: 0.7;
}

/* ==========================================
 * スマホ用（画面幅768px以下）のFAQセクション調整
 * ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. セクション全体の余白調整 */
  .faq-section {
    padding: 50px 0; /* 上下余白をコンパクトにし、左右はインナー側に任せる */
  }

  /* 2. レイアウトを横並びから縦並びに切り替え */
  .faq-inner {
    flex-direction: column; /* 2カラムを解除して縦並びに */
    gap: 30px; /* タイトルとリストの間の隙間 */
    padding: 0 20px; /* 左右の余白をスマホ標準の20pxに引き締め */
  }

  /* 3. タイトルエリアの調整 */
  .faq-header {
    flex: none; /* PC用の横幅 300px 固定を解除 */
    width: 100%;
  }

  .faq-main-title {
    font-size: 22px; /* スマホ向けに少しスマートなサイズに縮小 */
    margin-bottom: 6px;
  }

  .faq-sub-label {
    font-size: 12px;
  }

  /* 4. アコーディオン（質問・回答）の調整 */
  .faq-question {
    padding: 20px 0; /* タップ領域を確保しつつ、PC用（30px）より少し引き締め */
  }

  .q-icon {
    font-size: 18px;
    margin-right: 10px; /* アイコンと文字の隙間をわずかにタイトに */
  }

  .q-text {
    font-size: 14px; /* スマホで1〜2行に綺麗に収まるサイズ感に調整 */
    line-height: 1.4;
  }

  /* 右側の青い矢印ボタン */
  .faq-arrow {
    width: 10px; /* 矢印をほんの一回り小さくして全体のバランスに合わせる */
    height: 10px;
    margin-right: 5px;
  }

  /* 回答エリアの調整 */
  .faq-answer {
    padding: 0 0 20px 28px; /* 左の余白を40pxから28pxに減らし、スマホでの横幅を広く確保 */
    font-size: 13px; /* 本文を一回り小さくして読みやすく */
    line-height: 1.6;
  }

  /* 5. View more（下部ボタン）の調整 */
  .faq-footer {
    margin-top: 25px;
    justify-content: center; /* スマホでは右寄せよりも「中央配置」が押しやすくて綺麗 */
  }

  .view-more-btn {
    font-size: 14px;
    gap: 10px;
  }

  .arrow-circle {
    width: 40px; /* 丸い枠を一回り小さく（50px → 40px） */
    height: 40px;
    font-size: 16px;
  }
}


/* =========================
  *フッター上スライダーとメッセージ*
========================= */

/* セクション全体 */
.visual-slider-section {
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  width: 100%;
}

/* スライダーの軌道 */
.visual-slider-track {
  display: flex;
  width: calc(450px * 8); /* 画像幅×枚数 */
  animation: visual-scroll 30s linear infinite;
  align-items: center;
}

/* 各画像アイテムの基本設定 */
.visual-item {
  width: 400px; /* 画像の横幅 */
  height: 280px;
  margin: 0 25px;
  flex-shrink: 0;
  filter: brightness(0.9); /* 少し暗めにして文字を際立たせる */
}

.visual-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像の高さをバラバラにする調整 */
.item-up { transform: translateY(-40px); }
.item-down { transform: translateY(40px); }
.item-middle { transform: translateY(0); }

/* 無限ループアニメーション */
@keyframes visual-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-400px * 4 - 50px * 4)); } 
}

/* 前面のデカ文字 */
.visual-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  pointer-events: none; /* テキストが下のクリックを邪魔しないように */
  z-index: 10;
}

.moving-text {
  font-size: clamp(80px, 15vw, 200px); /* 画面幅に合わせて可変するサイズ */
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0.95;
}

/* フッターとの隙間をなくす */
.visual-slider-section + .site-footer {
  margin-top: 0 !important;
  padding-top: 60px;
}

/* ==========================================
 * スマホ用（画面幅768px以下）のフッター上スライダー調整
 * ========================================== */
@media screen and (max-width: 768px) {
  
  /* 1. セクション全体の上下余白をスマホ向けに引き締め */
  .visual-slider-section {
    padding: 60px 0; /* PC用の120pxから、スマホ向けに60pxへコンパクト化 */
  }

  /* 2. スライダー軌道の横幅（計算値）をスマホサイズに合わせてリセット */
  .visual-slider-track {
    /* スマホ用の画像幅（220px）＋ 隙間（10px×2 = 20px）＝ 240px × 8枚分に再計算 */
    width: calc(240px * 8); 
    animation: visual-scroll-sp 20s linear infinite; /* スマホ用にアニメーションを最適化 */
  }

  /* 3. 各画像アイテムのサイズをスマホ向けに一巡縮小（ここが最重要！） */
  .visual-item {
    width: 220px; /* スマホ画面の幅（約375px）に対して、ちょうど良い220pxに縮小 */
    height: 160px; /* 横幅に合わせて高さも160pxに引き締めて綺麗な比率をキープ */
    margin: 0 10px; /* 画像同士の左右の隙間を25pxから10pxに縮める */
  }

  /* 4. 画像の上下のデコボコ感（ズレ）をスマホの高さに合わせて微調整 */
  /* PC用の40pxのままだとスマホではズレすぎてはみ出るため、半分（20px）に調整 */
  .item-up { transform: translateY(-20px); }
  .item-down { transform: translateY(20px); }
  .item-middle { transform: translateY(0); }

  /* 5. スマホ専用の無限ループアニメーション計算 */
  @keyframes visual-scroll-sp {
    0% { transform: translateX(0); }
    100% { 
      /* スマホ用の「画像幅220px ＋ 左右マージン計20px ＝ 240px」の4枚分（960px）左に流す */
      transform: translateX(-960px); 
    } 
  }

  /* 6. 前面の超デカ文字のスマホサイズ調整 */
  .moving-text {
    /* clampの最小値を80px→40pxに、最大値を200px→75pxに調整 */
    /* これによりスマホの画面幅を突き破らず、かつ圧倒的な「デカ文字感」をキープできます */
    font-size: clamp(40px, 16vw, 75px); 
    letter-spacing: -0.01em; /* 文字が小さくなった分、トラッキングをわずかに緩めて視認性確保 */
  }
}



/* =========================
  *フッター*
========================= */


.site-footer {
width: 100vw;           /* 画面の横幅いっぱい */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* コンテナを突き破って広げる魔法の記述 */
  color: #fff;
  padding: 80px 0;        /* 左右のパディングは0にする */
 margin-top: 0 !important;    /* 上の要素（Recruit/Contact）との隙間を絶対にゼロにする */
  margin-bottom: 0 !important; /* 下のマージンもゼロに */
  background-color: #000;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* タイトル共通 */
.footer-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 25px;
  display: block;
}

/* 上段・下段のレイアウト */
.footer-top, .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-top {
display: flex;
  justify-content: flex-start; /* 左から並べる */
  gap: 0; /* カラムごとの余白は個別に設定 */
}

.footer-col {
  flex: 1;
}

/* サイトマップの2列グリッド */
.footer-nav-grid {
display: grid;
  grid-template-columns: 100px 100px; /* 2列の幅を詰め気味にする */
  gap: 15px 20px;
}

.footer-nav-grid a, .footer-link-list a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  opacity: 0.8;
  transition: 0.3s;
}

.footer-nav-grid a:hover, .footer-link-list a:hover {
  opacity: 1;
}

/* グループインフォ：ここを広げる */
.footer-group-wrapper {
  flex: 1; /* 残りのスペースを大きく使う */
}

.footer-group-columns {
  display: flex;
  gap: 40px; /* 1列目と2列目の間隔 */
}

.footer-group-columns .footer-link-list {
  flex: 1;
}

/* グループリンクの外部アイコン再現 */
.footer-link-list {
  list-style: none;
  padding: 0;
}

.footer-link-list li {
  margin-bottom: 12px;
}

.footer-link-list li a::before {
  content: "↗"; /* 画像にあるアイコンを再現 */
  margin-right: 8px;
  font-size: 12px;
}

/* ダウンロードボタン（カプセル型） */
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 15px 40px;
  color: #fff;
  text-decoration: none;
  width: 100%;
  max-width: 350px;
  font-size: 18px;
  transition: 0.3s;
}

.btn-download:hover {
  background: #fff;
  color: #000;
}

/* フッターロゴ */
.tel-number {
  display: block;
  font-size: 48px; /* 大きく配置 */
  color: #000;
  text-decoration: none;
  margin: 10px 0;
  letter-spacing: 0.05em;
}

.tel-time {
  font-size: 14px;
  opacity: 0.7;
}

/* ロゴ自体のサイズ感 */
.footer-tel-logo {
    display: block;
    margin-bottom: 10px; /* 「受付時間」との間隔 */
    transition: opacity 0.3s;
}

.footer-tel-logo img {
    /* ★ここを調整してサイズ感を合わせます */
    height: 60px;      /* 画像(image_cccf9f.png)の数字に近い高さ */
    width: auto;       /* 横幅は自動で比率を維持 */
    display: block;
    
    /* もし元の画像が黒くて見えない場合は以下を有効にしてください */
    /* filter: brightness(0) invert(1); */
}

/* コピーライト部分 */
.footer-info {
  text-align: right;
  align-self: flex-end;
}

.footer-sub-nav {
  margin-bottom: 15px;
}

.footer-sub-nav a {
  font-size: 13px;
  color: #000;
  text-decoration: none;
}

.copyright {
  font-size: 14px;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  
  /* 1. セクション全体の調整 */
  .site-footer {
    padding: 50px 16px; /* 左右20pxから16pxに調整（余裕を確保） */
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    transform: none;
    box-sizing: border-box;
    overflow-x: hidden; /* 横スクロール防止 */
  }

  /* 2. 上段・下段のレイアウト */
  .footer-top, 
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 3. 各コラムの調整 */
  .footer-col {
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* 不用意なpaddingをリセット */
  }

  .footer-title {
    margin-bottom: 15px;
    font-size: 16px; /* タイトルのサイズを明示的に指定 */
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 4. サイトマップグリッドの調整 */
  .footer-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-nav-grid li {
    list-style: none;
    min-height: 40px; /* タップターゲットの最小高さ */
    display: flex;
    align-items: center;
  }

  .footer-nav-grid a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 8px 0; /* タップしやすくする */
    display: inline-block;
    transition: opacity 0.2s ease;
  }

  .footer-nav-grid a:active {
    opacity: 0.7;
  }

  /* 5. グループ情報の調整 */
  .footer-group-columns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-group-columns > * {
    width: 100%;
  }

  /* 6. ダウンロードボタン */
  .btn-download {
    width: 100%;
    max-width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    border: none;
    border-radius: 24px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    white-space: nowrap; /* ボタンテキストは折り返さない */
    transition: background-color 0.2s ease;
    min-height: 48px; /* タップターゲットの推奨サイズ */
  }

  .btn-download:active {
    background-color: #f0f0f0;
  }

  .btn-download svg,
  .btn-download img {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* アイコンが縮小しない */
  }

  /* 7. 電話番号・ロゴエリア */
  .footer-tel-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-tel-logo img {
    height: 40px; /* 45pxから40pxに調整 */
    width: auto;
    flex-shrink: 0;
  }

  .tel-number {
    font-size: 28px; /* 32pxから28pxに調整 */
    font-weight: bold;
    color: #fff;
    margin: 5px 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
  }

  /* 8. 下部情報エリア */
  .footer-info {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* サブナビゲーション（リンク群） */
  .footer-sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-sub-nav li {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .footer-sub-nav a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    font-size: 13px;
    padding: 6px 0;
    display: inline-block;
    transition: opacity 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .footer-sub-nav a:active {
    opacity: 0.5;
  }

  /* コピーライト */
  .copyright {
    font-size: 12px;
    color: #fff;
    opacity: 0.6;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: 0;
  }
}


/* -------------------------
   Responsive
------------------------- */
@media (max-width: 1024px) {
  .top-info-wrap {
    width: min(1100px, calc(100vw - 40px));
    padding: 76px 0 88px;
  }

  .top-column-list {
    gap: 20px;
  }

  .top-column-card {
    min-height: 230px;
    padding: 24px 22px 20px;
    border-radius: 20px;
  }

  .top-column-card::after {
    left: 22px;
    right: 22px;
  }
}

@media (max-width: 767px) {
  .top-info-wrap {
    width: calc(100vw - 32px);
    padding: 58px 0 72px;
  }

  .top-column-head,
  .top-news-head {
    margin-bottom: 22px;
  }

  .top-column-head__en,
  .top-news-head__en {
    margin-bottom: 8px;
    font-size: 0.64rem;
  }

  .top-column-head__ja,
  .top-news-head__ja {
    font-size: 1.7rem;
    line-height: 1.28;
  }

  .top-column-head__lead {
    font-size: 0.9rem;
    line-height: 1.82;
  }

  .top-column-list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .top-column-card {
    min-height: auto;
    padding: 20px 16px 18px;
    border-radius: 18px;
  }

  .top-column-card::after {
    left: 16px;
    right: 16px;
  }

  .top-column-card__title {
    font-size: 1.08rem;
    min-height: auto;
  }

  .top-column-card__text {
    font-size: 0.9rem;
    min-height: auto;
  }

  .top-column-card__arrow {
    width: 36px;
    height: 36px;
    font-size: 0.92rem;
  }

  .top-column-more {
    width: 100%;
  }

  .top-news-block {
    margin-top: 64px;
    padding-top: 38px;
  }

  .top-news-item {
    padding: 18px 0 18px 14px;
  }

  .top-news-item::before {
    top: 27px;
  }

  .top-news-item__text {
    font-size: 0.9rem;
  }
}

/*top title共通*/
.title-bar h2 {
  color: #696969;
  padding: 30px 0em 0 0em;
  font-size: 1.5rem;
  text-align: center;
}

/* 親要素（画像を含むコンテナ） */
.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 画像のスタイル */
.topA {
  display: block;
  width: calc(100% - 30px);
  max-width: 1000px;
  margin: 0 auto;
  animation: topA 2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes topA {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}

.topB {
  display: block;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  margin-top: 20px;
}

.topC {
  display: block;
  margin: 0 auto;
  width: 500%;
  margin: 50px;
}


.copyright {
  margin-top: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.copyright small {
  font-size: 12px;
}

.h7 {
  color: #f0d2b7;
  letter-spacing: 0.2em;
  text-align: center;
}

/* スマホ */
@media screen and (max-width: 900px) {
  .footer-top {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 30px 16px 24px;
  }

  .footer-section {
    max-width: none;
  }

  .footer-section h3 {
    min-height: auto;
    margin-bottom: 14px;
  }

  .footer-section ul li a {
    padding: 11px 12px;
  }

  .footer-bottom {
    padding: 22px 16px 18px;
  }

  .footer-bottom ul {
    gap: 8px 14px;
  }

  .cta .cta-button {
    width: 100%;
    max-width: 360px;
  }
}
/*サイドバーの検索利用分*/

/*検索結果*/
.search-title {
  padding-bottom: 0.5rem;
  color: #000;
  text-align: center;
}
.search-result-item {
  margin-top: 2rem;
}
.post {
  margin-top: 1rem;
}

/*sp-banner*/
.sp-banner a + a {
  margin-top: 1.5rem;
  display: block;
}
/*リキャプチャ*/
/* リキャプチャ */
.rec-text {
  text-align: center;
  margin-top: 2rem;
  line-height: 1.9;
}

.rec-text p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.rec-text a {
  text-decoration: underline;
  display: inline;
}

.grecaptcha-badge {
  visibility: hidden;
}

.top-features-contents {
  width: 90%;
  margin: 0 auto;
}
.top-features-contents img {
  display: block;
  width: 100%;
}
.top-features-contents a + a {
  margin-top: 1rem;
  display: block;
}

#wpadminbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  text-align: left !important;
}

#wpadminbar ul,
#wpadminbar li {
  display: block !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* =========================================================
   PREF MAP (TOP) - STABLE CLEAN CSS (NO BUG / NO FLY)
   ========================================================= */

:root {
  --brand: #c1121f;
  --brand2: #e11d48;
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.1);
  --shadowA: 0 28px 70px rgba(15, 23, 42, 0.12);
  --shadowB: 0 6px 18px rgba(15, 23, 42, 0.08);
  --r-lg: 24px;
  --r-md: 18px;
}

/* 背景は無し */
.pref-map-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 16px 22px;
  background: transparent;
}

/* タイトル */
.pref-map-title {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pref-map-title::before {
  content: "";
  width: 10px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  box-shadow: 0 12px 22px rgba(193, 18, 31, 0.16);
}

/* レイアウト：親は囲わない */
.pref-map-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .pref-map-wrap {
    grid-template-columns: 1fr;
  }
}

/* 左右カード */
#prefMap,
.pref-map-side {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.973);
  box-shadow: var(--shadowA), var(--shadowB);
  overflow: hidden;
  position: relative;
}

/* 地図カード */
#prefMap {
  height: 640px;
  padding: 18px;
  background: radial-gradient(
    1200px 600px at 25% 10%,
    #ffffff 0%,
    #f7f8fa 48%,
    #eef1f6 100%
  );
}

@media (max-width: 980px) {
  #prefMap {
    height: 440px;
  }
}

/* 右パネル */
.pref-map-side {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}

.pref-map-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ボタン */
.pref-geo-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 16px 30px rgba(233, 31, 44, 0.18);
  cursor: pointer;
}
.pref-geo-btn:hover {
  filter: brightness(1.02);
}

/* 求人枠 */
#prefJobs {
  margin-top: 6px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--r-md);
  padding: 14px;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
}

.pref-jobs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#prefJobsTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
#prefJobsMore {
  font-size: 12px;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  opacity: 0.9;
}
#prefJobsMore:hover {
  text-decoration: underline;
}

#prefJobsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 求人カード */
#prefJobsGrid {
  display: grid;
  gap: 10px;
}

.pref-job-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #d9dde5;
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(17, 24, 39, 0.04);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.pref-job-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
  border-color: #efb7c0;
}

.pref-job-card__body {
  padding: 12px 14px;
}

.pref-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pref-job-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #f0bcc5;
  border-radius: 999px;
  background: #fff8f9;
  color: #c81e3a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.pref-job-text {
  min-width: 0;
  color: #1f2937;
  line-height: 1.4;
  word-break: break-word;
}

.pref-job-text--job {
  font-size: 15px;
  font-weight: 700;
}

.pref-job-text--company {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.pref-job-card__divider {
  height: 1px;
  margin: 9px 0;
  background: linear-gradient(
    90deg,
    rgba(220, 38, 38, 0.22) 0%,
    rgba(220, 38, 38, 0.08) 45%,
    rgba(148, 163, 184, 0.1) 100%
  );
}

@media (max-width: 767px) {
  #prefJobsGrid {
    gap: 8px;
  }

  .pref-job-card__body {
    padding: 10px 12px;
  }

  .pref-job-row {
    gap: 8px;
  }

  .pref-job-chip {
    min-width: 48px;
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .pref-job-text--job {
    font-size: 14px;
  }

  .pref-job-text--company {
    font-size: 13px;
  }

  .pref-job-card__divider {
    margin: 8px 0;
  }
}

/* =========================================================
   MAP:
========================================================= */

/* SVG */
#prefMap svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
  transform-origin: center;
}

#prefMap svg text,
#prefMap svg foreignObject {
  display: none !important;
}

/* clickable */
#prefMap g.prefecture {
  cursor: pointer;
}


#prefMap g.prefecture > path,
#prefMap g.prefecture > polygon {
  fill: #f1f5f9;
  stroke: #64748b;
  stroke-width: 1.55;
}

#prefMap g.prefecture:hover > path,
#prefMap g.prefecture:hover > polygon {
  fill: rgba(193, 18, 31, 0.18);
  stroke: rgba(193, 18, 31, 0.62);
  filter: drop-shadow(0 0 10px rgba(193, 18, 31, 0.2));
}

/* active */
#prefMap g.prefecture[data-active="1"] > path,
#prefMap g.prefecture[data-active="1"] > polygon {
  fill: rgba(193, 18, 31, 0.34);
  stroke: rgba(193, 18, 31, 0.86);
  stroke-width: 1.65;
}


#prefMap .boundary-line {
  pointer-events: none;
}


#prefPin {
  display: none !important;
}

/* tooltip */
.pref-tooltip {
  position: absolute;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translate(12px, 12px);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.pref-tooltip[data-show="1"] {
  opacity: 1;
}

/* ===== Motion Base ===== */
:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow1: 0 24px 60px rgba(15, 23, 42, 0.1);
  --shadow2: 0 6px 18px rgba(15, 23, 42, 0.06);
}


.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}


.card-pro {
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow1), var(--shadow2);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
}
.card-pro::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(
    700px 220px at 30% 0%,
    rgba(255, 255, 255, 0.85),
    transparent 60%
  );
  pointer-events: none;
}

/* ホバーで“1段だけ”上げる（やりすぎ禁止） */
.card-pro:hover {
  box-shadow:
    0 34px 86px rgba(15, 23, 42, 0.14),
    0 10px 26px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== kill native tooltip feel (prevent flicker / overlay) ===== */
#prefMap g.prefecture {
  cursor: pointer;
}


#prefMap g.prefecture[title],
#prefMap g.prefecture *[title] {
  pointer-events: auto;
}








/* 問い合わせPAGE*/
.contact-switch-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.contact-switch-intro {
  text-align: center;
  margin-bottom: 24px;
}

.contact-switch-intro__title {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  color: #111827;
}

.contact-switch-intro__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: #64748b;
}

.contact-switch-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.contact-switch-tab {
  min-width: 220px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid #d7dee8;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-switch-tab:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.contact-switch-tab.is-active {
  background: linear-gradient(135deg, #111827 0%, #374151 100%);
  color: #ffffff;
  border-color: #111827;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.14);
}

.contact-switch-panel {
  display: none;
}

.contact-switch-panel.is-active {
  display: block;
}

.company-contact-form .company-recaptcha-note,
.general-contact-form .general-recaptcha-note {
  display: block;
  margin: 30px auto 18px;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.9;
  color: #64748b;
}

.company-contact-form .company-recaptcha-note span,
.company-contact-form .company-recaptcha-note a,
.general-contact-form .general-recaptcha-note span,
.general-contact-form .general-recaptcha-note a {
  display: inline;
}

.company-contact-form .company-recaptcha-note a,
.general-contact-form .general-recaptcha-note a {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 600;
}

@media (max-width: 767px) {
  .contact-switch-wrap {
    padding: 16px 12px 28px;
  }

  .contact-switch-intro__title {
    font-size: 28px;
  }

  .contact-switch-intro__text {
    font-size: 14px;
  }

  .contact-switch-tab {
    width: 100%;
    min-width: 100%;
  }

  .company-contact-form .company-recaptcha-note,
  .general-contact-form .general-recaptcha-note {
    white-space: normal;
  }
}

/*コピー制御*/
body {
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  pointer-events: none;
}