body {
  font-family: sans-serif;
  background-color: #fff;
  color: #000;
  margin: 0;
}
body {
  font-family: sans-serif;
  background-color: #fff;
  color: #000;
  margin: 0;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 繝倥ャ繝?繝ｼ荳企Κ 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
/* 繝ｭ繧ｴ繧ｵ繧､繧ｺ隱ｿ謨ｴ */


.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* 右揃え */
  justify-content: center;
  text-align: right;
  gap: 0.3rem;
}

.contact-message {
  font-size: 1rem;
  color: #444;
  margin: 0;
}

.contact-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  line-height: 1;
}

.tel-icon {
  font-size: 2.3rem;
  color: #002966;
}

.tel-number {
  font-size: 1.92rem;
  font-weight: bold;
  color: #002966;
}

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}




.hero-img-wrapper {
  position: relative;
  width: 100%;
aspect-ratio: 5 / 2;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 最低限この２つで必ず埋める */
  min-width: 100%;
  min-height: 100%;
  /* 中心を軸にパン＆ズーム */
  transform: translate(-38%, -50%) scale(1.1);
}







/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 隕句?縺? 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
h1 {
  margin: 0;
  font-size: 2rem;
}

h2, h3 {
  color: #000;
}

h2 {
  max-width: 1100px;
  margin: 2rem auto 1rem auto;
  padding-left: 0.5rem;
  text-align: left;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* ← 背景を白に */
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aaa;
  box-shadow: none; /* ← 影を消す */
}

nav {
  width: 100%;
  background-color: #ffffff; /* ← 白背景をnav全体に適用 */
  border-top: 1px solid #ccc;     /* 上端の線追加 */
  border-bottom: 1px solid #ccc;  /* 下端の線追加 */
  box-shadow: none; /* ← 影を消す */
}

nav .nav-inner {
  max-width: 1100px;
  margin: 0 auto;
	 margin-top: 0;
  padding-top: 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border-left: 1px solid #ccc;   /* 左端の線追加 */
  border-right: 1px solid #ccc;  /* 右端の線追加 */
  background-color: transparent;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aaa;
  box-shadow: none; /* ← 影を消す */
}

nav ul li {
  flex: 1 1 auto;
  text-align: center;
  border-left: 1px solid #aaa;
  margin-left: -1px;
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: flex; /* ← 横棒と文字を横並びにする */
  align-items: center;
  justify-content: center;
  gap: 0.4em; /* 棒と文字の間隔 */
  padding: 1.2rem 0.5rem;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
  position: relative;
}

nav ul li a:hover {
  color: #666;
}
nav ul li a::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: #007acc;
}

nav ul li a::selection {
  color: #888;
  background-color: #ddd;
}


/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 繝??繝悶Ν 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
table {
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ccc;
  padding: 10px;
}

