@charset "UTF-8";
/* --- 基本設定 --- */
:root {
  --main-green: #4a6f56; /* 画像に近い緑色 */
  --text-color: #333;
  --bg-gray: #f9f9f9;
  --border-color: #ddd;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  color: var(--text-color);
  line-height: 1.8;
}

/* --- レイアウト共通 --- */
.top_container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- ヘッダー --- */
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 20px;
  background: #fff;
}

.header_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}

.tel {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.header-btn {
  background: #d24146; /* 赤いボタン */
  color: white;
  padding: 5px 15px;
  text-decoration: none;
  font-size: 14px;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 斜めにする */
  display: inline-block;
}

.header-btn span {
  display: block;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 文字だけ元に戻す */
}

/* --- ヘッダー右側全体 --- */
.header_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 垂直方向の中央揃え */
  gap: 20px; /* 電話エリアとボタンエリアの隙間 */
}

/* --- 右上の情報エリア --- */
.header_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並び */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; /* ★ここがポイント！右端に揃える */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 20px; /* ボタンとの間の余白 */
}

/* 上段：電話番号 */
.header_tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: Impact;
  font-size: 30px; /* ガツンと大きく */
  font-weight: 900; /* 一番太く！ */
  font-style: italic; /* 斜体 */
  color: #333;
  line-height: 1;
  letter-spacing: 0.05em; /* 数字の間を少し広げる */
  margin-bottom: 5px;
}

/* 電話アイコンの調整 */
.header_tel_icon img {
  margin-right: 5px; /* アイコンと番号の隙間 */
  vertical-align: center; /* 高さを合わせる */
}

/* 下段：テキストリンク（迫り出す部分） */
.header_links {
  font-size: 13px;
  font-weight: bold;
  color: #444;
  letter-spacing: 0.1em; /* 読みやすく少し広げる */
}

.header_links a {
  text-decoration: none;
  color: #444;
  margin: 0 8px; /* 文字の間の余白 */
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.header_links a:hover {
  color: var(--main-green); /* ホバー時に緑にする */
}

/* スラッシュ（/）の装飾 */
.slash {
  color: #333;
  font-weight: normal;
}

/* --- 連結ボタンのデザイン --- */
.header_btn_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並びにする */
}

.header_btn_group a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  color: white;
  height: 50px; /* ボタンの高さ */
  padding: 0 25px; /* 文字の左右の余白 */
  font-weight: bold;
  font-size: 15px;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 全体を斜めにする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* ボタンの中身（文字と画像）の傾きを戻す */
.header_btn_group a span {
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 傾きを戻す */
  /* ▼▼▼ ここが修正ポイント！ ▼▼▼ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* block ではなく flex にする（これをしないと center が効かない！） */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* ★これです！「縦のセンター」に揃える命令 */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* ついでに「横のセンター」にも揃える */
  width: 100%; /* 箱いっぱいに広げる */
  height: 100%;
}

.header_btn_group a img { /* ←ここを svg から img に変更！ */
  display: inline;
  margin-right: 6px;
}

/* 個別の色設定 */
.header_btn_recruit {
  background-color: #d24146; /* 画像に近い少し渋い赤 */
}

.header_btn_contact {
  background-color: var(--main-green); /* メインの緑 */
}

/* ホバー時の動き */
.header_btn_group a:hover {
  opacity: 0.9;
}

/* --- ヒーローエリア（メイン画像） --- */
.top {
  background-color: #555; /* 画像がない場合の背景色 */
  background-image: url("./img/cmn_header_image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  position: relative;
}

.top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 画像を少し暗くする */
}

.top_text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.top_text p {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

.top h1 {
  font-size: 36px;
  font-style: italic;
  margin: 0;
}

/* --- コンテンツエリア --- */
.content-section {
  padding: 60px 0;
}

/* セクションタイトル (/ タイトル /) */
.section_title {
  text-align: center;
  font-size: 32px;
  color: var(--main-green);
  font-weight: bold;
  margin-bottom: 40px;
  font-style: italic;
}

.section_title::before {
  content: "/ ";
  margin-right: 10px;
}

.section_title::after {
  content: " /";
  margin-left: 10px;
}

/* サブタイトル (/ タイトル) */
.sub_title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid transparent; /* 下線用スペース */
  margin-top: 40px;
  margin-bottom: 20px;
  font-style: italic;
}

.sub_title::before {
  content: "/ ";
  color: var(--main-green);
  font-weight: bold;
  margin-right: 5px;
  font-size: 1.2em;
}

/* テキスト */
p {
  margin-bottom: 20px;
  font-size: 14px;
}

/* テーブル */
.custom_table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
}

.custom_table th, .custom_table td {
  padding: 15px;
  border-bottom: 1px solid #999;
  font-size: 14px;
  text-align: left;
}

/* ▼ 魔法のコード：一番下の行だけ「線なし」にする */
.custom_table tr:last-child th,
.custom_table tr:last-child td {
  border-bottom: none;
}

.custom_table th {
  background-color: #f2f2f2; /* 左側の背景色（薄いグレー） */
  width: 30%;
  font-weight: bold;
}

/* 大きなリンクボタン */
.big_btn_area {
  text-align: center;
  margin: 50px 0;
}

