/*
Theme Name: GROW Theme
Description: 株式会社GROWのオリジナルテーマ
Version: 1.0.0
*/

/* =========================================
   1. ベーススタイル (スマホ・共通設定)
   ========================================= */

/* --- 変数 & リセット --- */
:root {
  --color-primary: #20B573;
  --color-blue: #0073bb;
  --color-accent: #f37021;
  --color-text-main: #333333;
  --color-text-sub: #666666;
  --color-bg-light: #f9f9f9;
  --color-white: #ffffff;
  --font-base: "Noto Sans JP", sans-serif;
  --container-width: 75rem;
  --header-height: 5rem; /
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ユーザビリティ重視のため、%指定でブラウザ設定を尊重 */
html {
  font-size: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  color: var(--color-text-main);
  line-height: 1.6;
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
}

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

a:hover {
  opacity: 0.9;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pc-only {
  display: none; /* スマホではPC用の改行を隠す */
}
.sp-only {
  display: block; /* スマホ用の改行を表示 */
}

.br-span.pc-only {
  display: inline;
}
.br-span.sp-only {
  display: inline-block;
}

/* --- 共通クラス --- */
.container {
  width: 100%;
  padding: 0 1.25rem;
  margin: 0 auto;
  max-width: var(--container-width);
}

.section-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 2rem; /* 32px */
  line-height: 1.4;
}

.text-center {
  text-align: center;
}

/* =========================================
   ボタン共通のベース設定
========================================= */
.btn-primary, .btn-secondary, .btn-secondary-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 2.5rem;
  margin-top: 3rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 999px; /* 完全な角丸 */
  transition: all 0.3s ease;
  width: 100%;
  max-width: 21.25rem;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* =========================================
   1. 最強のCVボタン（オレンジ）の配色
========================================= */
.btn-primary {
  background: linear-gradient(135deg, #ff8c42 0%, #f37021 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3);
  border: none;
}

/* =========================================
   2. 洗練のサブボタン（緑フチ）の配色
========================================= */
.btn-secondary {
  background-color: #ffffff;
  color: #20b573;
  border: 1px solid #20b573;
}
/* =========================================
   3. 緑背景専用のサブボタン（白フチのゴーストボタン）
========================================= */
.btn-secondary-white {
  background-color: transparent; /* 背景は透明にして、親の緑を透けさせる */
  color: #ffffff; /* 文字は純白 */
  border: 1px solid #ffffff; /* 2pxの白枠線 */
}

/* =========================================
   ホバーアクション（※マウスがあるPC環境のみ適用）
========================================= */
@media (hover: hover) {
  /* プライマリー（オレンジ）のホバー */
  .btn-primary:hover {
    /* グラデーションの色を少し明るくして発色を良くする */
    background: linear-gradient(135deg, #ff9e58 0%, #e56012 100%);
    box-shadow: 0 8px 15px rgba(243, 112, 33, 0.4); /* 影を濃く広くして立体感アップ */
  }
  .btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 30%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg) skewX(-10deg);
    z-index: 1;
    transition: none;
  }

  /* ホバー時に光の帯をスイープさせる */
  .btn-primary:hover::after {
    left: 150%; /* 左から右へスイープ */
    transition: left 0.7s ease-in-out; /* 0.8秒かけて移動 */
  }

  /* セカンダリー（緑フチ）のホバー */
  .btn-secondary:hover {
    background-color: #20b573;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(32, 181, 115, 0.2);
  }
  .btn-secondary-white:hover {
    background-color: #ffffff; /* ホバーで白く塗りつぶす */
    color: #20b573; /* 文字をメインの緑色に反転させる（文字がくり抜かれたように見えます！） */
    transform: translateY(-3px); /* 少し上に浮かす */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* 背景が緑なので、影は少しだけ黒を落とす */
  }
}

/* アンダーライン */
.underline {
color: #333333;
  font-weight: bold;
  display: inline; 
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: relative;
  z-index: 1;
}
.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2em; /* 隙間 */
  height: 0.15em; /* 太さ */
  width: 100%; /* 文字幅 */
  background-color: #016ab7;
  border-radius: 10em; 
  z-index: -1; /* 文字の後ろ */
}

.emphasis {
  color: var(--color-blue);
}

/* フェードイン */
/* 左から右にフェードインするアニメーション定義 */
.fade-in-right {
  opacity: 0 !important;
  /* 定位置（0または特定値）から 100px 左からスタート */
  transform: translateX(calc(0% - 100px)) !important;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease !important;
}

.fade-in-right.is-visible {
  opacity: 1 !important;
  transform: translateX(0%) !important;
}

/* 右から左にフェードイン（初期位置を右にずらす） */
.fade-in-left {
  opacity: 0 !important;
  /* 定位置の -16.5% に 100px を足した場所からスタート */
  transform: translateX(calc(-16.5% + 100px)) !important;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease !important;
  will-change: opacity, transform;
}

/* 2. 終了状態：定位置に戻す */
.fade-in-left.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
/* フェードアップ：初期状態（下から上に動く準備） */
.fade-up {
  opacity: 0 !important;
  transform: translateY(50px) !important; /* 下に50pxずらす */
  transition:
    opacity 0.8s ease,
    transform 0.8s ease !important;
  will-change: opacity, transform;
}

/* 表示時：元の位置に戻る */
.fade-up.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ★左から順に出現させるための時間差（ディレイ）設定 */
.fade-up:nth-child(1) {
  transition-delay: 0.1s !important;
} /* 左 */
.fade-up:nth-child(2) {
  transition-delay: 0.3s !important;
} /* 中央 */
.fade-up:nth-child(3) {
  transition-delay: 0.5s !important;
} /* 右 */

/* フェードイン（その場ですーっと現れる） */
.fade-in {
  opacity: 0 !important;
  /* transformは指定しない、または none に固定 */
  transform: none !important;
  transition: opacity 1s ease-out !important;
  will-change: opacity;
}

/* 画面内に入った時の状態 */
.fade-in.is-visible {
  opacity: 1 !important;
}
/* -------------------------------------------
   2. お問い合わせボタン (スマホ：右下丸固定)
   ------------------------------------------- */
/* --- お問い合わせボタン（ベース：スマホ版 丸ボタン） --- */
.side-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: auto;
  bottom: 20px;
  right: 20px;
  z-index: 1900;
  width: 70px;
  height: 70px;
  border-radius: 50%; /* スマホでは丸 */
  background: linear-gradient(135deg, #ffa04c 0%, #e67e22 100%);
  box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  writing-mode: horizontal-tb;
  letter-spacing: 0;
  transition: transform 0.2s;

  /* ★キラッとエフェクトのための追加 */
  overflow: hidden; /* 光を閉じ込める */
}

/* ★キラッとエフェクト本体（共通設定） */
.side-tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; /* 開始位置を十分に左へ */
  width: 80%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); /* 斜めにする */
  animation: shine-side-tab 4s infinite; /* 4秒おきに光る */
  z-index: 1;
}

/* ★光のアニメーション */
@keyframes shine-side-tab {
  0% {
    left: -150%;
  }
  15% {
    left: 150%;
  } /* スッと通り過ぎる */
  100% {
    left: 150%;
  } /* 待機時間 */
}

/* タブ内のテキストやアイコンを光より上に出す */
.side-tab > * {
  position: relative;
  z-index: 2;
}