th {
  background-color: #f0f0f0;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? Google Map 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
.flex-maps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.angle-banner {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 4rem 0;
  background:
    /* 白い三角マスク（ここの角度はそのまま） */
    linear-gradient(330deg, transparent 50%, #fff 50%) no-repeat,
    /* 青いグラデーション：左下→左上で濃くなる */
    linear-gradient(
      to top left,
      #004080 0%,      /* 左下 */
      #002966 100%     /* 左上でより濃い青 */
    );
  background-size: cover;
	
}




.truck-side {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.truck-img {
  transform: translate(0px, 10px);
  width: 500%;
  max-width: 1700px;
  height: auto;
}

.banner-right {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.info-box {
  background-color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 10px;
  max-width: 600px;
  min-width: 430px; /* 竊? 霑ｽ蜉� */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 2;
}


.info-logo {
  width: 150px;
  margin-bottom: 1rem;
}

.info-box h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #002966;
}

.info-box p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.payment-icons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* 竊? 縺薙ｌ繧定ｿｽ蜉� */
}

.payment-icons img {
  height: 50px;
  width: auto;
  object-fit: contain;
}


.company-link {
  display: inline-block;
  color: #002966;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid #002966;
  transition: 0.3s;
}

.company-link:hover {
  color: #000;
  border-color: #000;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? info-box 繝ｭ繧ｴ讓ｪ荳ｦ縺ｳ 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
.info-title {
  display: flex;
  flex-direction: row; /* 竊? column 竊? row 縺ｫ螟画峩 */
  align-items: center;
  text-align: left; /* 竊? center 竊? left 縺ｫ螟画峩 */
  gap: 1rem; /* 竊? 讓ｪ縺ｮ菴咏區繧貞｢励ｄ縺? */
}

.info-logo-vertical {
  width: 120px;
  height: auto;
}

.info-en {
  font-family: 'Georgia', serif;
  font-size: 2.4rem;
  font-weight: bold;
  font-style: italic;           /* 譁應ｽ? */
  color: #002966;
  letter-spacing: 0.03rem;      /* 竊? 譁?ｭ玲─隕壹ｒ迢ｭ縺? */

}

.info-ja {
  font-size: 1.92rem;
  font-weight: bold;
  font-style: italic;           /* 譁應ｽ? */
  color: #002966;
  letter-spacing: 0.03rem;      /* 竊? 譁?ｭ玲─隕壹ｒ迢ｭ縺? */
}



/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 縺雁撫縺?粋繧上○繝舌リ繝ｼ 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
.contact-banner {
  position: relative;
  background: url('contact_bg.jpg') center/cover no-repeat;
  height: 500px;
  width: 100%;
  margin-top: 1.5rem;
  overflow: hidden;
}

.contact-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.contact-banner-overlay h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #fff;
}

.contact-subtitle {
  font-size: 1rem;
  color: #fff;
  margin: 0rem 0;
  letter-spacing: 0.1rem;
}

.contact-description {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.contact-btn {
  display: inline-block;
  background-color: #fff;
  color: #002966;
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.contact-btn:hover {
  background-color: #002966;
  color: #fff;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

.contact-phone {
  font-size: 1.2rem;
  color: #fff;
  background-color: rgba(255,255,255,0.2);
  padding: 0.5rem 1rem;
  border: 1px solid #fff;
  border-radius: 5px;
  text-decoration: none;
}

.contact-phone:hover {
  background-color: rgba(255,255,255,0.3);
}

.contact-mail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 45°（右下方向）に色を分割 */
  background-image: linear-gradient(
    135deg,
    #002966 0%,    /* 左上側の濃い青 */
    #002966 50%,   /* 分岐点（半分まで濃い青） */
    #002F9C 50%,   /* 分岐点から右下側の薄い青 */
    #002F9C 100%   /* 右下端まで薄い青 */
  );
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: opacity 0.2s;
}

.contact-mail-btn:hover {
  opacity: 0.85;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 莨夂､ｾ諠?�ｱ繝??繝悶Ν 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
/* テーブル全体のリセット */
.company-info-table {
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto;
  border-collapse: collapse;  /* セル間の隙間をなくす */
  border: none !important;
  box-shadow: none !important;
}

/* 左１列目の th／td を青背景・白文字に */
.company-info-table th:first-child,
.company-info-table td:first-child {
  background-color: #002966;
  color: #fff;
  padding: 0.8rem 1rem;
  position: relative;        /* ::after 用に必須 */
  text-align: left;
  border: none;              /* 境界線を消す */
}

/* 左１列目セルの下にだけ白い仕切り線を入れる */
.company-info-table th:not(:last-child) {
  border-bottom: 1px solid #fff;
}
.company-info-table td:not(:last-child) {
  border-bottom: 1px solid #fff;
}

/* 各セル右端に「▽型の切り欠き」を擬似要素で作る */
.company-info-table th:first-child:not(:last-child)::after,
.company-info-table td:first-child:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;               /* 切り欠きの幅／位置 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #002966;  /* 青背景と同じ色 */
}

/* ２列目以降は白背景に戻す */
.company-info-table th:nth-child(n+2),
.company-info-table td:nth-child(n+2) {
  background-color: #fff;
  color: #000;
  padding: 0.8rem 1rem;
  border: none;
}


.company-title-bar {
  background-color: #002966;
  color: #fff;
  text-align: center;
  padding: 0.8rem 1rem;
  margin: 2rem auto 1rem;
  max-width: 1100px;
  position: relative; /* ← これが必要！ */
  clip-path: none;
}

.company-title-bar::after {
  content: "";
  position: absolute;
  bottom: -1rem;              /* 三角の高さ分だけ下にずらす */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #002966;  /* 背景と同じ色 */
}


.company-title-bar h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;            /* 譁?ｭ苓牡繧堤區縺ｫ */
  text-align: center;     /* 荳ｭ螟ｮ謠?∴縺ｫ */
}

/* ────────── 会社沿革だけのカスタムテーブル ────────── */
.company-history-table {
  width: 90%;           /* お好みで幅を調整 */
  max-width: 1100px;     /* 任意の最大幅 */
  margin: 2rem auto;    /* 上下に2rem、左右は自動でセンター */
  border: none;         /* 外枠線を消す */
  border-collapse: collapse;
}

/* ヘッダー行：グレー背景＋下線 */
.company-history-table thead th {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

/* ボディ行：下線だけ */
.company-history-table tbody td {
  border-bottom: 1px solid #eee;
  padding: 0.75rem 1rem;
}


/* 繝ｭ繧ｴ縺ｨ遉ｾ蜷肴ｨｪ荳ｦ縺ｳ */
.company-logo-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.company-header-logo {
  width: 80px;
  height: auto;
}

.company-name-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.company-name-en {
  font-family: 'Georgia', serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: #002966;
  letter-spacing: 0.15rem;
}

.company-name-ja {
  font-size: 1.2rem;
  font-weight: bold;
  color: #002966;
}

/* 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? 繝｡繝?ぅ繧｢繧ｯ繧ｨ繝ｪ 笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏?笏? */
@media screen and (max-width: 800px) {
  nav ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.8rem;
  }

  nav ul li a {
    font-size: 0.8rem;
    white-space: nowrap;
  }

/* ──────── 全幅＆縦横比 3:2 の地図コンテナ ──────── */



  .flex-maps {
    flex-direction: column;
    align-items: center;
  }

  .flex-maps iframe {
    width: 100% !important;
    height: auto !important;
  }

  .hero-text {
    padding: 0.5rem;
    width: 60%;
  }

  .hero-text h1 {
    font-size: 1.5rem;
  }

  .hero-text p {
    font-size: 0.8rem;
  }

  .hero-overlay-text {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 1100px) and (min-width: 801px) {



  .flex-maps {
    flex-direction: column;
    align-items: center;
  }

  .flex-maps iframe {
    width: 100% !important;
    height: auto !important;
  }
}
.image-fade {
  position: relative;
}

.image-fade::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}


.header {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  width: 50px;
  height: auto;
}

.header-names {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-en {
  font-size: 1.3rem;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.05rem;
  color: #002966;
}

.header-ja {
  font-size: 0.95rem;
  color: #002966;
  font-weight: bold;
}

.header-right {
  text-align: right;
  font-size: 0.9rem;
  color: #444;
}

.contact-info {
  font-weight: bold;
  color: #002966;
}

.contact-info .tel,
.contact-info .mail {
  display: inline-block;
  margin-left: 0.5rem;
}
.mail-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 0.3rem;
}


/* 会社情報下のロゴ用の中央揃え */
.info-title.centered {
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ──────────── （ここまでが既存の style.css） ──────────── */


/* ──────── アウトライン付きリンク ──────── */
.company-outline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid #002966;
  background-color: #fff;
  color: #002966;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.company-outline-link .arrow {
  font-size: 1em;
  transition: transform 0.3s;
}
.company-outline-link:hover,
.company-outline-link:focus {
  background-color: #002966;
  color: #fff;
}
.company-outline-link:hover .arrow,
.company-outline-link:focus .arrow {
  transform: translateX(0.3rem);
}
.company-outline-link:focus {
  outline: 3px solid #66aaff;
  outline-offset: 2px;
}


/* 地図ブロック：1100px内で中央寄せ */
.map-box {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 2rem; /* 下に余白 */
}

/* タイトル：下に余白、被り防止に白背景 */
.map-box h3 {
  margin: 0 0 .8rem;
  text-align: center;
  background: #fff;
  font-size: 1.1rem;
}

/* iframeを親幅いっぱい＆比率固定で表示 */
.map-box iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;  /* 好みで 3 / 2 でもOK */
  height: auto;          /* aspect-ratioから自動算出 */
  border: 0;
}

/* 画面が狭いときは少し縦長に（任意） */
@media (max-width: 600px) {
  .map-box iframe {
    aspect-ratio: 4 / 3;
  }
}


.flex-maps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 1cm; /* 下に余白 */
}

@media screen and (max-width: 800px) {
  /* ヘッダーパディングも半分に */
  .header {
    padding: 0.5rem 0;
  }
  /* ロゴを半分のサイズに */
  .header-logo {
    width: 25px;
    height: auto;
  }
  /* 英語社名 */
  .header-en {
    font-size: 0.65rem; /* 元1.3remの半分 */
  }
  /* 日本語社名 */
  .header-ja {
    font-size: 0.475rem; /* 元0.95remの半分 */
  }
  /* お問い合わせメッセージ */
  .contact-message {
    font-size: 0.45rem; /* 元0.9remの半分 */
  }
  /* 電話アイコンと番号 */
  .contact-info .tel-icon {
    font-size: 1.15rem; /* 元2.3remの半分 */
  }
  .contact-info .tel-number {
    font-size: 1.15rem; /* 元2.3remの半分 */
  }
  /* nav 内アイテム間隔少し縮小 */
  nav ul li a {
    padding: 0.4rem 0.3rem;
    font-size: 0.85rem;
  }
  .info-title {
    gap: 0.5rem;              /* 元の1rem→半分 */
    padding: 0.5rem;          /* 元の1rem→半分 */
  }
	 .info-logo-vertical {
    width: 50px;              /* 元100px→半分 */
  }
  .info-en {
    font-size: 1rem;          /* 元2rem→半分 */
  }
  .info-ja {
    font-size: 0.8rem;        /* 元1.6rem→半分 */
  }
}

.site-footer {
  background-color: #002966;   /* お好みの青色に */
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;             /* 上下に余白を１remずつ */
  font-size: 1.8rem;
  letter-spacing: 0.05em;
}
/* フッター内の <p> 要素の文字サイズを変更 */
.site-footer p {
  font-size: 12px; /* お好みのサイズに調整してください */
}

.divider-line-alt1 {
  width: 100%;
  height: 1.2mm;              /* 2ミリの高さ */
  background-color: #001830;
}
.divider-line-alt {
  width: 100%;
  height: 1.2mm;
  background-color: #007acc; /* 中央の水色 */

}
.divider-line-alt2 {
  width: 1100px;
  height: 1px;
  background-color: #ccc; /* 明るいグレー */
  margin: 2rem auto;      /* 上下に余白、左右中央寄せ */
}

#back-to-top {
  position: fixed;
  bottom: 10px;   /* ボタン全体の位置 */
  right: 10px;    /* ボタン全体の位置 */
  width: 40px;    /* ボタンの横幅 */
  height: 40px;   /* ボタンの高さ */
  background-color: #007acc;
  color: #fff;
  font-size: 24px; /* 「^」のベースサイズ */
  line-height: 1;  
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 1000;

  /* Flex で中身を完全に中央寄せ */
  display: flex;
  align-items: center;    /* 垂直中央 */
  justify-content: center;/* 水平中央 */

  /* 縦横比を保つため padding は使わない */
  padding: 0;
}