.skew_btn {
  background-color: var(--main-green);
  color: white;
  padding: 15px 60px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 平行四辺形にする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.skew_btn span {
  display: block;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 文字の傾きを戻す */
}

.skew_btn:hover {
  opacity: 0.8;
}

.small_link {
  /* ▼ ここが魔法の整列セット！ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並びにする */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* ★重要：これで縦のド真ん中に揃う！ */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 横方向も真ん中に寄せる */
  gap: 5px; /* アイコンと文字の間の隙間 */
  margin-top: 15px;
  color: #3c6e50;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}

/* =========================================
   共通設定（変数の定義など）
   ========================================= */
:root {
  --main-green: #3c6e50; /* 画像に基づいた緑色 */
  --text-gray: #333;
  --bg-light-gray: #f2f2f2;
  --footer-border-color: #333; /* フッター下部の濃いグレー */
}

/* =========================================
   お問い合わせセクション (.contact_cta)
   ========================================= */
/* タイトルエリア */
.contact-header {
  margin-bottom: 40px;
}

.contact-label {
  font-size: 18px;
  color: #999; /* 薄いグレー */
  font-style: italic; /* 斜体 */
  font-weight: bold;
  margin-bottom: 5px;
}

.contact-main-title {
  font-size: 28px;
  color: var(--main-green); /* 緑色 */
  font-weight: bold;
  margin: 0;
}

/* コンテンツエリア（横並び・スマホ縦） */
.contact-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px; /* 左右の間隔 */
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* 左右のメソッドボックス */
.contact-method {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* 均等に分割 */
  width: 100%;
}

/* --- お問い合わせエリア --- */
.contact_cta {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #f2f2f2));
  background: linear-gradient(to bottom, #fff 50%, #f2f2f2 50%);
  padding: 60px 0;
  text-align: center;
}

.contact_box {
  background: white;
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  display: block; /* ただの箱 */
  text-align: center;
}

/* タイトル類 */
.contact_group {
  margin-bottom: 40px;
}

.contact_label {
  display: block;
  font-family: "Oswald";
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: #999;
  margin-bottom: 0px;
}

.contact_text {
  display: block;
  font-size: 24px;
  color: var(--main-green);
  font-weight: bold;
  margin: 0;
}

/* --- ▼▼▼ ここから下が整列のキモ！ ▼▼▼ --- */
/* 左右の箱を並べるエリア（Gridレイアウトに変更！） */
.contact_flex {
  display: grid; /* ★FlexをやめてGridにする！ */
  grid-template-columns: 1fr 1fr; /* ★これが最強の呪文。「1対1で強制的に2列」にする！ */
  gap: 30px; /* 左右の隙間 */
  width: 100%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start; /* 上端で揃える */
}

/* ↓ここはもう、Flexの設定は無視されるのでそのままで大丈夫ですが、
   念のため「幅100%」だけ残しておきます */
.contact_tel,
.contact_mail {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* ★灰色の帯（幅合わせの主役） */
.contact_tel_text,
.contact_mail_text {
  font-size: 17px;
  background-color: #e9ecef;
  padding: 12px 0;
  margin: 0 0 20px 0; /* 下に少し隙間 */
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block; /* ブロック要素にする */
  width: 100%; /* 親の幅に合わせる */
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* ズレ防止 */
}

/* スマホ対応 */
@media (max-width: 1000px) {
  .contact_flex {
    /* flex-direction: column; ←これはFlex用なので消す！ */
    grid-template-columns: 1fr; /* ★Grid用：「強制的に1列」にする！ */
    gap: 30px;
  }
}
/* コンテンツの中身エリア */
.tel_content,
.mail_content {
  width: 100%; /* これも幅いっぱい */
  text-align: center;
}

/* 電話番号 */
.phone_number {
  font-size: 50px;
  color: var(--main-green);
  font-family: Impact;
  font-style: italic;
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
}

.phone_number img {
  height: auto;
  margin-right: 1px;
  vertical-align: middle;
  position: relative;
  top: 1px; /* 位置微調整 */
}

.contact_tel small {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  font-size: 12px;
  color: #333;
}

/* ボタン */
.contact_btn {
  background-color: var(--main-green);
  color: white;
  padding: 15px 0;
  width: 100%; /* ★幅いっぱい！ */
  text-decoration: none;
  font-weight: bold;
  display: block; /* ★ブロック要素！ */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.contact_btn:hover {
  opacity: 0.8;
}

.contact_btn span {
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  width: 100%;
  height: 100%;
}

.contact_btn img {
  margin-right: 8px;
  vertical-align: middle;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact_flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
/* 灰色の帯のサブタイトル */
.method-title {
  background-color: #e9ecef;
  color: var(--text-gray);
  font-size: 16px;
  font-weight: bold;
  padding: 12px 0;
  margin-bottom: 20px;
}

.method-body {
  padding: 0 10px;
}

/* 電話番号スタイル */
.tel-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  font-size: 36px; /* 大きく強調 */
  font-weight: bold;
  font-style: italic; /* 斜体 */
  color: var(--main-green); /* 緑色 */
  line-height: 1;
  margin-bottom: 5px;
}

.reception-time {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-gray);
}

/* メールボタン（斜めデザイン） */
.skew-button.mail-btn {
  display: block;
  width: 100%;
  background-color: var(--main-green); /* 緑色背景 */
  color: #fff;
  text-decoration: none;
  padding: 15px 0;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 全体を斜めにする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.skew-button.mail-btn:hover {
  opacity: 0.85;
}

/* ボタンの中身（傾きを戻す） */
.btn-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 逆回転して水平に戻す */
  font-weight: bold;
  font-size: 16px;
}

.btn-inner img {
  width: 24px; /* アイコンサイズ調整 */
  height: auto;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1); /* アイコンを白くする（必要に応じて） */
}

/* =========================================
   フッターセクション (.site_footer)
   ========================================= */
.site_footer {
  background-color: var(--bg-light-gray); /* 薄いグレー背景 */
  padding: 50px 0 20px 0; /* 上下の余白 */
  color: var(--text-gray);
  font-family: sans-serif;
  /* 最下部の濃いグレーの帯 */
  border-bottom: 25px solid var(--footer-border-color);
}

.footer_container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 左右並び */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* 左側：会社情報 */
.footer_info {
  margin-bottom: 30px;
}

.footer_logo {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-gray);
}

.footer_logo strong {
  font-size: 32px; /* ロゴを大きく強調 */
  font-style: italic; /* 斜体 */
  font-weight: 900;
  margin-left: 8px;
}

.footer_address,
.footer-contact {
  font-size: 14px;
  font-weight: bold;
  line-height: 0.5;
}

/* 住所と電話番号のバランス調整 */
.footer_address {
  letter-spacing: 0.02em; /* わずかに広げる */
}

.footer_tel {
  font-size: 14px;
  font-weight: bold;
  line-height: 0.5;
  letter-spacing: -0.5px;
  /* ▼ ここを修正！上方向の隙間を消します */
  margin-top: 0; /* さっきまで 5px だったかも？ 0にすればくっつきます */
}

.footer-contact {
  margin-top: 5px;
  letter-spacing: 0;
}

.copyright {
  margin-top: 30px;
  color: #000;
  font-size: 12px;
}

/* 右側：メニューリンクのエリア */
.footer_links {
  display: grid;
  /* ▼▼▼ ここを修正！ ▼▼▼ */
  /* 1fr 1fr (均等に広げる) ではなく... */
  grid-template-columns: auto auto; /* ★「文字の幅に合わせて自動調整」にする！ */
  /* ▼▼▼ これも重要！ ▼▼▼ */
  /* width: 100%;  ← これがあると無駄に広がろうとするので消す！ */
  /* 隙間の調整（40pxが広すぎたら 30px とかに減らして！） */
  gap: 15px 90px;
  margin-top: 10px;
}

/* 各リンクのデザイン */
.footer_links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* アイコンと文字を横並び */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 上下中央揃え */
  text-decoration: none; /* 下線を消す */
  color: #3c6e50; /* 緑色 */
  font-weight: bold;
  font-size: 14px;
}

/* アイコン画像 */
.footer_links img {
  margin-right: 8px; /* 文字との隙間 */
  vertical-align: middle;
  width: 14px; /* アイコンの大きさ（画像に合わせて小さめに） */
  height: auto;
}

/* ホバー時の動き */
.footer_links a:hover {
  opacity: 0.7;
}

/* =========================================
   レスポンシブ対応（スマホ向け）
   ========================================= */
@media (max-width: 768px) {
  /* お問い合わせコンテンツを縦並びにする */
  .contact-contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
  /* フッターコンテンツを縦並びにする */
  .footer_container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* フッターリンクの余白調整 */
  .footer_links {
    width: 100%;
    margin-top: 30px;
  }
}
/* スマホ(1000px以下）の時のフッター設定 */
@media (max-width: 1000px) {
  /* フッター全体の箱 */
  .footer_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* ▼▼▼ これが魔法の1行！「縦並び（逆順）」にする命令 ▼▼▼ */
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    /* リンクとロゴの間の隙間をここで調整 */
    gap: 40px;
  }
  /* リンクエリア（上に来るやつ） */
  .footer_links {
    width: 100%;
    margin-top: 0; /* 元々あった余白をリセット */
    margin-bottom: 0;
  }
  /* ロゴ・住所エリア（下に来るやつ） */
  .footer_info {
    width: 100%;
    margin-bottom: 20px; /* 下に少し余白 */
    /* 必要なら中央揃えに */
    /* text-align: center; */
  }
}
/* 2. ロゴ画像のサイズ調整 */
.footer_logo img {
  width: 100%; /* 親枠に合わせて伸縮 */
  max-width: 400px; /* でもデカすぎないように制限 */
  height: auto;
  margin-bottom: 15px; /* 住所との隙間 */
}

/* 3. 住所と電話番号を「大きく・読みやすく」 */
.footer_address,
.footer_tel {
  font-size: 15px; /* 文字サイズUP！（元は14px） */
  font-weight: bold; /* 太字でくっきり */
  line-height: 1.8; /* 行間を広げて窮屈さをなくす（元は0.5でした！） */
  margin: 5px 0; /* 上下の程よい余白 */
  letter-spacing: 0.05em; /* 文字の間を少し広げて上品に */
}

/* 5. コピーライト（一番下の©） */
.copyright {
  margin-top: 25px;
  font-size: 12px;
}