/* メールアイコン（SVGデータをCSSに埋め込んで綺麗に描画） */
.side-tab::before {
  content: "";
  display: block;
  width: 26px; /* 横幅 */
  height: 18px; /* 縦幅 */
  margin-bottom: 4px;
  border: none;
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='1' y='2' width='22' height='14' rx='2' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpolyline points='1,4 12,11 23,4' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.side-tab:hover {
  background: rgb(188, 0, 0);
  opacity: 1;
}

/* --- ヘッダー --- */
.header {
  width: 100%;
  background-color: var(--color-white);
  border-bottom: 1px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header-inner {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  width: 170px;
}
.logo img {
  width: 150px;
}
.logo-img {
  width: 200px;
}

.logo-txt {
  font-size: 0.75rem; /* 12px */
  color: #777;
  letter-spacing: 0.05em;
}

/* --- アップロードされたロゴ画像用のスタイル --- */
.site-logo {
  display: flex;
  align-items: center;
}

.site-logo .custom-logo-link {
  display: block;
}

/* スマホでもPCでも綺麗に収まるように最大幅を指定 */
.site-logo .custom-logo {
  max-width: 180px;
  height: auto;
  display: block;
  margin-right: 10px;
}

/* --- ハンバーガーボタン (スマホ用) --- */
.hamburger-btn {
  display: block;
  position: fixed;
  top: 20px;
  right: 10px;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 10px;
  border: #fff;
  cursor: pointer;
  z-index: 2000;
}
.hamburger-btn span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 0.1875rem;
  background-color: var(--color-primary);
  border-radius: 0.1875rem;
  transition: all 0.3s ease;
}

.hamburger-btn span:nth-of-type(1) {
  top: 22%;
}
.hamburger-btn span:nth-of-type(2) {
  top: 47%;
}
.hamburger-btn span:nth-of-type(3) {
  top: 73%;
}

.hamburger-btn.active span:nth-of-type(1) {
  transform: translate(-1rem, 0.8125rem) rotate(45deg);
}
.hamburger-btn.active span:nth-of-type(2) {
  opacity: 0;
}
.hamburger-btn.active span:nth-of-type(3) {
  transform: translate(-1rem, -0.8125rem) rotate(-45deg);
}

/* --- ナビゲーションメニュー (スマホ用・決定版) --- */
.nav-menu {
  position: fixed;
  top: 0;
  left: 0; /* ★重要：右寄せではなく「左端」を基準にする */
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.875rem;

  /* 右へ100%飛ばして隠す */
  transform: translateX(100%);

  /* ★重要：閉じている時は「見えない状態」にして、余白を作らせない */
  visibility: hidden;
  opacity: 0;

  /* アニメーション設定 */
  transition:
    transform 0.4s ease,
    opacity 0.4s ease,
    visibility 0.4s;

  z-index: 1500;
}

.nav-menu.active {
  /* 元の位置（画面内）に戻す */
  transform: translateX(0);

  /* 開いた時は「見える」ようにする */
  visibility: visible;
  opacity: 1;
}

/* --- ナビゲーションリンク (ヘッダー) --- */
.nav-link {
  font-size: 1.125rem; /* ★ご指定の18px程度 */
  font-weight: 500;
  color: var(--color-text-main);
  position: relative;
  text-decoration: none;
}

/* 左から右に伸びる下線アニメーション */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 0.2rem;
  border-radius: 0.2em;
  background-color: var(--color-blue);
  transition: width 0.3s ease;
}
.nav-link:hover {
  opacity: initial;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-btn {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.75rem 1.56rem; /* 12px 25px */
  border-radius: 3.125rem;
  font-weight: bold;
  font-size: 1rem;
  transition: all .3s;
}

.nav-btn:hover {
  opacity: 0.9;
  color: white;
  background: var(--color-primary);
}
/* ボタンには下線をつけない */
.nav-btn::after {
  display: none;
}

/* --- ヒーローセクション --- */
.hero {
  position: relative;
  height: 37.5rem; /* 600px */
  /* 背景画像の指定は削除し、スライドショーコンテナに任せます */
  /* background: ... 削除 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 画像がはみ出さないように */
}

/* スライドショーのコンテナ */
.hero-slideshow {
  position: absolute;
  inset: 0; /* top:0, left:0, right:0, bottom:0 と同じ */
  width: 100%;
  height: 100%;
  z-index: 0; /* 最背面 */
}

/* 各スライド画像 */
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0; /* 最初は透明 */
  animation: slideAnime 15s infinite; /* 15秒でループ */
}

/* --- アニメーションのタイミング調整 --- */
/* 3枚の画像を順番に表示させるための遅延設定 */
.slide-item:nth-child(1) {
  animation-delay: 0s;
}
.slide-item:nth-child(2) {
  animation-delay: 5s; /* 5秒後に開始 */
}
.slide-item:nth-child(3) {
  animation-delay: 10s; /* 10秒後に開始 */
}

/* --- フェードアニメーション定義 --- */
@keyframes slideAnime {
  0% {
    opacity: 0;
    transform: scale(1); /* 拡大なし */
  }
  10% {
    opacity: 1; /* ふわっと表示 */
  }
  33% {
    opacity: 1; /* 表示し続ける */
    transform: scale(1.1); /* ゆっくり少し拡大（ズーム効果） */
  }
  43% {
    opacity: 0; /* 次の画像と重なりながら消える */
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* 黒いフィルター (文字を見やすくするため) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* 少し濃いめにして文字をくっきり */
  z-index: 1; /* スライドショーの上、文字の下 */
}

/* コンテンツは一番手前 */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  padding: 0 1.25rem;
  color: var(--color-white);
}

/* タイトル等は以前のまま維持 */
.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

.hero-sub {
  font-size: 1.125rem;
  font-weight: 500;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
.hero-sub span {
  display: inline-block;
}

/* ニュースエリアやサイドタブも手前に表示 */
.hero-news,
.side-tab {
  z-index: 999;
}

.hero-news {
  position: absolute;
  bottom: 3.75rem; /* 60px */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 75rem;
  background-color: #ffffff !important; /* 白背景を強制適用 */
  border-radius: 3.125rem; /* 50px */
  padding: 0.9375rem 1.56rem; /* 15px 25px */
  box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1);
  display: flex !important; /* Flexboxを強制 */
  align-items: center;
  justify-content: space-between; /* 要素を横並びに配置 */
  font-size: 0.95rem;
  z-index: 20; /* 画像やオーバーレイより確実に手前に */
  flex-wrap: nowrap; /* 折り返しを禁止 */
}

.news-badge {
  color: var(--color-blue);
  padding: 0 1em;
  border-right: 1px solid var(--color-blue);
  font-size: 1.1rem;
  font-weight: bold;
  margin-right: 0.9375rem; /* 15px */
  white-space: nowrap;
}

.news-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}

.news-text:hover {
  text-decoration: underline;
  opacity: 0.7;
}

.news-icon-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.9375rem; /* 15px */
  transition: opacity 0.3s;
}
.news-icon-link:hover {
  opacity: 0.7;
}

.news-icon {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
}

/* --- お悩み解決セクション --- */
.problem-section {
  padding: 6.25rem 0 10rem; /* 100px */
  background: url("images/problem-sec-bg.jpg") no-repeat center center/cover;
  position: relative;
}

.problem-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(46 204 112 / 85%);
}

.problem-card {
  position: relative;
  background: white;
  border-radius: 1.25rem; /* 20px */
  padding: 3.75rem 1.25rem; /* 60px 20px */
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
}

.problem-card-title {
  font-size: 1.5rem; /* スマホ用 */
  font-weight: 700;
  color: #333;
  margin-bottom: 3.125rem; /* 50px */
}
.problem-card-title span {
  font-size: 1.3em;
color: #333333;
text-emphasis-style: filled dot;
  text-emphasis-color: #016ab7; 
  text-emphasis-position: over; 
  display: inline-block;
  line-height: 1;
}

.problem-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
  margin-bottom: 1.875rem; /* 30px */
  justify-content: center;
  align-items: center;
}

.problem-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 15px;
}

.problem-list .problem-item:nth-child(3) {
  gap: 0;
}

.problem-icon {
  font-size: 3.5rem;
  color: #555;
  margin-bottom: 1rem;
}

.problem-text {
  color: var(--color-text-main);
  font-weight: 700;
  font-size: 1.3rem; /* 18px */
}

.problem-subtext {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 1em;
  color: var(--color-text-main);
}

/* 中央の縦線 */
.problem-divider {
    width: 0.1rem;
    height: 5em;
    background-color: #333;
    opacity: 0.5;
    margin: 3rem auto;
}

.problem-solution-banner {
  background-color: var(--color-blue);
  color: white;
  padding: 0.5rem; /* 15px 40px */
  font-weight: 700;
  font-size: clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
  display: inline-block;
  width: 100%;
  box-shadow: 0 0.25rem 0.625rem #016ab76e;
  letter-spacing: 0.05em;
}

/* --- サポートセクション --- */
.support-section {
  background-color: white;
  padding: 6.25rem 0 8.125rem; /* 100px 130px */
  text-align: center; /* ★全体を中央揃えにする */
  position: relative;
  border-radius: 3.125rem 3.125rem 0 0; /* 50px */
  margin-top: -3.125rem;
  z-index: 5; /* ヒーローや他セクションとの重なり順を調整 */
}

.support-heading {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  text-align: left;
}
.support-heading span {
  display: inline-block;
}

.support-desc {
  max-width: 75rem;
  margin: 0 auto 3rem; /* ★左右マージンautoで中央配置 */
  font-size: 1rem;
  line-height: 2;
  text-align: left; /* ★文章自体は読みやすく左揃えでもOKですが、ブロック自体を中央に */
  display: inline-block; /* ★または block にして margin: 0 auto を効かせる */
}

/* --- 分野紹介セクション --- */
.fields-section {
  /* 背景画像 (仮) */
  background-image: url("images/field-area-bg.png");
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 6.25rem 0;
  color: white;
  margin-top: -2.5rem; /* -40px */
  z-index: 10;
  border-radius: 1.875rem; /* 30px */
  overflow: hidden;
}

.fields-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.75;
  z-index: 1;
}

.fields-section .container {
  position: relative;
  z-index: 2;
}

.fields-section .section-title {
  color: white;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 0.9375rem;
  margin-bottom: 1.875rem;
  font-size: clamp(1.375rem, 1.255rem + 0.51vw, 1.5rem);
}