#back-to-top .arrow {
  display: inline-block;       /* 行内ブロックにして transform が効くように */
  position: relative;          
  /* x,y の数値をいじって矢印位置を微調整 */
  transform: translate(0, 4px); /* ← 縦に上へ4pxずらす例 
X が正なら右、負なら左に移動
Y が正なら下、負なら上に移動*/
}



/* ホバー時に色を少し濃く */
#back-to-top:hover {
  background-color: #005fa3; /* お好みで調整 */
}
.divider-line {
  width: 100%;
  max-width: 1100px;    /* 線の最大幅 */
  height: 1px;          /* 線の太さ */
  background-color: #ccc; /* グレーの色 */
  margin: 0 auto 1rem;       /* ↓ 上:0、左右:auto、下:1rem */
}
/* 見出しそのもの */
.section-title {
  background-color: #002966;  /* お好みの紺色に */
  color: #fff;
  text-align: center;
  position: relative;         /* ::after を絶対配置するため */
  padding: 0.8rem 1rem;           /* 上下の余白 */
}
.section-title h2 {
  margin: 0;                   /* デフォルトの余白を消す */
  font-size: 1.5rem;           /* お好みで調整 */
  line-height: 1;              /* 高さを揃える */
  font-weight: bold;           /* 強調したい場合 */
}