/* 1000px以下のときは、ヘッダーの右側（電話・ボタン）を消す */
@media (max-width: 1000px) {
  .header_right {
    display: none;
  }
}
/* スマホの時だけ、文字を大きく・間隔を広くする */
@media (max-width: 1000px) {
  /* 1. 「メールでのお問い合わせ」の文字 */
  .contact_tel_text, .contact_mail_text {
    font-size: 18px; /* 今より少し大きく（調整してね） */
    color: #333;
    letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
  }
}
@media (max-width: 1000px) {
  .tel_time {
    color: #333;
    font-size: 19px; /* ★ここでお好きな大きさに！ */
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    margin-top: 8px; /* 隙間も少し広げる */
  }
}
/* =========================================
   ページトップボタン
   ========================================= */
#page_top_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 中身を整列 */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並び */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 真ん中に */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed; /* ★重要：画面に固定して「ずっとついてくる」！ */
  bottom: 0; /* 一番下 */
  right: 0; /* 一番右 */
  z-index: 9000; /* 他の要素より手前に（モーダルよりは奥に） */
  width: 55px; /* ボタンの幅 */
  height: 120px; /* ボタンの高さ */
  background-color: #3c6e50; /* テーマカラーの緑 */
  color: white;
  text-decoration: none;
  /* ▼ おしゃれポイント：左上を斜めにカットする魔法！ */
  /* 左辺の20%の高さからスタートして、右上の角へ線を引く形 */
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  padding-top: 10px; /* 斜めになった分、中身を少し下にずらす */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#page_top_btn:hover {
  opacity: 0.8;
}

/* --- 丸い背景（もし画像のように白丸が必要なら） --- */
/*
.top_arrow {
    display: flex; justify-content: center; align-items: center;
    width: 24px; height: 24px;
    background: white; border-radius: 50%;
    margin-bottom: 5px;
}
.top_arrow::after {
    content: ''; display: block;
    width: 6px; height: 6px;
    border-top: 2px solid #3c6e50;
    border-right: 2px solid #3c6e50;
    transform: rotate(-45deg);
    margin-top: 2px;
}
*/
/* --- テキストのデザイン --- */
.top_text {
  font-family: "Oswald", sans-serif; /* カッコいいフォント */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.05em;
  font-style: italic; /* 斜体にする */
}

/* --- テキストのデザイン（縦向きに変更！） --- */
.page_top_text {
  font-family: "Oswald Medium", sans-serif;
  font-size: 13px; /* 少し大きめに調整 */
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: white;
  /* ▼▼▼ ここが回転の魔法！ ▼▼▼ */
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg); /* 反時計回りに90度回す */
  white-space: nowrap; /* 勝手に折り返さないようにする */
  /* 位置の微調整（回転するとズレて見えるので） */
  margin-top: 25px; /* 矢印との距離 */
  margin-bottom: 10px; /* 下の余白 */
}

/* =========================================
   スマホ用ヘッダーのデザイン（ここから追加！）
   ========================================= */
/* 1. 基本設定（PCでは隠す） */
@media (min-width: 1001px) {
  .sp_header_items {
    display: none;
  }
}
@media (max-width: 1000px) {
  /* ロゴが入っている箱の設定 */
  .header_logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* 中身を整列させるモード */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* ★重要：これで上下のど真ん中に来ます！ */
    height: 100%; /* ヘッダーの高さいっぱいに広げる */
    padding-left: 15px; /* 左端に少し隙間をあける */
  }
  /* ロゴ画像自体のサイズ制限（デカすぎ防止） */
  .header_logo img {
    height: auto;
    max-height: 30px; /* 高さを40pxくらいに制限（お好みで調整） */
    width: auto;
  }
}
/* 2. スマホ表示（1000px以下）の時だけ有効にする */
@media (max-width: 1000px) {
  /* --- ヘッダー全体の調整 --- */
  header {
    /* ヘッダーの高さ（ボタンの高さに合わせる） */
    height: 70px;
    padding: 0; /* 余白をなくして端までボタンを表示 */
    /* ロゴを左端に寄せる */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch; /* 高さを揃える */
    background: #fff;
    border-bottom: none; /* 画像のような下の線 */
  }
  /* ロゴエリア（既存のクラス名に合わせて調整してください） */
  .logo, header > h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 15px; /* 左側の余白 */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; /* 残りのスペースを埋める */
  }
  /* ロゴ画像のサイズ調整（必要に応じて） */
  .logo img, header > h1 img {
    height: 40px; /* 高さを指定してバランス調整 */
    width: auto;
  }
  /* --- スマホ用アイテムの表示コンテナ --- */
  .sp_header_items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* 横並びにする */
    height: 100%; /* ヘッダーの高さと揃える */
  }
  /* --- ボタン共通設定 --- */
  .header_btn_sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* アイコンと文字を縦並び */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 80px; /* ボタンの幅（お好みで調整） */
    height: 100%; /* 高さいっぱい */
    text-decoration: none;
    color: white;
    cursor: pointer;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .header_btn_sp:hover {
    opacity: 0.9;
  }
  /* --- 電話ボタン（赤） --- */
  .btn_tel {
    background-color: #c54e4e; /* 画像に近い赤色 */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線（任意） */
  }
  .btn_tel img {
    width: 16px; /* アイコンサイズ */
    height: auto;
    /* もし白いアイコン画像がない場合は、以下で黒いアイコンを白くできます */
    /* filter: brightness(0) invert(1); */
  }
  /* --- メニューボタン（緑） --- */
  .btn_menu {
    background-color: #3c6e50; /* メインの緑色 */
  }
  /* ハンバーガーの3本線をつくる */
  .hamburger_lines {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 40px; /* 線の幅 */
    height: 20px; /* 全体の高さ */
    margin-bottom: 8px; /* MENU文字との隙間 */
  }
  .hamburger_lines span {
    display: block;
    width: 100%;
    height: 1px; /* 線の太さ */
    background-color: white;
    border-radius: 2px;
  }
  /* MENUテキスト */
  .menu_text {
    font-size: 13px;
    font-weight: bold;
    font-family: "Oswald Medium";
    line-height: 1;
    font-style: italic; /* 斜体にする */
    letter-spacing: 0.05em;
  }
}
/* =============================================
   ▼ モーダルメニューシステム（合体用・加工済み）
   ============================================= */
/* 1. スイッチ（チェックボックス）は隠す */
#header_modalmenu_check {
  display: none;
}

/* 2. 背景の黒いカバー */
#header_modalmenu_close_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 79999; /* メニューより下、他より上 */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* スイッチが入ったら黒背景を出す */
#header_modalmenu_check:checked ~ #header_modalmenu_close_bg {
  opacity: 1;
  pointer-events: auto;
}

/* 3. メニューが出てくるエリア（本体） */
#header_modalmenu_area {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 80000; /* 一番手前 */
  color: #ffffff;
  background-color: #3c6e50; /* メニューの背景色 */
}

/* スイッチが入ったらメニューを出す */
#header_modalmenu_check:checked ~ #header_modalmenu_area {
  opacity: 1;
  pointer-events: auto;
}

/* 4. メニューの中身のアニメーション */
.header_modalmenu_areainner {
  padding: 5rem 3rem 4.6rem;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area .header_modalmenu_areainner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* --- ここから下はメニュー内のデザイン（そのまま） --- */
.header_modalmenu_nav01 {
  display: block !important;
  margin-top: 80px;
  padding: 0; /* ★ここを0にするのがポイント！これで端まで届きます */
}

@media screen and (max-width: 640px) {
  .header_modalmenu_nav01 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 0.4rem;
  }
}
/* 3. リンク（文字）のデザイン */
.header_modalmenu_nav01 a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  /* 線は端まで引く設定 */
  border-bottom: 1px solid #ffffff;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* レイアウト崩れ防止 */
  /* ★文字が画面の端にくっつかないように、ここで内側に隙間を作る */
  padding: 30px 70px; /* 上下20px、左右20px */
  font-weight: normal; /* 文字を細く */
  font-size: 25px;
  letter-spacing: 0.05em;
}

/* 4. 一番上の項目だけに「上の線」を追加 */
.header_modalmenu_nav01 a:first-child {
  border-top: 1px solid #ffffff;
}