.fields-desc {
  text-align: left;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 3.75rem; /* 60px */
  opacity: 0.95;
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem; /* 20px */
  max-width: 62.5rem; /* 1000px */
  margin: 2.5rem auto;
}

.field-item {
  text-align: center;
}

.field-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  border: none;
  margin-bottom: 1rem;
  background-color: transparent;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.field-name {
  font-size: 1rem;
  font-weight: 700;
}

/* --- 流れセクション --- */
.flow-section {
  background-color: white;
  padding: 6.25rem 0; /* 100px */
  border-radius: 0 0 3.125rem 3.125rem; /* 50px */
  position: relative;
  z-index: 20;
}

.flow-section .section-title,
.faq-section .section-title {
  color: var(--color-text-main);
  text-align: left;
  border-bottom: 3px solid var(--color-blue);
  padding-bottom: 0.9375rem;
  margin-bottom: 1.875rem;
  font-size: 1.75rem;
}

.flow-desc,
.section-desc {
  text-align: left;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 5rem;
  color: var(--color-text-main);
}

.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3.75rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 10rem; /* 160px */
  text-align: center;
}

.step-card:not(:last-child)::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  color: #ccc;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.step-icon-circle {
  width: 10rem;
  height: 10rem;
  background-color: #f2f4f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
}
.step-icon-circle img {
  padding: 1.5em;
}

.step-title {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #000;
}

/* --- お問い合わせセクション --- */
.contact-section {
  display: grid;
  grid-template-columns: 1fr;
}