/* 下向き三角を追加 */
.section-title::after {
  content: "";
  position: absolute;
  bottom: -1rem;              /* 三角の高さ分だけ下にずらす */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #002966;  /* 見出しと同じ色 */
}
/* services セクション内の h2 */
.services h2 {
  font-size: 1.5rem;       /* お好みで調整 */
  font-weight: bold;
  margin: 2rem 0 0.5rem;   /* 上：2rem／下：0.5rem */
  text-align: center;
}

/* services セクション内の ul */
.services ul {
  margin: 0;               /* デフォルト余白をリセット */
  padding-left: 1.5rem;    /* インデント */
  list-style-type: disc;   /* 黒丸リスト */
}

/* services セクション内の li */
.services li {
  margin-bottom: 0.75rem;  /* 各行の間隔 */
  line-height: 1.6;        /* 行間 */
}


.services {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem; /* スマホでも余白を確保するため */
}

.services h2 {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto 1rem;
  padding: 0 1rem;
}






.recruit-block {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
  align-items: center; /* ← ? 高さ方向中央揃え */
  justify-content: center; /* 念のため横方向も中央に */
}

.recruit-image,
.recruit-text {
  box-sizing: border-box;
}

.recruit-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* デフォルト：縦並び */
.recruit-image,
.recruit-text {
  flex: 1 1 100%;
  max-width: 100%;
}