/* 5. ホバーした時に少し色を変える（おまけ） */
.header_modalmenu_nav01 a:hover {
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.1); /* うっすら白く光る */
}

.header_modalmenu_nav01 > div {
  width: 100%;
  display: block;
}

.header_modalmenu_nav01 > div > a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

.header_modalmenu_nav01 > div > div > a {
  display: block;
  color: #ffffff;
  font-size: 78%;
  padding: 0.4em 0 0.4em 1.2em;
  text-decoration: none;
  /* アイコン画像がないと崩れるので一旦コメントアウトか、パスを確認 */
  /* background-image: url(../img/cmn_icon_rightarrowsingleline.svg); */
}

.header_modalmenu_org {
  padding-top: 7rem;
  border-top: 1px solid #ffffff;
  margin-top: 5rem;
  text-align: center;
}

.header_modalmenu_org > a {
  display: block;
  color: white;
  width: 90%;
  margin: auto;
}

/* =============================================
   ▼ モーダルメニューの「閉じるボタン」デザイン
   ============================================= */
/* 1. ボタン全体の箱（緑の四角） */
.header_modalclose_btn {
  position: absolute;
  top: 0; /* 右上にピタッと配置 */
  right: 0;
  width: 70px; /* ボタンの幅（ヘッダーの高さと合わせると綺麗） */
  height: 70px; /* ボタンの高さ */
  background-color: #3c6e50; /* メインの緑色 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並びにする */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 上下の真ん中 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 左右の真ん中 */
  cursor: pointer;
  z-index: 10; /* 他の要素より手前に */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.header_modalclose_btn:hover {
  opacity: 0.8;
}

/* 2. 「×」マークをCSSで描く */
.header_modalmenu_closeicon {
  position: relative;
  width: 24px; /* ×のサイズ */
  height: 24px;
  margin-bottom: 5px; /* 文字との隙間 */
}

/* 2本の線を擬似要素で作る */
.header_modalmenu_closeicon::before,
.header_modalmenu_closeicon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%; /* 中心を基準に */
  width: 30px; /* 線の長さ */
  height: 2px; /* 線の太さ */
  background-color: white;
  border-radius: 2px;
}

/* 片方を45度、もう片方を-45度回転させてクロスさせる */
.header_modalmenu_closeicon::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.header_modalmenu_closeicon::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* 3. 「CLOSE」テキストのデザイン */
.header_modalmenu_closetext {
  color: white;
  font-family: "Oswald", sans-serif; /* ★Oswaldフォントを指定！ */
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  /* ↓これで「MENU」と同じ角度に斜めにする！ */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

/* =============================================
   ▼▼▼ 復旧用：モーダルメニューの必須設定 ▼▼▼
   ============================================= */
/* 1. スイッチ（チェックボックス）を隠す */
#header_modalmenu_check {
  display: none !important;
}

/* 2. 背景の黒いカバー */
#header_modalmenu_close_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 79999;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* スイッチが入ったら黒背景を出す */
#header_modalmenu_check:checked ~ #header_modalmenu_close_bg {
  opacity: 1;
  pointer-events: auto;
}

/* 3. メニューが出てくるエリア（本体） */
#header_modalmenu_area {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* ▼ここが重要！普段は隠しておく命令▼ */
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 80000;
  color: #ffffff;
  background-color: #3c6e50; /* 緑色の背景 */
}

/* スイッチが入ったらメニューを出す */
#header_modalmenu_check:checked ~ #header_modalmenu_area {
  opacity: 1;
  pointer-events: auto;
}

/* 4. メニューの中身のアニメーション */
.header_modalmenu_areainner {
  padding: 5rem 0rem 4.6rem;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area .header_modalmenu_areainner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* index */
/* --- 1. ヒーロースライダー --- */
.hero-slider {
  position: relative;
  width: 100%;
  height: 80vh; /* 画面の高さの80% */
  min-height: 500px;
  overflow: hidden;
  z-index: 30;
}

.swiper, .swiper-wrapper, .swiper-slide {
  width: 100%;
  height: 100%;
}

.slide-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* ズームアウトするアニメーション */
  -webkit-animation: zoomUp 10s linear infinite;
          animation: zoomUp 10s linear infinite;
}

@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.hero-slider,
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  height: auto !important; /* 80vhとかの固定をやめる */
  min-height: 0 !important; /* 最低の高さ制限も解除 */
  padding-bottom: 0 !important;
}

/* 2. 画像自体の高さも「なりゆき」にする */
.slide-img-box,
.slide-img {
  height: auto !important; /* 枠に合わせるのではなく、画像本来の比率で表示 */
  width: 100%; /* 横幅はいっぱいに */
  display: block; /* 隙間対策 */
}

/* 3. ページネーションを「画像の底」に張り付ける */
.hero-slider .swiper-pagination {
  position: absolute !important;
  inset: auto !important; /* 余計な位置指定をリセット */
  /* ▼ 調整ポイント：ここで位置を決めます！ ▼ */
  bottom: 20px !important; /* 画像の下端から20px上に配置 */
  /* もし画像の外（下）に出したいなら、ここを「-30px」とかにしてください */
  right: 20px !important; /* 右端から20px */
  width: auto !important;
  z-index: 100 !important;
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 1000px) {
  .slide-img {
    width: 100%;
    height: 100%;
    /* ▼▼▼ ここを書き換え！ ▼▼▼ */
    /* background-size: cover; ← これはimgタグには効きません！消してOK */
    -o-object-fit: cover;
       object-fit: cover; /* ★枠いっぱいに広げて、はみ出た分は自動カット */
    -o-object-position: center;
       object-position: center; /* ★画像の真ん中を中心に表示 */
    /* アニメーション（そのまま） */
    -webkit-animation: zoomUp 10s linear infinite;
            animation: zoomUp 10s linear infinite;
  }
  /* 念のため、画像を包む箱も高さいっぱいに */
  .slide-img-box {
    height: 100%;
    width: 100%;
  }
}
@media (max-width: 1000px) {
  /* 画像自体の高さを制限する */
  .slide-img {
    /* ▼ ここで「最大の高さ」を決めます！ */
    max-height: 500px !important; /* 500px〜600pxくらいがオススメ */
    /* 指定した高さからはみ出た分は、綺麗にトリミングする */
    -o-object-fit: cover !important;
       object-fit: cover !important;
    width: 100% !important;
  }
}
/* =========================================
   ▼ スライダー画像のチラつき防止
   ========================================= */
/* 1. 画像を包んでいる箱をガチガチに固める */
.slide-img-box {
  overflow: hidden; /* はみ出し絶対禁止 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* ブラウザに「本気で描画しろ」と命令（ハードウェアアクセラレーション） */
  background-color: #fff; /* 万が一隙間ができても白で埋める */
}

/* 2. 画像自体の微調整 */
.slide-img {
  vertical-align: bottom; /* 「文字用の隙間」を強制削除 */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* アニメーションの裏写り防止 */
  will-change: transform; /* 「これから動くよ！」と宣言して準備運動させる */
  /* ※これまでの width, height, object-fit などの設定はそのまま維持されます */
}

/* =========================================
   ▼ ヒーローテキスト（合体版）
   ========================================= */
/* 1. 全体の位置（送ってくれたコードをベースに調整） */
.hero-text {
  position: absolute;
  top: 40%;
  left: 10%; /* ※PCレイアウト用CSS(media query)がある場合、そっちが優先されるのでそのままでOK！ */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 30;
  text-align: left; /* 左揃えを明示 */
  /* text-shadow: 0 0 10px ...; ← 緑背景の中の文字がボヤけるので一旦消します！ */
}