.contact-left {
  background: #1a1a1a;
  color: white;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.contact-right {
  background: url("images/group-photo.png") no-repeat center center/cover;
  min-height: 18.75rem; /* 300px */
}

.contact-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.contact-text {
  font-size: 1rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

/* --- フッター --- */
.footer {
  background: linear-gradient(135deg, #20b573, #03aaba);
  color: #ffffff;
  padding: 5rem 0 1.875rem;
  font-size: 0.9375rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 3.125rem;
}

.footer-logo {
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: 0.05em;
}

/* フッター内のH4やPのスタイル */
.footer-logo-area h4 {
  font-size: 0.875rem; /* 14px */
  margin-bottom: 2.1875rem; /* 35px */
  opacity: 0.9;
  font-weight: 400;
}

.footer-logo-area p {
  line-height: 1.8;
  margin-bottom: 1.875rem;
}

/* 右側：ナビゲーション */
.footer-nav {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 0;
}

/* フッターナビのリンク設定（丸アニメーション付き） */
.footer-nav a {
  position: relative;
  display: inline-block;
  color: white;
  text-decoration: none;
  transition: opacity 0.3s ease;
  margin-bottom: 0.9375rem; /* 15px */
  font-size: 1rem;
}

/* 左に出現する丸 */
.footer-nav a::before {
  content: "";
  position: absolute;
  left: -1.125rem; /* -18px */
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 0.5rem; /* 8px */
  height: 0.5rem;
  background-color: #8cefa0;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-nav a:hover {
  opacity: 0.9;
}

.footer-nav a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 3.125rem 0 1.56rem; /* 50px 25px */
}

.copyright {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 3rem 0;
  border-top: 1px solid #fff;
}

/* =========================================
   下層ページ用ヘッダー & パンくずリスト
   ========================================= */

/* --- ページヘッダー共通設定 --- */
.page-header {
  width: 100%;
  height: 18.75rem; /* 300px */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(32 181 115 / 80%);
  z-index: 1;
}

/* ページタイトル */
.page-title {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 2rem; /* 32px */
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- 各ページの背景画像設定（サンプル） --- */
/* 私たちについて用 */
.bg-about {
  background-image: url("images/page-header-about.jpg");
}

/* 特定技能について用 */
.bg-specified {
  background-image: url("images/page-header-specified.jpg");
}

/* 会社概要用 */
.bg-company {
  background-image: url("images/page-header-company.jpg");
}

/* お知らせ用 */
.bg-news {
  background-image: url("images/page-header-news.jpg");
}

/* お問い合わせ用 */
.bg-contact {
  background-image: url("images/page-header-contact.jpg");
}

/* --- パンくずリストエリア --- */
.breadcrumb-area {
  width: 100%;
  background-color: #ffffff;
  padding: 1.25rem 0; /* 上下20px */
}

.breadcrumb-nav {
  font-size: 0.875rem; /* 14px */
  color: #666;
}

.breadcrumb-nav a {
  color: #333;
  transition: opacity 0.3s;
}

.breadcrumb-nav a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

.breadcrumb-separator {
  margin: 0 0.5em;
  color: #999;
}

.current-page {
  color: #666; /* 現在地はクリックできない色に */
}

/* =========================================
   私たちについて：ミッションセクション
   ========================================= */
.about-mission-section {
  position: relative;
  width: 100%;
  padding: 8rem 0; /* 上下余白たっぷり */
  text-align: left;
  /* 背景画像の設定 */
  background-image: url("images/page-header-contact.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

/* 白いグラデーションマスク（上と下から白をフェードさせる） */
.about-mission-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 上から白、真ん中が少し透けてる、下も白 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.7) 70%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 1;
}

/* コンテンツを前面に */
.about-mission-section .container {
  position: relative;
  z-index: 2;
}

/* タイトル設定 */
.mission-title {
  font-size: clamp(1.75rem, 1.31rem + 1.88vw, 3rem);
  font-weight: 900;
  color: #333;
  line-height: 1.6;
  margin-bottom: 3rem;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
}

/* 本文設定 */
.mission-text {
  font-size: 1rem;
  line-height: 2.2; /* 行間広め */
  color: #333;
  font-weight: 500;
}

/* =========================================
   私たちについて：特徴セクション（ジグザグ）
   ========================================= */
.about-features-section {
  padding: 3rem 0; /* 100px */
  background-color: #fff;
  overflow: hidden; /* 横にはみ出した帯でスクロールバーが出ないように */
}

/* --- 共通設定 --- */
.feature-row {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: center;
}

.feature-row.left-img {
  flex-direction: column-reverse;
}

.feature-img-wrapper,
.feature-content {
  width: 100%;
  position: relative;
}

.feature-img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 影をつけて立体感 */
}

/* 緑の帯（見出し）共通 */
.feature-label {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  padding: 1rem 0.5em;
  font-size: clamp(1.125rem, 0.527rem + 2.55vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  width: 100%; /* スマホでは幅いっぱい */
  position: relative;
  z-index: 10; /* 画像より手前に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.feature-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}
/* =========================================
   特定技能ページ専用スタイル
   ========================================= */

/* --- 共通：左寄せの緑下線付き見出し --- */
.section-title-left {
  font-size: clamp(1.375rem, 1.255rem + 0.51vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text-main);
  text-align: left;
  border-bottom: 3px solid var(--color-blue);
  padding-bottom: .5em;
  margin-bottom: 3rem;
  position: relative;
}

/* --- 1. 導入セクション --- */
.specified-intro-section {
  padding: 5rem 0;
  text-align: center;
}
.specified-intro-section img {
  margin: 0 auto;
}

.specified-intro-title {
  color: var(--color-text-main);
  font-size: clamp(1.375rem, 0.777rem + 2.55vw, 2rem);
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.specified-intro-text {
  font-size: 0.95rem;
  margin-bottom: 4rem;
  text-align: left; /* スマホは左揃え */
  display: inline-block;
}

/* 比較テーブルラッパー */
.comparison-table-wrapper {
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* 列の間隔 */
  align-items: stretch;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* 左側のラベル列 (PCのみ) */
.comparison-labels {
  display: none; /* スマホ非表示 */
  flex-direction: column;
  justify-content: space-between;
  padding-top: 60px; /* ヘッダー分空ける */
  padding-bottom: 20px;
  text-align: right;
  font-weight: 700;
  color: #333;
  width: 80px;
  margin-right: 10px;
}
.c-label {
  height: 100px; /* 各行の高さ合わせ */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* カラム共通設定 */
.comparison-col {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.col-header {
  color: white;
  padding: 15px 0;
  font-weight: 700;
  font-size: 1.1rem;
}
.col-content {
  background: white;
  padding: 20px;
  height: 100%;
}

/* 各行のデザイン */
.col-row {
  height: auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px dashed #ccc;
}
.col-row:last-child {
  border-bottom: none;
}
.col-row p {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 国内採用のみ（グレー） */
.col-gray .col-header {
  background-color: #999;
}
.col-gray .col-content {
  background-color: #f2f2f2; /* 薄いグレー背景 */
}
/* 当社なら（オレンジ） */
.col-orange {
  transform: scale(1.02); /* 少し大きく強調 */
  border: 2px solid var(--color-accent);
}
.col-orange .col-header {
  background-color: var(--color-accent);
}
.col-orange .col-content {
  background-color: #fff;
}
.col-orange p {
  color: #333;
}

/* スマホ用ラベル */
.sp-label {
  display: block;
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 5px;
  font-weight: normal;
}

/* --- 2. 制度概要セクション --- */
.specified-about-section {
  padding: 3rem 0 6rem;
  background-color: #fff;
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
}

.about-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about-text-area {
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
}

/* 特徴リストボックス（グレー） */
.about-features-box {
  background-color: #f9f9f9; /* 薄いグレー */
  padding: 2rem;
  border-radius: 5px;
}

.box-title {
  text-align: left;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.feature-check-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* オレンジのチェックマーク */
.feature-check-list li::before {
  content: "";
  display: inline-block;
  background-image: url(images/orange-check.png);
  width: 20px;
  height: 20px;
  background-size: contain;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  font-size: 1.1em;
}

/* イラスト表示 */
.worker-illustration {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  z-index: 0;
}

/* --- 3. 考え方セクション --- */
.specified-mindset-section {
  padding: 5rem 0 6rem;
  background-color: rgb(217, 217, 217, 20%);
}

.mindset-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.mindset-card {
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 2rem 1rem 0;
}

.mindset-header {
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding: 10px 5px;
  font-weight: 700;
  font-size: 1.4rem;
}

.mindset-body {
  padding: 2rem 0;
  text-align: center;
}

.mindset-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.mindset-img img {
  max-height: 100%;
  width: auto;
}

.mindset-text {
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.4;
    width: 90%;
    font-weight: 400;
    margin: 0 auto 1rem;
}

/* =========================================
   特定技能ページ：誤解解消 & 理由セクション
   ========================================= */

/* --- 理由セクション（上半分） --- */
.support-reason-section {
  padding: 5rem 0;
  background-color: #fff;
}

.reason-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
}

.reason-text p {
  margin-bottom: 1.5rem;
  line-height: 2;
  text-align: left;
}

.reason-img img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- 誤解解消セクション（下半分） --- */
.misunderstanding-section {
  padding: 4rem 0 8rem;
  background-color: #fff;
}

/* --- 斜め線とマーカー付きタイトル（修正版） --- */
.misunderstanding-title-wrapper {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* タイトルの枠（背景色は消す） */
.misunderstanding-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  display: flex;
  flex-direction: column; /* 縦並びにする */
  align-items: center; /* 中央揃えにする */
  gap: .5rem; /* アイコンと文字の隙間（好みに合わせて調整してください） */
}

.misunderstanding-title::before {
  content: '';
  display: block;
  width: 3rem; /* アイコンの横幅 */
  height: 3rem; /* アイコンの高さ */
  
  /* ブランドカラーの緑色（#20b573）の丸に、白いチェックが入ったSVGアイコン */
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* カードグリッド */
.misunderstanding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.mis-card {
  background-color: #f5f5f5; /* 薄いグレー */
  border: 1px solid #d9d9d9;
  padding: 2rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* 赤いラベル「誤解1」 */
.mis-label {
  background-color: var(--color-primary);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  width: 125px;
  margin: 0 auto 15px;
}

/* 見出し */
.mis-heading {
  color: var(--color-text-main);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cross-mark {
  height: auto; /* 高さは自動 */
  display: block; /* 余計な隙間を消す */
}

.mis-text {
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.5;
  color: #333;
  font-weight: 400;
}

/* =========================================
   特定技能ページ：当社ができること（緑ボックス）
   ========================================= */
.our-service-section {
  padding: 0 0 6rem;
  background-color: #fff; /* 外側は白 */
}

/* 緑色の大きなコンテナ */
.green-service-box {
  position: relative; /* 基準点 */
  width: 100%;
  background-image: url("images/field-area-bg.png");
  background-size: cover;
  background-position: center;
  border-radius: 1.875rem; /* 30px */
  padding: 3rem 0;
  color: #fff;
  box-shadow: 0 10px 30px #999999a8;
  overflow: hidden;
}

/* 緑色のオーバーレイ（被せる幕） */
.green-service-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.7;
  z-index: 1;
}

/* ★重要：中身の要素をオーバーレイより手前に表示する */
.service-header,
.service-card-grid {
  position: relative;
  z-index: 2;
}
/* --- ヘッダーエリア --- */
.service-header {
  margin-bottom: 3rem;
}

.service-box-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 半透明の白線 */
  display: inline-block;
  width: 100%;
}

.service-lead-text p {
  font-size: 0.95rem;
  line-height: 1.8;
  opacity: 0.95;
}

/* --- カードグリッドエリア --- */
.service-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 1.5rem;
}

/* 白いカード */
.service-item-card {
  background-color: #fff;
  border-radius: 1rem; /* 16px */
  padding: 2rem;
  color: #333;
  display: flex;
  flex-direction: column-reverse; /* スマホでは画像が上に来るようにするか、今のままでいくか */
  /* 今回は画像のデザイン通り、テキストと画像が横並びになるPCレイアウトを目指すため、
     スマホでは縦並び（画像下、テキスト上）のままにします */
  gap: 1.5rem;
}

/* カード内テキストエリア */
.card-text-area {
  flex: 1;
  position: relative;
}

/* 数字のデザイン（01, 02...） */
.card-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: "Roboto", sans-serif; /* 英数字用フォント */
}

/* 見出し */
.card-heading {
  color: var(--color-text-main);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* 説明文 */
.card-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: justify;
}

/* カード内画像エリア */
.card-img-area {
  width: 100%;
  max-width: 200px; /* スマホでの最大幅 */
  margin: 0 auto;
}

.card-img-area img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
}

/* =========================================
   GROWが選ばれる理由 & 流れセクション
   ========================================= */
/* タイトル周り（斜め線装飾） */
.reason-title-wrapper {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.reason-title {
  color: var(--color-text-main);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  flex-direction: column; /* アイコンと文字を縦に並べる */
  align-items: center; /* 中央揃えにする */
}

/* ▼ ここから新規追記：HTMLを汚さずに燈泡アイコンを作る魔法のコード ▼ */
.reason-title::before {
  content: "";
  display: block;
  width: 2.5rem; /* アイコンの幅。文字サイズに合わせて調整 */
  height: 2.5rem; /* アイコンの高さ。文字サイズに合わせて調整 */
  margin-bottom: .5rem; /* 燈泡と文字の間のスペース */
  
  /* ブランドカラーの緑色（#20b573）の丸に、白いチェックが入ったSVGアイコン */
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* グリッドレイアウト */
.reason-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* カードスタイル */
.reason-card {
  background: white;
  border: 1px solid #eee;
  padding: 3rem 2rem 2.5rem; /* 上パディング多め */
  text-align: center;
  position: relative;
  box-shadow: 3px 3px 10px #f0f0f0;
}

/* ラベル (Reason 01) */
.reason-label {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.4rem 2rem;
  position: absolute;
  top: 2rem; /* カード内の位置 */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1rem;
  line-height: 1;
}

/* 見出し */
.reason-heading {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  color: #333;
}

/* 画像 */
.grow-reason-img {
  margin: 0 auto 1.5rem;
  overflow: hidden;
  max-width: 130px;
}
.reason-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 説明文 */
.reason-desc {
  font-size: 0.85rem;
  text-align: left;
  line-height: 1.8;
  color: #333;
}

/* --- 人材紹介までの流れ --- */
.flow-step-section {
  padding: 8rem 0;
}

.flow-intro-text {
  font-size: 0.95rem;
  margin-bottom: 4rem;
  line-height: 1.8;
  color: #333;
}

.flow-step-wrapper {
  display: flex;
  flex-direction: column; /* スマホは縦 */
  align-items: center;
  gap: 2rem;
  margin-bottom: 5rem;
}

.flow-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 200px; /* 幅を制限 */
}

/* 円形アイコンエリア */
.step-icon-area {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5; /* 薄い緑背景 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.step-icon {
  width: 50px; /* アイコンサイズ */
  height: auto;
}

.step-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.step-text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #333;
  text-align: left;
  margin-bottom: 1rem;
}

/* 矢印（スマホ用：下向き） */
.step-arrow {
  width: 2px;
  height: 30px;
  background-color: #ccc;
  position: relative;
}
/* 矢印の先端 */
.step-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #ccc;
}

.flow-note {
  font-size: 0.8rem;
  text-align: left;
  color: #666;
}

/* =========================================
   会社概要ページ
   ========================================= */

.company-info-section {
  padding: 5rem 0 8rem;
  background-color: #fff;
}

/* ラッパー：PCでは横並び、スマホでは縦並び */
.company-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* --- 左側：画像エリア --- */
.company-img-area {
  width: 100%;
}
.company-img-area img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* ほんのり影 */
}

/* --- 右側：データエリア --- */
.company-data-area {
  width: 100%;
}

.company-list {
  width: 100%;
  border-top: 1px solid #ccc; /* 一番上の線（薄い緑） */
}

/* 各行の設定 */
.company-row {
  display: flex;
  flex-direction: column; /* スマホは縦積み */
  padding: 1.5rem 0;
  border-bottom: 1px solid #ccc; /* 下線（薄い緑） */
}

/* 項目名（左） */
.company-row dt {
  font-weight: 700;
  margin-bottom: 0.5rem;
  min-width: 180px; /* PCでの項目名の幅 */
  color: #333;
}

/* 内容（右） */
.company-row dd {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}

/* 所在地などの強調文字 */
.company-row dd strong {
  font-weight: 700;
  color: #000;
}

/* =========================================
   会社概要ページ：代表挨拶セクション
   ========================================= */

.message-section {
  padding: 6rem 0 10rem; /* 下の余白を多めに */
  background-color: #fff;
  position: relative;
  overflow: hidden; /* はみ出した画像を隠す */
}

/* イラスト配置の基準点 */
.message-container {
  position: relative;
  max-width: 900px; /* 本文が読みやすいように幅を制限 */
}

/* --- 見出し（上に緑の線） --- */
.message-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-blue); /* ブランドカラーの緑 */
  margin-bottom: 5rem;
  position: relative;
  display: inline-block;
  text-align: left;
}

/* 上の緑色の線 */
.message-title::before {
  content: "";
  position: absolute;
  top: -1.5rem; /* 文字の少し上 */
  left: 0;
  width: 300px;
  height: 1px;
  background-color: var(--color-blue); /* 薄めの緑（画像に合わせて調整） */
}

/* --- キャッチコピー --- */
.message-slogan {
  font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; /* 明朝体 */
  font-size: clamp(1.5rem, 0.31rem + 5.61vw, 3rem);
  font-weight: 700;
  text-align: left;
  margin-bottom: 4rem;
  color: #333;
  letter-spacing: 0.1em;
}

/* --- 本文 --- */
.message-body {
  text-align: left; /* 中央揃え */
  font-size: 0.95rem;
  line-height: 2.2; /* 行間を広めに */
  color: #333;
  margin-bottom: 5rem;
  font-feature-settings: "palt"; /* 文字詰め */
}

.message-body p {
  margin-bottom: 2rem;
}

/* --- 署名 --- */
.message-signature {
  font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", serif; /* 明朝体 */
  font-size: 1.5rem;
  text-align: center;
  margin-right: 2rem; /* 少し内側に入れる */
  color: #000;
  letter-spacing: 3px;
}

.message-img-worker {
  position: absolute;
  right: 0;
  top: -120px;
  width: clamp(9.375rem, -4.911rem + 29.76vw, 21.875rem);
}

.message-img-family {
  position: absolute;
  left: 0;
  bottom: -180px;
  width: clamp(9.375rem, -4.911rem + 29.76vw, 18rem);
}

/* =========================================
   お知らせページ (News)
   ========================================= */

.news-section {
  padding: 5rem 0 8rem;
  background-color: #fff;
}

/* 2カラムレイアウトのコンテナ */
.news-container {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 4rem;
}

/* --- サイドバー（左） --- */
.news-sidebar {
  width: 100%;
}

.sidebar-widget {
  margin-bottom: 3rem;
}

.widget-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: #000;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.widget-list li {
  margin-bottom: 0.8rem;
}

.widget-list a {
  font-size: 0.95rem;
  color: #333;
  transition: color 0.3s;
  display: block;
}

.widget-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- メインコンテンツ（右：記事一覧） --- */
.news-main {
  width: 100%;
}

.news-list {
  border-top: 1px solid #eee; /* リストの一番上 */
  margin-bottom: 4rem;
}

/* 記事アイテム */
.news-item {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid #eee; /* 区切り線 */
  color: #333;
  transition: background-color 0.3s;
}

.news-item:hover {
  background-color: #fafafa;
  opacity: 1; /* aタグのhover opacityを打ち消し */
}

/* 日付とラベルのエリア */
.news-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.news-date {
  font-size: 0.9rem;
  color: #333;
  font-family: Arial, sans-serif; /* 数字を見やすく */
}

/* --- 共通のベース設定（スマホ優先） --- */
.post-cat {
  display: inline-block;
  background-color: #ffffff; /* 白塗り */
  border: 1px solid; /* 枠線のベース（色は各クラスで指定） */
  
  /* プロの微調整：少し角を丸くして柔らかさを出す */
  border-radius: 2px; 
  
  /* プロの余白：文字が窮屈にならないように */
  padding: 3px 10px;
  
  font-size: 12px; /* スマホ用の少し小さめサイズ */
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  
  /* 魔法のCSS：枠線の色を文字色と同じにする設定 */
  border-color: currentColor; 
}
/* --- ホバーアクション（マウスがあるPC環境のみ） --- */
@media (hover: hover) {
  .post-cat:hover {
    /* ホバーしたらほんのり背景に色を敷いて、高級感を出す */
    background-color: rgba(0, 0, 0, 0.03); 
    transform: translateY(-1px); /* 少し上に浮かす */
  }
}
/* =========================================
   カテゴリ別の色分け（ここを追加！）
========================================= */
/* A. 特定技能：緑（ブランドカラー・安心） */
.post-cat.cat-tokutei {
  color: var(--color-primary); /* メインの緑（#20b573） */
}

/* B. 人材紹介：青（アクセント・知的） */
.post-cat.cat-jinzai {
  color: #016ab7; /* 知的な青 */
}

/* C. その他：灰色（控えめ） */
.post-cat.cat-other {
  color: #777777; /* 目立ちすぎないグレー */
}

/* タイトル */
.news-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
}

/* --- ページネーション --- */
/* =========================================
   ページネーション（モダンアップデート版）
========================================= */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* ゆとりを持たせてスッキリ見せる */
  margin-top: 3rem; /* 上下の余白も少し広めにとるのがモダンです */
}