/* 横並び（800px以上） */
@media screen and (min-width: 800px) {
  .recruit-block {
    flex-direction: row;
  }

  .recruit-image,
  .recruit-text {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

/* 横並び（1100px以上）→明示的に550px固定 */
@media screen and (min-width: 1100px) {
  .recruit-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   /* ← 横方向中央揃え */
    text-align: center;    /* ← テキスト中央揃え */
  }
}


/* 画像の下に文章を回避的に表示（画像が縦に長くなった場合など） */
@media screen and (max-width: 1099px) {
  .recruit-block {
    flex-wrap: wrap;
  }

  .recruit-image,
  .recruit-text {
    min-width: 300px;
  }

.recruit-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;   /* ← 横方向中央揃え */
  text-align: center;    /* ← テキスト中央揃え */
  padding: 1rem;
	}
	
}


.contact-title {
  position: relative;
  background-color: #002966; /* ← 青帯 */
  color: white;
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

/* 下の三角形 */
.contact-title::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #002966; /* 帯と同じ色 */
}







/* フォーム全体を中央に配置、幅1100px */
.contact-form-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* 行を横並び（左: label / 右: input）にする */
.form-row {
  display: flex;
  justify-content: center; /* 全体を中央に */
  position: relative;
}

.form-row label {
  width: 366px;
  position: relative;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  padding-right: 10px;
  box-sizing: border-box;
}