/* 2. 日本語キャッチコピー（緑の斜め帯）*/
.hero-sub-text {
  /* ▼▼▼ ここを修正（縦並び用） ▼▼▼ */
  display: block; /* 横並び禁止！ */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 文字の長さにフィットさせる */
  background-color: #3c6e50;
  color: white;
  padding: 10px 40px;
  margin-bottom: 12px;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

/* 2行目を少し右にずらす（デザイン再現） */
.hero-sub-text.line-2 {
  margin-left: 40px;
}

/* 傾いた文字を元に戻す設定 */
.hero-sub-text span {
  display: block;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 逆回転して文字を真っ直ぐに */
  font-size: 36px; /* 文字サイズ */
  font-weight: bold;
  font-style: italic; /* 斜体 */
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* 3. 英語部分（送ってくれたコードを維持） */
.hero-eng {
  font-family: "Oswald Medium", sans-serif;
  font-style: italic;
  font-size: 18px;
  color: #666; /* 画像に乗せて見にくい場合は white に変えてね！ */
  margin-top: 15px;
  text-shadow: 1px 1px 0px #fff; /* ちょっと読みやすく白縁取り */
  padding-top: 10px;
}

/* 1. 共通設定（ブロックにして縦に並べる） */
.hero-eng span {
  display: block; /* 1行ずつ改行させる */
  line-height: 2; /* 行間を少し広げて読みやすく */
}

.eng-line-1 {
  color: #999;
  font-family: "Oswald";
  font-weight: 500;
}

/* 2. 2行目だけ右にずらす！ */
.eng-line-2 {
  color: #999;
  font-family: "Oswald";
  font-weight: 500;
  margin-left: 40px; /* ★この数字で「ズレ幅」を調整！ */
}

/* --- スマホ対応（文字サイズ調整） --- */
@media (max-width: 1000px) {
  .hero-text-box {
    margin-top: 600px;
  }
  .hero-sub-text span {
    font-size: 20px;
  }
  .hero-sub-text {
    padding: 8px 20px;
    margin-bottom: 8px;
  }
  .hero-sub-text.line-2 {
    margin-left: 0;
  } /* スマホはずらさない */
}
@media (max-width: 1000px) {
  .hero-text-box {
    white-space: nowrap;
    position: absolute;
    top: 100%; /* 画像の下端 */
    margin-top: 150px; /* 画像との隙間 */
    /* ▼▼▼ 箱自体を画面の中央に配置する魔法 ▼▼▼ */
    left: 50%;
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
    /* 箱の幅を「中身の文字幅」にキュッと合わせる */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 300px; /* 小さくなりすぎ防止 */
    /* 中身は中央揃えせず、左揃え（デフォルト）にする */
    text-align: left;
    z-index: 50;
  }
}
@media (max-width: 1000px) {
  /* 1. スライダー（写真の箱）のフタを開ける！ */
  .hero-slider {
    /* ★ここが一番重要！はみ出しを許可する */
    overflow: visible !important;
    height: 60vh; /* 写真エリアの高さ */
    width: 100%;
    margin-left: 0;
  }
}
/* =========================================
   ▼ PC版：地図をスライダーにめり込ませる設定
   ========================================= */
@media (min-width: 1001px) {
  /* 1. 特徴セクション自体の余白を調整 */
  .section-features {
    padding-top: 0; /* 上の余白をなくしてスライダーに近づける */
    position: relative;
    z-index: 5; /* スライダーより手前に来るように順序指定 */
  }
  /* 2. 地図画像を上に引っ張り上げる！ */
  .features-img {
    /* ★これが魔法の数字！マイナスにすると上にズレます */
    margin-top: -150px;
    /* もし地図がスライダーの下に潜り込んじゃう場合はこれが必要 */
    position: relative;
    z-index: 10;
    /* 念のため、クリックの邪魔にならないように */
    pointer-events: none;
  }
  /* ※地図の大きさ調整（必要なら） */
  .features-img img {
    width: 100%;
    max-width: 800px; /* 巨大になりすぎないように制限 */
    height: auto;
    pointer-events: none;
  }
}
/* --- 2. 特徴セクション --- */
/* =========================================
   ▼ 特徴セクション（ベースのスタイル）
   ※ 今持っているコードはここに残します！
   ========================================= */
.section-features {
  padding: 80px 0;
  background-color: white;
  position: relative;
  /* z-indexの設定はPC版で上書きするので、ここはなくてOK */
}

.features-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* =========================================
   ▼ スライダーのページネーション（棒状のナビ）設定
   ========================================= */
.hero-slider .swiper {
  position: relative !important;
  width: 100%;
  height: 100%;
  /* はみ出し許可（スマホで下にずらす時用） */
  overflow: visible !important;
}

/* 1. 全体の位置（右下に配置） */
.hero-slider .swiper-pagination {
  position: absolute;
  bottom: -20px !important; /* 下からの距離 */
  right: 20px !important; /* 右からの距離（ここを0にすれば端っこ） */
  left: auto !important; /* デフォルトの「左基準」を打ち消す */
  top: auto;
  width: auto !important; /* 幅を自動にして右寄せを効かせる */
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 100 !important;
}

/* 2. バーの形（共通設定：薄い緑） */
.hero-slider .swiper-pagination-bullet {
  width: 50px; /* 横幅（ここを増やせばもっと長くなる） */
  height: 6px; /* 太さ */
  background-color: #cde6db; /* 非アクティブ時の薄い緑色 */
  opacity: 1; /* 透明度をなくす */
  border-radius: 0; /* 角丸をなくして四角にする */
  margin: 0 6px !important; /* バー同士の隙間 */
  display: inline-block;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/* 3. アクティブなバー（現在表示中のスライド：濃い緑） */
.hero-slider .swiper-pagination-bullet-active {
  background-color: #3c6e50; /* テーマカラーの濃い緑 */
}

/* --- スマホ対応（少し小さくする） --- */
@media (max-width: 1000px) {
  .hero-slider .swiper-pagination-bullet {
    width: 30px;
    height: 6px;
  }
}
/* =========================================
   ▼ PC版（1001px以上）専用：地図めり込みカスタマイズ
   ※ さっきのコードをここに追加します！
   ========================================= */
@media (min-width: 1001px) {
  /* 1. スライダーとの距離を詰める */
  .section-features {
    padding-top: 0; /* 上の余白を消してスライダーに近づける */
    z-index: 10; /* スライダーより手前に表示する */
  }
  /* 2. 地図を上にズラして重ねる */
  .features-img {
    margin-top: -150px; /* ★ここがめり込み具合！数字をいじって調整してね */
    position: relative; /* 重なり順を有効にするため */
    z-index: 20; /* 確実に一番手前に持ってくる */
    width: 50%; /* 左半分 */
    position: relative; /* 基準点 */
  }
  /* 3. 地図画像がデカくなりすぎないように制限（お好みで！） */
  .features-img img {
    /* ▼▼▼ ここを書き換え！ ▼▼▼ */
    /* 1. 無理やり拡大をやめる */
    /* transform: scale(2); */ /* ← これを消す（またはコメントアウト） */
    /* 2. 親の幅に対して「常に1.6倍」の大きさで表示する */
    width: 230%; /* 画面が広がれば、この画像も一緒に広がります！ */
    max-width: none; /* 上限なし */
    height: auto; /* 縦横比を維持 */
    /* 3. 位置の調整（大きくした分、左に引っ張って真ん中に合わせる） */
    margin-left: -50%; /* widthが160%なら、ハミ出た60%の半分の30%を戻すと真ん中に来ます */
    /* 4. 上へのめり込み維持 */
    margin-top: -350px;
  }
  /* 4. 【★ここが修正ポイント】文章エリアの位置調整 */
  .features-text {
    width: 45%; /* 右半分（少し小さめ） */
    /* ▼▼▼ この数字で「右すぎ！」を直せます！ ▼▼▼ */
    padding-left: 0; /* もし右に寄りすぎなら「0」 */
    margin-left: -50px; /* ★マイナスにすると、地図の方（左）に寄ってきます！ */
    /* ※地図が文字の下に潜り込むように */
    position: relative;
    z-index: 30; /* 地図(20)より強くする */
  }
}
.eng-title {
  font-family: "Oswald";
  font-size: 22px;
  color: #999999;
  font-weight: 500;
  display: block;
  font-style: italic;
}

.jp-title {
  font-size: 35px !important; /* 「から」「の」などのサイズ（小さくする） */
  font-family: "Noto Sans JP";
  font-weight: bold;
  color: #333; /* 黒文字 */
  line-height: 1.5; /* 行間 */
  font-style: italic;
  margin-top: 0;
}

/* 2. 「奥伊勢」「三重」をデカく、緑にする！ */
.jp-title .text-big_green {
  font-size: 40px; /* ガツンと大きく！ */
  color: #3c6e50; /* 緑色 */
  margin: 0 5px; /* 前後に少し隙間をあける */
  position: relative;
  top: 2px; /* 大きい文字は上に浮きがちなので、少し下げる微調整 */
}

.jp-title .text-big {
  font-size: 40px; /* ガツンと大きく！ */
  position: relative;
  top: 2px; /* 大きい文字は上に浮きがちなので、少し下げる微調整 */
}

/* 3. 「食」もデカくする！（赤色はすでにあるのでサイズだけ） */
.jp-title .text-red {
  font-size: 40px; /* 緑の文字と同じ大きさに合わせる */
  color: #d24146;
  font-weight: 900; /* さらに太く！ */
}

.features_details {
  font-family: "Noto Sans JP";
  font-weight: bold;
  padding-bottom: 10px;
}

.link-arrow {
  color: #3c6e50;
  font-weight: bold;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.link-arrow img {
  margin-right: 6px;
}

/* =========================================
   ▼ スマホ版（1000px以下）の微調整
   ========================================= */
@media (max-width: 1000px) {
  /* 1. セクション全体の箱 */
  .section-features {
    position: relative;
    padding-top: 50px; /* スライダーとの距離を少しあける */
    padding-bottom: 50px;
    overflow: hidden; /* 横はみ出し防止 */
  }
  .features-container {
    display: block; /* 縦並びのブロック要素にする */
    position: relative;
  }
  /* 2. 地図画像（背景っぽく配置） */
  /* 2. 地図画像（背景っぽく配置） */
  .features-img {
    width: 180%; /* 画面より少し広くして端を隠す */
    max-width: 800px;
    margin-left: -20%; /* 左右均等にはみ出させる */
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); /* 自身の幅の半分だけ左に戻す（最強のセンター寄せ） */
    margin-top: 0; /* PC版のめり込みをリセット */
    position: relative;
    z-index: 1; /* 文字より奥に */
  }
  .features-img img {
    width: 100%;
    height: auto;
    /* PC版の巨大化設定をリセット */
    -webkit-transform: none;
            transform: none;
    max-width: none;
    margin: 0;
  }
  /* 3. テキストエリア（地図の上に重ねる） */
  .features-text {
    position: relative;
    z-index: 2;
    width: 100%;
    /* 1. 画像と同じ「最大幅」にする（一心同体！） */
    max-width: 650px;
    /* 2. 箱自体をど真ん中に置く */
    margin-left: auto;
    margin-right: auto;
    /* 3. 重なり位置（上に引き上げる量） */
    /* スマホのときは「画面の55%」、でも「-350px」以上は引き上げない！という命令 */
    /* max(A, B) は「AとBのうち、大きい方（0に近い方）を使う」という意味です */
    margin-top: max(-75vw, -350px);
    /* ▼▼▼ ここが崩れを直す魔法！ ▼▼▼ */
    /* 「基本は55%だけど、360px以上は広げないで！」という命令 */
    /* min(A, B) は「AとBのうち、小さい方を使う」という意味です */
    padding-left: min(55%, 360px);
    padding-right: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: left;
  }
  /* 4. タイトルなどの微調整 */
  .eng-title {
    display: block;
    color: #999;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-style: italic;
    /* "Features"の位置調整 */
  }
  .jp-title {
    font-size: 30px !important; /* スマホ用に少し小さく */
    line-height: 1.4;
  }
  .jp-title span {
    /* 文字サイズのバランス調整 */
    font-size: 40px !important;
  }
  .features_details {
    font-size: 13px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.6); /* 読みづらければ薄い白背景を足す */
    padding: 10px;
    border-radius: 5px;
  }
}
/* =========================================
   ▼ PC表示（1001px以上）の時のスライダー調整
   ========================================= */
@media (min-width: 1001px) {
  /* 1. スライダー本体の幅を3/4にして右寄せ */
  .hero-slider {
    width: 75%; /* ★幅を画面の75%（3/4）にします */
    margin-left: auto; /* ★これで自動的に右寄せになります */
    /* height: 80vh; の高さ設定はそのまま維持されます */
    overflow: visible;
  }
  /* 2. キャッチコピー（白い文字）の位置調整 */
  /* スライダーの幅が狭くなったので、左側の位置を調整してスライダーから少しはみ出させます */
  .hero-text {
    /* 元は left: 10%; でした */
    /* スライダーの左端を基準に、マイナスの値を指定して左側へ出します */
    left: -25%; /* ←この数字を調整して、良い感じの位置に合わせてください！ */
    /* 必要に応じてテキストのスタイルも微調整 */
    /* 例: text-align: right; を追加すると、スライダー側に文字が寄ります */
  }
  /* 3. 地図の背景装飾（もしあれば）の位置も調整 */
  /* 現状のHTMLには .hero-overlay がありますが、もしこれが地図用なら調整が必要です */
  /*
  .hero-overlay {
      left: -30%; // 例
  }
  */
}
/* =========================================
   ▼ 3. 会社概要・事業案内（全画面背景切り替え版）
   ========================================= */
.section-big-links {
  position: relative; /* 基準点 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 400px;
  overflow: hidden; /* はみ出し禁止 */
  background-color: #333; /* 背景ロードまでの色 */
}

/* --- 1. リンクアイテム（枠）の基本設定 --- */
.big-link-item {
  position: relative;
  width: 50%;
  height: 100%;
  text-decoration: none;
  color: white;
  z-index: 10; /* 背景より手前 */
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s; /* 薄くなる動き */
}

/* --- 2. 平時の個別背景画像 (.normal-bg) --- */
.normal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* ★追加：画像の上に「下から黒くなる」グラデーションを重ねる */
.normal-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 下(0%)が真っ黒(0.8)で、上の方(60%)に向かって透明になるグラデーション */
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(60%, transparent));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  z-index: 1; /* 画像のすぐ上に重ねる */
}