/* --- 共通のボタンベース（数字＆矢印） --- */
.page-number,
.page-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* スマホでも指でタップしやすいプロの標準サイズ */
  height: 40px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease; /* アニメーションを滑らかに */
  border-radius: 2px; /* 角を少しだけ丸めて優しい印象に */
}

/* =========================================
   1. 現在のページ（ブランドカラーで主張）
========================================= */
.page-number.current {
  background-color: var(--color-primary); /* メインの緑 */
  color: #ffffff;
  border: 1px solid var(--color-primary);
  pointer-events: none; /* 現在のページはクリックできないようにブロック */
  box-shadow: 0 4px 10px rgba(32, 181, 115, 0.2); /* 淡い緑の影で現在地を強調！ */
}

/* =========================================
   2. 他のページ（非アクティブはグレーで静かに）
========================================= */
.page-number:not(.current) {
  background-color: #ffffff;
  color: #555555; /* 目立ちすぎないダークグレー */
  border: 1px solid #dddddd; /* 上品な薄いグレーの枠線 */
}

/* --- ホバーアクション（マウスがあるPC環境のみ） --- */
@media (hover: hover) {
  .page-number:not(.current):hover {
    color: var(--color-primary); /* 文字を緑に */
    border-color: var(--color-primary); /* 枠線も緑に */
    background-color: rgba(32, 181, 115, 0.05);
  }
}

/* =========================================
   3. 次へボタン（>）のモダン化（プロの魔法）
========================================= */
.page-next {
  background-color: #ffffff;
  border: 1px solid #dddddd; /* 数字と同じグレー枠で揃える */
  color: #555555;
  font-size: 0; 
}

/* ▼ 代わりに、CSSだけでスマートな矢印を描画する ▼ */
.page-next::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor; /* 上の線 */
  border-right: 2px solid currentColor; /* 右の線 */
  transform: rotate(45deg); /* 45度傾けて「右向き矢印」にする！ */
  margin-left: -2px; /* 矢印が視覚的にど真ん中に来るように微調整 */
}

/* --- 矢印のホバーアクション --- */
@media (hover: hover) {
  .page-next:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: rgba(32, 181, 115, 0.05);
    transform: translateX(4px); /* 矢印は「次へ」進む感覚を出すため、右にスッと動かす！ */
  }
}
/* =========================================
   お問い合わせページ (Contact)
   ========================================= */
.contact-form {
  background-color: #ffffff;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 淡い影 */
  margin-bottom: 4rem;
}

.contact-page-section {
  padding: 5rem 0 8rem;
  background-color: #fff;
}

/* 導入文 */
.contact-intro {
  text-align: center;
  margin-bottom: 8rem;
}

.contact-intro-title {
  font-size: clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
  font-weight: 700;
  color: var(--color-text-main); /* 緑色 */
  margin-bottom: 2rem;
  line-height: 1.3;
}

.contact-intro-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}

/* フォームの行 */
.form-row {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  border-bottom: 1px solid #eee;
  padding: 1.5rem 0;
}

.form-row.no-border {
  border-bottom: none;
}