/* 入力欄：右側2/3（≒733px） */
.form-row input,
.form-row textarea {
  flex: 0 0 66.6666%;
  max-width: 733px;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* テキストエリア調整 */
textarea {
  resize: vertical;
  min-height: 130px;
}

/* 「必須」の赤色 */
.required {
  color: red;
  font-weight: bold;
  margin-right: 0.3em;
}

button {
  display: block;
  margin: 3rem auto;
  padding: 1.2rem 3.5rem;
  font-size: 20px;
  font-weight: bold;
  background-color: #002966;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0044cc;
}









/* ------- 追加：レスポンシブ対応 -------- */
@media (max-width: 800px) {
  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row label,
  .form-row input,
  .form-row textarea {
    width: 100%;
  }

  .contact-form button {
    align-self: stretch;
  }
}


/* honeypotフィールドを完全に非表示にする */
.hidden {
  display: none;
}
/* reCAPTCHAを中央寄せ */
.g-recaptcha {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  margin-bottom: 1rem; /* ボタンとの間に少し余白 */
	margin: 30px auto 0; /* 上に20pxの余白を追加、中央揃え */
}





/* ======== モバイル基本調整（共通） ======== */
img, iframe { max-width: 100%; height: auto; }
input,
textarea,
select,
button {
font-size: 16px; } 
/* iOSズーム防止 */
.container { max-width: 1100px; margin: 0 auto; }





/* =========================
   スマホ調整（上書きパッチ）
   ========================= */
/* =========================
   モバイル最適化の最終調整
   ========================= */

/* 横線がはみ出さないように */
.divider-line-alt2{
  max-width:1100px;
  width:calc(100% - 2rem);
  margin:2rem auto;
}

/* 画面読み上げ用ラベルを隠す（視覚非表示） */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* PCではハンバーガーもドロワーも出さない */
@media (min-width: 769px){
  #navToggle, #globalDrawer, #drawerOverlay { display:none !important; }
}

/* スマホ専用（<=768px） */
@media (max-width: 768px){
  /* 既存の水平ナビが nav.global-nav なら隠す */
  nav.global-nav{ display:none !important; }

  /* 電話番号の下に小さめボタン */
  .header-right{ position:relative; align-items:flex-end; }
  .hamburger{
    display:inline-flex; align-items:center; justify-content:center;
    margin-top:.25rem; align-self:flex-end;
    width:38px; height:34px; padding:0;
    border:0; border-radius:8px;
    background:#0a2d57; color:#fff;
  }
  .hamburger__icon{ font-size:20px; line-height:1; }

  /* ドロワー本体：白背景・縦並び */
  .drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(78%, 320px);
    background:#fff; transform:translateX(100%); transition:transform .25s ease;
    z-index:9999; display:flex; flex-direction:column; padding:14px;
    box-shadow:-10px 0 24px rgba(0,0,0,.12);
  }
  .drawer.open{ transform:translateX(0); }

  .drawer-close{
    align-self:flex-end; background:#0a2d57; color:#fff; border:0;
    border-radius:8px; width:32px; height:32px; font-size:18px; line-height:32px;
  }
  .drawer-list{ list-style:none; margin:8px 0 0; padding:0; }
  .drawer-list li{ border-bottom:1px solid #e9eef5; }
  .drawer-list a{
    display:block; padding:14px 8px; color:#0b1a2e; text-decoration:none; font-weight:600;
  }
  .drawer-list a:active{ background:#f5f8fc; }

  /* 透明のクリック層（背景は白のまま＝グレーにしない） */
  #drawerOverlay{
    position:fixed; inset:0; background:transparent; z-index:9998;
    display:none;
  }
  #drawerOverlay.show{ display:block; }
  
  /* ドロワー開時は背面スクロール禁止 */
  body.no-scroll{ overflow:hidden; touch-action:none; }
}