/* ★重要★ どちらかにホバーしたら、平時の個別背景は消す！ */
.section-big-links.is-left-hover .normal-bg,
.section-big-links.is-right-hover .normal-bg {
  opacity: 0;
}

/* --- 3. ホバー用の全画面画像 (.hover-big-bg) --- */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 平時背景(1)より手前、リンク文字(20)より奥 */
  pointer-events: none; /* マウスの邪魔をしない */
}

.hover-big-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* ▼▼▼ ここを修正します！ ▼▼▼ */
  /* 1. 「transform 6s linear」を消して、opacity（透明度）だけにします */
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  /* 2. 「scale(1.05)」を消して「1（等倍）」にします */
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 1;
}

/* 左（会社概要）にホバーした時 → 左用画像を出す */
.section-big-links.is-left-hover .bg-for-company {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 2;
}

/* 右（事業案内）にホバーした時 → 右用画像を出す */
.section-big-links.is-right-hover .bg-for-business {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 2;
}

/* ▼▼▼ 追加：ホバー用画像の上に、半透明の黒い幕を張る ▼▼▼ */
.hover-big-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒の濃さはここの数字（0.5）で調整！ */
  /* 0.3(薄い) 〜 0.7(真っ暗) くらいがオススメ */
  background-color: rgba(0, 0, 0, 0);
  z-index: 1; /* 画像の上に重ねる */
}

/* --- 4. テキストコンテンツの切り替え設定 --- */
.link-content {
  position: relative;
  z-index: 20; /* 画像より絶対手前 */
  padding: 40px;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ① 平時用テキスト */
.normal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  /* ★追加：一番下だとギリギリすぎるので、少し余白を持たせる */
  padding-bottom: 10px;
}