/* 項目名（左側） */
.form-label {
font-weight: 700;
  color: #333333;
  width: 100%;
  position: relative;
  padding-left: 1.2rem;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.form-label::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  color: #016ab7; /* サイトのアクセントカラー（青） */
  font-size: 2rem;
}

/* 入力エリア（右側） */
.form-input {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* テキスト入力 */
.input-text,
.input-textarea {
  width: 100%;
  padding: 14px 16px; /* 指でタップしやすいゆったりとした余白 */
  font-size: 16px; /* スマホでズームされないための必須サイズ */
  background-color: #f9fbfb; /* 真っ白ではなく、ごく薄いグレーにして箱感を出す */
  border: 1px solid #cccccc; /* 下線ではなく全周を囲むグレー枠 */
  border-radius: 6px; /* 少し角を丸めて優しい印象に */
  color: #333333;
  transition: all 0.3s ease;
  box-sizing: border-box; /* paddingを含めた幅計算にする（はみ出し防止） */
}
/* --- 入力中（フォーカス時）は緑でハイライト！ --- */
.input-text:focus,
.input-textarea:focus {
  outline: none;
  border-color: var(--color-primary); /* メインの緑 */
  background-color: #ffffff; /* 背景を真っ白にして入力に集中させる */
  box-shadow: 0 0 0 3px rgba(32, 181, 115, 0.1); /* ふんわりとした緑の光彩 */
}

.input-textarea {
  min-height: 150px;
  resize: vertical; /* 縦方向のみリサイズ可能にする */
}

/* ラジオボタン */
.radio-label {
  display: block; /* デフォルトは縦並び */
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-weight: 500;
}
.radio-label input {
  margin-right: 0.5rem;
}

/* ラジオボタン周りの微調整（押しやすくする） */
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.radio-label input[type="radio"] {
  transform: scale(1.2); /* ラジオボタンを少し大きくして押しやすく */
  accent-color: var(--color-primary);
}

/* 送信ボタンエリア */
.form-submit-area {
  text-align: center;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* 同意チェック */
.privacy-check {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.privacy-check .check-text {
  border-bottom: 1px solid var(--color-blue); /* 下線を引く */
}

/* --- プライバシーポリシーエリア --- */
.privacy-policy-area {
  background-color: transparent; /* 緑背景を消す */
  padding: 40px 0;
}

/* .privacy-content の中にスクロール箱を作る */
.privacy-content {
  background-color: #f9fbfb; /* 薄いグレーの背景 */
  border: 1px solid #dddddd; /* 薄い枠線 */
  border-radius: 8px;
  padding: 24px;
  margin: 0 auto 32px;
  max-height: 300px; 
  overflow-y: auto; 
}

.privacy-policy-area.green-service-box {
  margin-top: 5rem;
  padding: 2rem 1rem;
}

.privacy-policy-area.green-service-box .container {
  background: #fff;
  border-radius: 1.875rem;
  padding: 2rem 1rem;
      position: relative;
    z-index: 10;
}

.privacy-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  display: block; /* 画像通りなら左寄せ */
}

.privacy-content {
  font-size: 1rem; /* 小さめ */
  line-height: 1.8;
  text-align: justify;
}

/* スクロール箱の中のテキスト調整 */
.privacy-content p {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 16px;
}
.privacy-content h4 {
  font-size: 15px;
  color: #333333;
  margin-top: 24px;
  margin-bottom: 8px;
  border-bottom: none; /* もし既存の下線があれば消す */
}

.privacy-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dotted #ccc;
}

.recaptcha-text {
  margin-top: 5rem;
  font-size: 0.75rem;
  color: #999;
  text-align: center;
}

.form-submit-area {
  text-align: center;
  margin-top: 40px;
}
.privacy-check {
  display: block;
  margin-bottom: 24px;
  font-weight: bold;
  cursor: pointer;
}
.privacy-check input[type="checkbox"] {
  transform: scale(1.3);
  margin-right: 8px;
  accent-color: var(--color-primary);
}

/* =========================================
   記事詳細ページ (Single)
   ========================================= */

/* 記事ヘッダー */
.single-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 1.5rem;
}

.single-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-top: 1rem;
}

/* アイキャッチ画像 */
.single-thumbnail {
  margin-bottom: 3rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.single-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- 記事本文 (WYSIWYGエディタ等を想定した汎用スタイル) --- */
.single-body {
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
}

.single-body p {
  margin-bottom: 2rem;
}

/* 大見出し (H2) - 左に緑の太線 + 下線 */
.single-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
  margin: 3.5rem 0 1.5rem;
  padding: 0.8rem 1rem;
  border-left: 5px solid var(--color-primary); /* 緑のアクセント線 */
  border-bottom: 1px solid #ddd; /* 薄い下線 */
  background-color: #fcfcfc;
}

/* 中見出し (H3) - 左に細い緑線 */
.single-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #333;
  margin: 2.5rem 0 1rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--color-primary);
}

/* 小見出し (H4) */
.single-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}

/* リスト (ul/li) - オリジナルのチェックマーク風 */
.single-body ul {
  margin-bottom: 2rem;
  padding-left: 0.5rem;
}

.single-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
}

.single-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent); /* オレンジのドット */
  border-radius: 50%;
}

/* 画像 */
.single-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 2rem;
}

/* 強調ボックス（インフォメーション） */
.info-box {
  background-color: #f9f9f9;
  border-top: 4px solid var(--color-primary); /* 上部に緑の太線 */
  padding: 2rem;
  margin: 3rem 0;
  border-radius: 0 0 4px 4px;
}
.info-box h4 {
  margin-top: 0; /* ボックス内は見出しの上の余白を消す */
  color: var(--color-primary);
}
.info-box p:last-child {
  margin-bottom: 0; /* ボックス内の最後の段落は下余白を消す */
}

/* --- 記事ナビゲーション（前後リンク） --- */
.single-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.single-nav a {
  font-size: 0.95rem;
  color: var(--color-primary);
  font-weight: 500;
  transition: opacity 0.3s;
}
.single-nav a:hover {
  opacity: 0.7;
}

.nav-list {
  background-color: #f5f5f5;
  color: #333 !important;
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  font-size: 0.85rem !important;
}
.nav-list:hover {
  background-color: #e0e0e0;
}

/* =========================================
   カテゴリー・アーカイブページ専用
   ========================================= */

/* 現在見ているカテゴリー名を示す大見出し */
.archive-main-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
}

/* カテゴリー名部分だけ色を変えて強調 */
.archive-main-title span {
  color: var(--color-primary);
}

/* =========================================
   追加コンテンツ：国内在留外国人 & 日本人介護職
   ========================================= */

/* --- 汎用パーツ --- */
.hr-lead {
  font-size: clamp(1.438rem, 1.063rem + 1.6vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.5;
  margin-bottom: 2rem;
}
.hr-desc {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 4rem;
}
.text-accent {
  color: var(--color-accent);
  font-weight: 700;
}

/* --- ① 国内在留外国人人材 --- */
.hr-domestic-foreign-section {
  padding: 6rem 0 8rem;
  background-color: #f9f9f9;
}
.hr-domestic-foreign-section h2.section-title {
  font-size: clamp(1.563rem, 1.32rem + 1.03vw, 2.25rem);
  margin-bottom: 1rem;
}
.domestic-merit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.d-merit-card {
  background: #fff;
  border-top: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.d-merit-card:hover {
  transform: translateY(-5px);
}
.d-merit-icon {
  width: 80px;
  height: 80px;
  background-color: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.d-merit-icon img {
  width: 40px;
  height: auto;
}
.d-merit-card h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-blue);
  margin-bottom: 1rem;
}
.d-merit-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
}

/* --- ② 日本人介護職 --- */
.hr-japanese-care-section {
  padding: 8rem 0;
  position: relative;
  background-image: url("images/japanese-care-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hr-japanese-care-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 181, 115, 0.85);
  z-index: 1;
}

.hr-japanese-care-section .container {
  position: relative;
  z-index: 2;
}

/* 全体コンテナ */
.japanese-care-wrapper {
  background-color: #fff;
  padding: 3rem 1rem;
  overflow: hidden;
}

/* --- 上段エリア --- */
.jc-main-flex {
  display: flex;
  flex-direction: column; /* スマホでは縦並び */
  gap: 2rem;
  margin-bottom: 3rem;
}

.jc-title {
font-size: clamp(1.25rem, 0.898rem + 1.5vw, 2.25rem);
  font-weight: bold;
  color: var(--color-text-main);
  border-bottom: 5px solid var(--color-blue);
  display: inline-block;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.jc-lead {
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(1.438rem, 1.063rem + 1.6vw, 2.5rem);
  color: var(--color-text-main);
  margin-bottom: 3rem;
  text-align: center;
}

.jc-desc {
  font-size: 1rem;
  line-height: 1.7;
}
/* --- 写真エリア（ここがエッジ・トゥ・エッジの肝！） --- */
.jc-text-area {
  width: 100%;
}
.jc-img-area {
  /* ▼ スマホ版：左右の余白（1rem）を打ち消して、画面端まで広げる ▼ */
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}
.jc-thumb {
aspect-ratio: 3/2;
  background: url("images/kaigoshi.jpg") center/cover;
  border-radius: 0;
  box-shadow: none;
}

.jc-ttl-wrap {
  text-align: center;
}

/* --- 下段：3つのポイント (ここが画像風デザイン) --- */
.jc-points {
  list-style: none;
  padding: 40px 10px 80px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 3rem;
  background-color: var(--color-bg-red);
  border-radius: 15px;
  align-content: center;
}

.jc-point-card {
  background: #fff;
  padding: 40px 10px 30px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 丸背景のチェックアイコン */
.jc-icon {
  width: 54px;
  height: 54px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jc-icon::after {
  content: "";
  width: 10px;
  height: 18px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  margin-top: -3px;
}

.jc-point-label {
  font-size: 1.2rem;
  color: var(--color-primary);
  font-weight: 900;
  font-family: "Arial Black", sans-serif;
  margin-bottom: 10px;
}

.jc-point-text {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
}
.jc-text-area,
.jc-img-are {
  width: 100%;
  flex: initial;
}

/* 黄色のマーカー線（アニメーション版） */
.highlight {
  /* 背景を左側に寄せて、最初は幅を0にする */
  background: linear-gradient(transparent 60%, #d4f0e0 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%; /* 最初はマーカーの幅が0% */
  transition: background-size 0.8s ease-out; /* 0.8秒かけて線を引く */

  /* テキストの折り返しで見切れないように調整 */
  display: inline;
}

/* 画面内に入ってクラスがついた時の状態 */
.highlight.is-visible {
  background-size: 100% 100%; /* マーカーの幅を100%にする */
}

/* FAQセクション全体 */
.faq-section {
  background-color: var(--color-bg-light); /* 背景は少しグレーで区切る */
  padding: 6rem 0;
}

.faq-list {
  margin: 0 auto;
}

.faq-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

/* 質問エリア */
.faq-question {
  padding: 1.2rem 1.5rem;
  padding-right: 1rem;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  transition: background-color 0.3s;
  background-color: #fcfcfc;
}

/* 回答エリア：初期状態は非表示（JSでコントロール） */
.faq-answer {
  background-color: #fff;
  border-top: 1px solid #eee;
}

.faq-a-inner {
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  line-height: 1.7;
  color: #555;
}

/* Q&Aのアイコン */
.faq-q-icon,
.faq-a-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-family: serif;
  font-weight: bold;
}

.faq-q-icon {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.faq-a-icon {
  background-color: var(--color-primary);
  color: #fff;
}
#faq .section-desc {
  text-align: center;
}

/* =========================================
   2. タブレット以上 (768px ~)
   ========================================= */
@media (min-width: 768px) {
  .pc-only {
    display: block; /* PCでは表示 */
  }
  .sp-only {
    display: none; /* PCでは隠す */
  }

  .br-span.pc-only {
    display: inline-block;
  }
  .br-span.sp-only {
    display: inline;
  }

  .fade-in-left.is-visible {
    opacity: 1 !important;
    transform: translateX(-16.5%) !important;
  }

  /* ★PC用フォントサイズ調整 (H2 = 32px相当) */
  .section-title,
  .fields-section .section-title,
  .flow-section .section-title,
  .faq-section .section-title {
    font-size: 2rem; /* 32px */
  }

  .header {
    position: fixed;
    width: 100%; /* 横幅も念のため指定 */
  }

  .site-logo .custom-logo {
    max-width: 200px;
  }

  .problem-card-title {
    font-size: 1.75rem; /* 28px */
  }

  .hero {
    height: 43.75rem; /* 700px */
  }
  .hero-title {
    font-size: 4rem;
  }
  .hero-sub {
    font-size: 1.5rem;
  }

  /* お悩み解決リスト横並び */
  .problem-list {
    flex-direction: row;
    gap: 0;
    align-items: flex-end;
  }
  .problem-subtext {
    font-size: 1.4rem; 
  }

  .problem-card {
    padding: 5rem 2.5rem; /* 80px 40px */
  }

  .problem-solution-banner {
    width: auto;
  }

  .problem-text {
    font-size: clamp(1.125rem, 0.982rem + 0.3vw, 1.25rem);
  }

  .support-heading {
    font-size: 2rem; /* 32px */
  }

  /* 文章ブロックを中央配置しつつ、中身のテキスト配置を調整 */
  .support-desc {
    display: block; /* ブロック要素にする */
    text-align: left;
  }

  /* 分野紹介グリッド6列化 */
  .fields-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.56rem; /* 25px */
  }

  /* 流れセクション横並び */
  .flow-steps {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
  .flow-note {
    text-align: right;
  }

  /* 矢印の追加 */
  .step-card {
    flex: 1;
  }
  .step-card:not(:last-child) {
    padding-right: 1.25rem; /* 20px */
  }
  .step-card::after {
    display: none;
  }
  /* 矢印（>）のデザイン */
  .step-card:not(:last-child) .step-icon-circle::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -50%;
    left: initial;
    top: 50%;
    bottom: initial;
    transform: translate(-50%,-50%);
    color: #ccc;
    font-size: 2.5rem;
  }

  /* お問い合わせ2列化 */
  .contact-section {
    grid-template-columns: 1fr 1fr;
  }

  .contact-title {
    font-size: clamp(1.688rem, 1.33rem + 0.74vw, 2rem);
  }
  .contact-left {
    padding: 5rem 2.5rem; /* 上下80px 左右40px */
  }


  /* --- フッター横並び --- */
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-left {
    /* クラス名はHTMLにないがレイアウト用の概念として */
    flex: 1;
    max-width: 37.5rem; /* 600px */
  }

  /* フッターロゴエリアを左側として扱う */
  .footer-logo-area {
    flex: 1;
    margin-right: 3rem;
  }

  /* 右側ナビゲーション */
  .footer-nav {
    text-align: right; /* もし右寄せにしたい場合 */
    align-items: flex-start;
  }

  .footer-nav a::before {
    left: -1.25rem; /* PCでの丸印位置調整 -20px */
  }

  .page-title {
    font-size: 2.5rem; /* PCでは40px程度に大きく */
  }

  .mission-title {
    font-size: clamp(2.813rem, 2.598rem + 0.45vw, 3rem);
    margin-bottom: 4rem;
  }

  .mission-text {
    font-size: 1.2rem;
  }

  /* 特定の改行タグ(pc-only)の制御が必要なら */
  .pc-only {
    display: inline;
  }
  .feature-row {
    flex-direction: row; /* 横並びにする */
    align-items: flex-start; /* 上揃え */
    justify-content: space-between;
    gap: 0; /* 重ねるためにgapは0 */
    margin-bottom: 8rem;
  }
  .feature-row.left-img {
    flex-direction: row;
  }

  .feature-img-wrapper,
  .feature-content {
    width: 50%; /* 画面の半分ずつ */
  }

  /* 帯のデザイン調整（PCのみ） */
  .feature-label {
    width: 120%; /* 枠より大きくして突き出させる */
    padding: 1.2rem 2.5rem;
    margin-top: 30px; /* 画像の上端より少し下げる */
    font-size: clamp(1.75rem, 1.464rem + 0.6vw, 2rem);
  }

  /* ▼▼▼ パターンA：画像が右にある時 (1, 3番目) ▼▼▼ */
  .feature-row.right-img .feature-content {
    padding-right: 3rem; /* テキストの右に余白 */
    z-index: 2; /* 手前に表示 */
  }
  .feature-row.right-img .feature-label {
    /* 右側（画像の方）へ突き出す */
    margin-right: 0;
  }

  /* ▼▼▼ パターンB：画像が左にある時 (2, 4番目) ▼▼▼ */
  .feature-row.left-img .feature-content {
    padding-left: 3rem; /* テキストの左に余白 */
    z-index: 2; /* 手前に表示 */
  }
  .feature-row.left-img .feature-label {
    /* 左側（画像の方）へ突き出す */
    margin-left: 0;
    width: 120%;
    /* 左に突き出すため、自身の位置も左へずらす */
    transform: translateX(-16.5%);
  }

  /* 導入セクション */
  .specified-intro-title {
    font-size: 2rem;
  }
  .specified-intro-text {
    text-align: center;
  }

  /* 比較表：ラベル表示 */
  .comparison-labels {
    display: flex;
  }
  .sp-label {
    display: none; /* PCでは各セルのラベル非表示 */
  }

  /* 制度概要：左右カラム */
  .about-grid {
    flex-direction: row;
    align-items: flex-start;
  }
  .about-text-area {
    flex: 1;
    padding-right: 2rem;
  }
  .about-features-box {
    flex: 1;
  }

  .about-features-section {
    padding: 6.25rem 0;
  }

  /* イラスト表示 */
  .worker-illustration {
    display: block;
    position: absolute;
    right: 0;
    top: -100px;
    width: 250px;
    z-index: 0;
  }

  /* 考え方：3列カード */
  .mindset-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .mindset-card {
    padding: 2rem 2rem 0;
  }

  /* 見出しの線幅調整 */
  .section-title-left::after {
    width: 100%; /* 全幅引いて、その上に文字があるデザインにする場合などは調整 */
    /* 今回のデザイン通り左端だけなら100pxのままでOK */
  }

  /* 理由セクション */
  .reason-content {
    flex-direction: row;
    align-items: center;
  }
  .reason-heading {
    font-size: clamp(1.25rem, 1.079rem + 0.36vw, 1.4rem);
  }
  .reason-text {
    flex: 1;
    padding-right: 3rem;
  }
  .reason-img {
    flex: 1;
  }

  /* 誤解解消セクション */
  .misunderstanding-title {
    font-size: 1.75rem;
  }

  .misunderstanding-grid {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 3rem;
  }

  .green-service-box {
    padding: 7rem 3rem 10rem;
  }

  .service-box-title {
    font-size: 2rem;
  }

  /* 2列グリッド */
  .service-card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 2rem;
  }

  /* カードの中身を横並びに */
  .service-item-card {
    flex-direction: row; /* 横並び */
    align-items: center;
    padding: 2rem;
  }

  .card-img-area {
    width: 120px; /* 画像の幅を固定 */
    flex-shrink: 0; /* 画像が縮まないように */
    margin: 0;
  }

  /* 理由セクション */
  .reason-title {
    font-size: 2rem;
  }
  .reason-grid {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 1.5rem;
  }

  /* 流れセクション */
  .flow-step-wrapper {
    flex-direction: row; /* 横並び */
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  /* アイコンエリアを大きく */
  .step-icon-circle {
    width: clamp(6.25rem, 2.689rem + 7.43vw, 9.375rem);
    height: clamp(6.25rem, 2.689rem + 7.43vw, 9.375rem);
  }
  .step-icon-area {
    width: 120px;
    height: 120px;
  }
  .step-icon {
    width: 60px;
  }
  .step-icon-circl::after {
    position: absolute;
  }

  /* ラッパーを横並びに */
  .company-wrapper {
    flex-direction: row;
    align-items: flex-start; /* 上揃え */
    gap: 4rem; /* 画像と表の間隔 */
  }

  /* 幅の比率調整 */
  .company-img-area {
    width: 45%; /* 画像を少し狭めに */
  }
  .company-data-area {
    width: 55%; /* テキストエリアを広めに */
  }

  /* リストの横並び設定 */
  .company-row {
    flex-direction: row; /* 横並びに戻す */
    align-items: flex-start; /* 上揃え */
  }

  .company-row dt {
    margin-bottom: 0; /* 下余白リセット */
    padding-right: 1rem;
  }

  .message-title {
    font-size: 2rem;
  }

  .message-title::before {
    width: 650px;
  }

  .message-slogan {
    font-size: 3rem; /* PCでは大きく */
    margin-bottom: 5rem;
  }

  .message-body {
    font-size: 1.13rem;
  }

  .message-signature {
    font-size: 1.75rem;
    margin-right: 5rem;
  }
  .message-img-worker {
    right: 0;
    top: 300px;
  }

  /* フォームの行を横並びに */
  .contact-form {
    padding: 4rem 5rem; /* PCでは内側の余白を大きく */
  }

  .form-row {
    flex-direction: row; /* 横並びにする！ */
    align-items: flex-start; /* 上揃えにする */
    gap: 3rem; /* ラベルと入力欄の隙間 */
  }

  .form-label {
    width: 25%; /* ラベルは左側25%を使用 */
    flex-shrink: 0; /* ラベルが縮まないようにする */
    margin-bottom: 0;
  }

  .form-input {
    width: 75%; /* 入力欄は右側75%を使用 */
  }

  .privacy-policy-area.green-service-box .container {
    background: #fff;
    border-radius: 10px;
    padding: 3rem 4rem;
  }

  .privacy-policy-area.green-service-box {
    margin-top: 10rem;
    padding: 7rem 3rem;
}
.privacy-title {
    font-size: 2rem;
}

  .domestic-merit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .japanese-care-wrapper {
    padding: 4rem 2rem;
    margin: 0 auto;
  }

  .jc-main-flex {
    flex-direction: row; /* 横並び */
    align-items: center;
    gap: 4rem;
  }

  .jc-text-area,
  .jc-img-area {
    flex: 1;
  }

  .jc-lead {
    margin-bottom: 5rem;
  }

  .jc-points {
    flex-direction: row; /* 横並び */
    justify-content: center;
    padding: 60px 20px 80px;
  }

  .jc-points li {
    flex: 1;
    max-width: 300px;
  }

  .japanese-care-wrapper {
    padding: 5rem 4rem 6rem; /* PC用のゆったりした余白 */
  }

  .jc-main-flex {
    flex-direction: row; /* テキストと写真を横並びに */
    align-items: stretch; /* 写真の高さをテキストに揃える */
    gap: 4rem;
  }

  .jc-text-area {
    flex: 1; /* 左半分 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .jc-img-area {
    flex: 1; /* 右半分 */
    
    /* ▼ PC版の魔法：右側の余白（4rem）を打ち消して、右端までピタッと広げる ▼ */
    margin-left: 0; /* スマホのマイナスをリセット */
    margin-right: -4rem; /* 親要素の右パディングを無視して枠いっぱいまで伸ばす */
    width: auto;
  }


  .faq-question {
    font-size: 1.1rem;
  }
}

/* =========================================
   3. PC・ナビゲーション切り替え (960px ~)
   ========================================= */
@media (min-width: 960px) {
  /* ハンバーガーボタン非表示 */
  .hamburger-btn {
    display: none;
  }

  /* ナビゲーションを横並びヘッダーメニューに変更 */
  .nav-menu {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(1.25rem, 2.08vw, 1.875rem);
    transform: none;
    transition: none;
    right: auto;
    visibility: visible;
    opacity: 1;
  }

  /* PCメニュー文字サイズ ★ご指定の18px程度 */
  .nav-menu .nav-link {
    font-size: clamp(0.875rem, 0.375rem + 0.8333vw, 1.125rem);
    font-weight: 500;
    margin-left: 0;
  }

  .nav-btn {
    font-size: 1rem;
    padding: 0.75rem 1.875rem; /* 12px 30px */
    margin-left: 0;
  }

  .misunderstanding-title {
    font-size: 1.75rem;
  }

  /* 2カラムレイアウト適用 */
  .news-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start; /* 上揃え */
    gap: 4rem;
  }

  /* 幅の指定 */
  .news-sidebar {
    width: 250px; /* サイドバーの幅固定 */
    flex-shrink: 0; /* 縮まないように */
  }

  .news-main {
    flex: 1; /* 残りの幅を全部使う */
  }

  /* PCでの記事リストレイアウト（横並び） */
  .news-item {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: baseline; /* テキストのベースラインで揃える */
    padding: 1.8rem 0;
  }

  .news-meta {
    margin-bottom: 0;
    margin-right: 2rem;
    flex-shrink: 0;
  }

  .news-date {
    margin-right: 1rem;
  }

  .news-title {
    font-size: 1rem;
  }

  /* 人材紹介事業 */
  .hr-human-cards {
    flex-direction: row;
  }
  .hr-human-card {
    flex-direction: row;
    align-items: flex-start;
  }
  .human-img {
    width: 120px;
    flex-shrink: 0;
  }
  .human-img img {
    width: 100px;
    height: 100px;
  }

  .hr-reason-boxes {
    flex-direction: row;
  }
  .hr-reason-box {
    flex: 1;
  }

  .gijinkoku-job-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .achieve-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .worries-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .worry-card {
    min-height: 150px;
  }

  .dispatch-strict-area {
    padding: 4rem 3rem;
  }
  .strict-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================
   4. 大型PC (1024px ~)
   ========================================= */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-width);
  }

  /* --- お問い合わせボタンを「右端の長方形タブ」に戻す --- */
  .side-tab {
    top: 20%;
    bottom: auto;
    right: 0;
    width: auto; /* 幅は文字に合わせる */
    height: 200px;
    border-radius: 1rem 0 0 1rem; /* 左側だけ角丸 */
    background: var(--color-accent);
    padding: 1rem 1em;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    box-shadow: -0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
    z-index: 999;
    writing-mode: vertical-rl;
  }
  /* PCではアイコンを消す（テキストのみにする場合） */
  .side-tab::before {
    display: none;
  }

  .service-item-card {
    padding: 2.5rem;
  }
  .card-img-area {
    width: 140px;
  }
}