/* ★追加：文字をより読みやすくするための影（念のため） */
.normal-content .jp-title,
.normal-content .eng-title {
  color: #fff;
}

/* ② ホバー用テキスト（初期状態：隠す） */
.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  text-align: left;
}

.hover-content .jp-title {
  margin-bottom: -5px;
}

/* ホバー時の文字色調整（背景に負けないように） */
.hover-content .jp-title,
.hover-content .eng-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hover-content .desc-text {
  font-family: "Noto Sans JP";
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}

/* =========================================
   ▼ 5. 動きの連動設定（ここを全部書き換え！）
   ========================================= */
/* ------ ケースA：左（Company）にホバーした時 ------ */
/* 1. 自分（左）の元の小さな背景画像は「完全に消す」 */
/* ★これが今回の「透けて見える」を直すカギです */
.section-big-links.is-left-hover .link-company .normal-bg {
  opacity: 0;
}

/* 2. 相手（右）の背景画像は「薄暗く残す」 */
.section-big-links.is-left-hover .link-business .normal-bg {
  opacity: 0;
}

/* 3. テキストの動き（そのまま） */
.section-big-links.is-left-hover .link-company .normal-content {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}

.section-big-links.is-left-hover .link-company .hover-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ------ ケースB：右（Business）にホバーした時 ------ */
/* 1. 自分（右）の元の小さな背景画像は「完全に消す」 */
.section-big-links.is-right-hover .link-business .normal-bg {
  opacity: 0;
}

/* 2. 相手（左）の背景画像は「薄暗く残す」 */
.section-big-links.is-right-hover .link-company .normal-bg {
  opacity: 0;
}

/* 3. テキストの動き（そのまま） */
.section-big-links.is-right-hover .link-business .normal-content {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}

.section-big-links.is-right-hover .link-business .hover-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* =========================================
   ▼ ホバーした側の背景を黒くする演出
   ========================================= */
/* 1. まず「黒い幕」を左右のリンクに仕込んでおく（最初は見えない） */
.big-link-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒色の濃さ調整（0.5 = 50%の黒） */
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; /* 最初は透明にして隠しておく */
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s; /* ふわっと出す */
  z-index: 5; /* 背景画像より手前、文字より奥 */
  pointer-events: none; /* マウスの邪魔をしない */
}

/* 2. 左（会社概要）にホバーした時 → 左の幕を出す */
.section-big-links.is-left-hover .link-company::before {
  opacity: 1;
}

/* 3. 右（事業案内）にホバーした時 → 右の幕を出す */
.section-big-links.is-right-hover .link-business::before {
  opacity: 1;
}

/* --- ボタンデザイン --- */
.btn-text img {
  margin-right: 6px;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .section-big-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
  }
  .big-link-item {
    width: 100%;
    height: 300px;
  }
  .hover-overlay {
    display: none;
  } /* スマホでは全画面演出を切る（重いので） */
  .normal-bg {
    opacity: 1 !important;
  } /* スマホでは常に個別画像を表示 */
  .hover-content {
    position: relative;
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    background: rgba(0, 0, 0, 0);
  }
  .normal-content {
    display: none;
  }
}
/* =========================================
   ▼ トップページ専用：採用情報＆お問い合わせ
   （前のコードを消して、これを貼ってください！）
   ========================================= */
/* 1. 採用情報エリアの大枠 */
.top-recruit {
  position: relative; /* 基準点 */
  padding: 100px 0 180px 0; /* 上の余白と、下の「めり込み用」の余白 */
  overflow: visible; /* はみ出しOKにする */
}

/* 2. ★ここが主役！背景画像をエリアいっぱいに広げる */
.recruit-bg-img {
  position: absolute; /* 絶対配置 */
  top: 0;
  left: 30%;
  width: 70%;
  height: 150%;
  /* ▼▼▼ ここに画像のパスを入れてください！ ▼▼▼ */
  background: url("../img/index_recruit_image2.jpg") no-repeat;
  background-size: 100% auto;
  z-index: 1; /* 一番後ろ */
  /*
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 90%);

              mask-image: linear-gradient(to right, transparent 0%, black 90%);
              */
}

/* =========================================
   ▼ 採用情報セクションのデザイン装飾
   ========================================= */
/* --- 1. 左上の白い箱のデザイン --- */
.recruit-content {
  /* ★背景色を消す！（または transparent にする） */
  background-color: transparent;
  /* ★影も消す！ */
  -webkit-box-shadow: none;
          box-shadow: none;
  /* ★左の緑の線も、もし不要なら消す！ */
  border: none;
  /* ▼▼▼ paddingは残す！！ ▼▼▼ */
  /* これで「文字の周りの空間」だけを確保します */
  padding: 0px 100px; /* 横のpadding(60px)は取っちゃってもいいかも？位置によります！ */
  /* 横幅の制限はそのまま（改行位置のため） */
  max-width: 600px;
  position: relative;
  z-index: 5;
}

/* --- 3. メインタイトル「食と人をつなぐ仕事」 --- */
.recruit-content h2 {
  font-size: 24px; /* 助詞（と・をつなぐ）の基本サイズ */
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  margin-top: 0;
  margin-bottom: 30px;
  font-style: italic; /* 全体を斜体にして疾走感を出す */
}

/* ★ここがポイント！特定の文字だけデカくする設定 */
.recruit-content h2 span {
  font-size: 54px; /* 「食・人・仕事」をガツンと大きく！ */
  font-weight: 900; /* 極太にする */
  margin: 0 5px; /* 前後の余白 */
  position: relative;
  top: 3px; /* 大きい文字の位置微調整 */
}

/* 色の指定（HTMLのクラスに対応） */
.recruit-content h2 .text-green {
  color: #3c6e50;
}

.recruit-content h2 .text-red {
  color: #d24146;
}

/* --- 4. 本文テキスト --- */
.recruit-content p {
  font-size: 15px;
  line-height: 2; /* 行間を広めに */
  color: #333;
  font-weight: 500;
  margin-bottom: 35px;
  font-family: "Noto Sans JP";
  font-weight: bold;
  padding-bottom: 10px;
}

/* --- 5. 「採用情報へ」のリンクボタン --- */
.link-arrow {
  color: #3c6e50; /* 緑色 */
  font-weight: bold;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 縦の真ん中揃え */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.link-arrow:hover {
  opacity: 0.7; /* ホバー時に少し薄く */
}

/* --- スマホ対応（文字サイズ調整） --- */
@media (max-width: 768px) {
  .recruit-content {
    padding: 30px;
  }
  .recruit-content h2 span {
    font-size: 36px;
  } /* スマホでは少し控えめに */
}
/* =========================================
   ▼ トップページ専用 (.index-contact)
   お問い合わせボックスの重なり＆透過処理【修正版】
   ========================================= */
/* 1. 外側のセクション設定 */
/* セレクタを「タグ名＋クラス名」にして強くします */
section.contact_cta.index-contact {
  background: transparent; /* 親の背景を確実に消す */
  padding-top: 0;
  margin-top: 20vw; /* 画像の重なり具合に合わせて調整してね */
  position: relative;
  z-index: 20; /* 念のため少し大きめに */
}

/* 2. 中の白い箱（contact_box）の透過設定 */
/* ここもセレクタを強くします */
/* =========================================
   ▼ PC版（1001px以上）：お問い合わせセクション修正
   ========================================= */
@media (min-width: 1001px) {
  section.contact_cta.index-contact {
    /* ▼▼▼ ここが修正ポイント！ ▼▼▼ */
    /* 共通CSSの「padding: 60px 0」をここで打ち消します！ */
    padding: 0 !important;
    /* 背景のグラデーション */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, var(--bg-light-gray)), to(var(--bg-light-gray)));
    background: linear-gradient(to bottom, transparent 50%, var(--bg-light-gray) 50%, var(--bg-light-gray) 100%);
  }
}
/* =========================================
   ▼ PC版（1001px以上）：お問い合わせセクション修正
   ========================================= */
@media (min-width: 1001px) {
  /* 1. 外側のセクション（背景のハーフ＆ハーフを作る） */
  section.contact_cta.index-contact {
    /* 上半分は透明（画像が見える）、下半分はフッターと同じグレー */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, var(--bg-light-gray)), to(var(--bg-light-gray))) !important;
    background: linear-gradient(to bottom, transparent 50%, var(--bg-light-gray) 50%, var(--bg-light-gray) 100%) !important;
    /* 余白を消して真ん中を合わせる */
    padding: 0 !important;
    /* 画像と一緒に動くように vw を使う */
    margin-top: 5vw !important;
    position: relative;
    z-index: 20;
  }
  /* 2. 中の白い箱（上だけ半透明にする！） */
  section.contact_cta.index-contact .contact_box {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    /* 上の方は「白の60%（透ける）」、途中から「真っ白」になるグラデーション */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 80px, #ffffff 120px, #ffffff 100%) !important;
    /* 枠線や影はそのまま */
    border: none !important;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }
}
/* =========================================
   ▼ スマホ（1000px以下）：採用情報＆お問い合わせ修正
   ========================================= */
@media (max-width: 1000px) {
  /* 1. 採用セクション全体の余白調整 */
  .top-recruit {
    /* 下に画像を置くためのスペースを確保 */
    padding-bottom: 390px;
    padding-top: 60px;
  }
  /* 2. 背景画像（トラック運転手）の位置修正 */
  .recruit-bg-img {
    /* PC版の配置をリセット */
    top: auto;
    left: 0;
    /* スマホ版の配置：一番下に固定 */
    bottom: 0;
    width: 100%;
    height: 400px; /* 画像の高さ（調整OK） */
    /* 画像の表示位置調整 */
    background-size: cover;
    background-position: center top; /* 人物の顔が見えるように */
    /* ★重要：グラデーションの向きを「上から下」に変更！ */
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, black));
    mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
    z-index: 0;
  }
  /* 3. テキストエリアの余白修正 */
  .recruit-content {
    padding: 0 20px; /* 横幅いっぱいにしない */
    margin-bottom: 10px;
    max-width: 100%;
    /* 画像と重なっても文字が手前に来るように */
    position: relative;
    z-index: 2;
  }
  /* タイトル文字サイズの微調整（必要であれば） */
  .recruit-content h2 span {
    font-size: 40px;
  }
  .recruit-content p {
    margin-bottom: 10px; /* PC版(35px)を上書きして狭くする */
    padding-bottom: 0;
  }
  /* 4. お問い合わせセクションの「めり込み」調整 */
  section.contact_cta.index-contact {
    /* マイナスにして上に引き上げる！ */
    margin-top: -80px;
    /* 重なり順を一番手前に */
    position: relative;
    z-index: 10;
    /* スマホ版では背景設定をリセット（必要に応じて） */
    background: transparent;
    padding: 0;
  }
  /* コンタクトボックスの調整 */
  section.contact_cta.index-contact .contact_box {
    /* スマホでの余白調整 */
    padding: 40px 20px;
    width: 80%;
    margin: 0 auto;
    /* ▼▼▼ ここを修正！真っ白をやめて、半透明グラデーションにします ▼▼▼ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.9) 80px, #ffffff 120px, #ffffff 100%);
  }
}
/* point */
.feature_lead_area {
  /* 親要素の制限を無視して、画面幅いっぱいに広げる魔法の記述 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 40px 0;
  /* 右側の文章が画面端に行き過ぎないように余白確保 */
  padding-right: 15%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 崩れ防止 */
}

/* --- 左側：画像とタイトルを含むエリア --- */
.lead_visual {
  width: 60%; /* 画像の大きさ */
  position: relative;
}

.lead_img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
  /* 画像そのものも左端にフィットさせる */
  -o-object-fit: cover;
     object-fit: cover;
}

/* --- 緑の帯（タイトル）部分 --- */
.lead_title_band {
  position: absolute;
  top: 15%; /* 画像の上からどのくらいの位置か */
  right: -15%; /* 画像の右端からさらに右へはみ出させる */
  z-index: 2; /* 画像より手前に */
  text-align: left; /* 左揃え */
}

.lead_title_band h2 {
  background-color: #3e6048; /* 緑色 */
  color: #fff;
  font-size: 24px; /* 文字サイズ */
  font-weight: bold;
  line-height: 1.8; /* 行間を広げて帯同士の隙間を作る */
  padding: 8px 30px; /* 帯の内側の余白 */
  /* --- 重要: 2行をそれぞれ帯にする設定 --- */
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* --- 斜めにする設定 --- */
  /* 注意: この方法だと文字も少し斜めになります */
  /* 文字を真っ直ぐにしたい場合はHTMLの変更(span追加等)が必要です */
}

/* --- 右側：説明文エリア --- */
.lead_description {
  width: 40%; /* 説明文の幅 */
  padding-left: 5%; /* 画像との距離 */
  padding-top: 80px; /* 帯と重ならないように下に下げる */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.lead_description p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  font-weight: 600;
}

/* --- スマホ対応（画面が狭い時） --- */
@media (max-width: 768px) {
  .feature_lead_area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* 縦並びにする */
    padding: 20px;
  }
  .lead_visual {
    width: 100%;
    margin-bottom: 20px;
  }
  .lead_title_band {
    position: relative; /* 絶対配置を解除 */
    top: auto;
    right: auto;
    margin-top: -30px; /* 画像の下部に少し被せる */
    text-align: center;
    width: 100%;
  }
  .lead_title_band h2 {
    font-size: 18px;
    padding: 5px 15px;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
  .lead_description {
    width: 100%;
    padding-left: 0;
    padding-top: 20px;
  }
}
/* --- 2. 4つの特徴グリッド --- */
.feature_grid_area {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 60px 40px; /* 縦の隙間60px, 横の隙間40px */
  margin-bottom: 100px;
}

.feature_item {
  width: 100%;
}

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

/* Feature番号とタイトル */
.item_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline; /* 文字の下ラインを揃える */
  gap: 15px;
  margin-bottom: 15px;
  border-left: 5px solid var(--main-green); /* 左の緑線 */
  padding-left: 15px;
}

.feat_num {
  font-family: "Oswald", sans-serif; /* 英語フォント */
  font-style: italic;
  font-size: 18px;
  color: #999; /* 薄いグレー */
  font-weight: 500;
}

.feat_title {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt"; /* 文字詰め */
}

.item_desc {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* --- スマホ対応 (グリッド) --- */
@media (max-width: 768px) {
  .feature_grid_area {
    grid-template-columns: 1fr; /* 1列にする */
    gap: 50px;
  }
  .feat_title {
    font-size: 20px;
  }
}
/* --- 3. 下部メッセージエリア --- */
.feature_bottom_message {
  padding: 50px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 斜めの背景箱 */
.message_skew_box {
  background-color: #f2f6f4; /* 薄い緑グレー */
  width: 100%;
  max-width: 800px;
  padding: 60px 40px;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg); /* 緩やかに斜め */
  text-align: center;
}

/* 中身の傾きを戻す */
.message_inner {
  -webkit-transform: skewX(10deg);
          transform: skewX(10deg);
}

.message_inner h3 {
  font-size: 24px;
  color: var(--main-green);
  font-weight: bold;
  font-style: italic;
  margin-bottom: 25px;
}

.message_inner p {
  font-weight: bold;
  font-size: 15px;
  line-height: 2;
}

/* --- スマホ対応 (メッセージ) --- */
@media (max-width: 768px) {
  .message_skew_box {
    -webkit-transform: none;
            transform: none; /* スマホでは斜めを解除（見やすさ優先） */
    padding: 40px 20px;
  }
  .message_inner {
    -webkit-transform: none;
            transform: none;
  }
  .message_inner h3 {
    font-size: 20px;
  }
}/*# sourceMappingURL=style.css.map */