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

/**サービス紹介***********************************************************/

/* =========================
   サービス紹介ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.service-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（サービス紹介タイトルなど） */
.service-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（サービス内容・特徴など） */
.service-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.service-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式（料金プランなどにも使える） */
.service-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.service-section .content th,
.service-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.service-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.service-section .content td {
  color: #dddddd;
}

/* リンク */
.service-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.service-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .service-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .service-section .content h2 {
    font-size: 22px;
  }
  .service-section .content h3 {
    font-size: 18px;
  }
}

/**************************************************************************
  相談例ブロック
**************************************************************************/

.cases {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;

  /* フッターとの間に白の余白を取る */
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部に白い区切り帯を描画 */
.cases::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅：最大1440pxで中央寄せ */
.cases .inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* 見出し（中央短線） */
.cases h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  display: block;
  position: relative;
  padding-bottom: 0;
  border: 0;
}
.cases h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* リード文 */
.cases-lead {
  max-width: 48rem;
  margin: 0.25rem auto clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

/* カードレイアウト */
.cases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  text-align: left;
}

.cases-list li {
  background: #fff;
  color: #0f2240;
  border: 1px solid #e6e9f2;
  border-radius: 0.9rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cases-list li:hover,
.cases-list li:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: #dfe4f1;
}

/* タイトル */
.cases-title {
  display: block;
  position: relative;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.35;
  font-weight: 800;
  color: #0f2240;
  padding-left: clamp(2.05rem, 3vw, 2.25rem);
  margin: 0 0 clamp(0.45rem, 1vw, 0.65rem);
}
.cases-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: clamp(1.05rem, 2.1vw, 1.35rem);
  height: clamp(1.05rem, 2.1vw, 1.35rem);
  border-radius: 50%;
  background: #ffa400;
  box-shadow: 0 2px 6px rgba(255,164,0,0.45);
}

/* テキスト */
.cases-text {
  margin: 0 0 0.65rem;
  color: #333;
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  line-height: 1.8;
  text-align: justify;                 /* 両端揃え */
  text-justify: inter-character;       /* 和文向け（文字間で調整） */
  text-align-last: start;              /* 最終行は左揃えで不自然さ回避 */
  overflow-wrap: anywhere;             /* 長い英数語の折返し */
  word-break: break-word;              /* 古いブラウザ向け保険 */
}

/* タグ */
.cases-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 0.25rem;
}
.cases-tag {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.46rem 0.6rem;
  border-radius: 999px;
  background: #eef3ff;
  color: #345;
  border: 1px solid #e3e9ff;
}

/* リンク */
.cases a {
  color: #66ccff;
  text-decoration: underline;
}
.cases a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* ボタン風リンク */
.cases .btn-mini {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.6rem;
  background: #0a62c7;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  text-decoration: none;
}
.cases .btn-mini:hover {
  background: #0e6be0;
}

/* コンパクト版 */
.cases.is-compact .cases-list { gap: clamp(0.7rem, 1.6vw, 1rem); }
.cases.is-compact .cases-list li { padding: clamp(0.75rem, 1.4vw, 1rem); }

/* スマホ対応 */
@media (max-width: 768px) {
  .cases-lead { font-size: 0.95rem; }
  .cases .btn-mini { font-size: 0.88rem; }
}

/**料金ページ***********************************************************/

/* =========================
   料金ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.price-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（料金タイトルなど） */
.price-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（料金の理由・方針など） */
.price-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.price-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式（参考料金や比較などに使用可能） */
.price-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.price-section .content th,
.price-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.price-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.price-section .content td {
  color: #dddddd;
}

/* リンク */
.price-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.price-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .price-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .price-section .content h2 {
    font-size: 22px;
  }
  .price-section .content h3 {
    font-size: 18px;
  }
}

/**************************************************************************
  ご提案・お見積り例（横並びシンプル × 元デザイン準拠）
**************************************************************************/

.estimates {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%); /* 元デザインに合わせる */
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;

  /* フッターとの間に白の余白を取る（元デザイン準拠） */
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部に白い区切り帯（元デザイン準拠） */
.estimates::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅：最大1440pxで中央寄せ（元と同等） */
.estimates .inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* 見出し（中央短線・長さを元デザインと同一に） */
.estimates h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  display: block;
  position: relative;
  padding-bottom: 0;
  border: 0;
  color: #fff;
}
.estimates h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);      /* ← 元デザインと同じ長さ制御 */
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9); /* ← 白ライン */
  border-radius: 2px;
}

/* リード文（白地上で読みやすく） */
.estimates-lead {
  max-width: 48rem;
  margin: 0.25rem auto clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

/* 横並び：4ブロック（PC）、ラップで可変 */
.estimates-row {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  flex-wrap: wrap;
}

/* カード（白ベース×ネイビー文字でコントラスト確保） */
.estimate-box {
  flex: 1 1 21rem;                 /* 4カラム入りやすい基準幅 */
  max-width: 24rem;                /* カードの最大幅を制御 */
  background: #fff;
  color: #0f2240;
  border: 1px solid #e6e9f2;
  border-radius: 0.9rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.estimate-box:hover,
.estimate-box:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: #dfe4f1;
}

/* タイトル（アクセントは#0a62c7に統一） */
.estimate-title {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 800;
  color: #0a62c7;
  margin: 0 0 clamp(0.45rem, 1vw, 0.65rem);
  border-left: 4px solid #0a62c7;
  padding-left: 0.55rem;
  line-height: 1.35;
}

/* 説明文 */
.estimate-desc {
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: #333;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: start;
}

/* データ一覧 */
.estimate-data {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.92rem, 1.05vw, 0.98rem);
  color: #0f2240;
}
.estimate-data li {
  margin-bottom: 0.35rem;
  line-height: 1.7;
}
.estimate-data strong {
  color: #0a62c7;
  font-weight: 800;
}

/* リンク（必要なら） */
.estimates a {
  color: #66ccff;
  text-decoration: underline;
}
.estimates a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 1024px) {
  .estimate-box { flex: 1 1 22rem; max-width: 28rem; }
}
@media (max-width: 768px) {
  .estimate-box { flex: 1 1 100%; max-width: 100%; }
}


/**代表者挨拶ページ***********************************************************/

/* =========================
   代表者挨拶ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.greeting-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（代表者挨拶タイトルなど） */
.greeting-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（理念・想いなど） */
.greeting-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.greeting-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式（必要に応じて再利用可能） */
.greeting-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.greeting-section .content th,
.greeting-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.greeting-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.greeting-section .content td {
  color: #dddddd;
}

/* 署名部分（代表名のエリア） */
.greeting-section .content .sign {
  margin-top: 40px;
  font-size: 16px;
  color: #ffffff;
  text-align: right;
  line-height: 1.6;
}

/* リンク */
.greeting-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.greeting-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .greeting-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .greeting-section .content h2 {
    font-size: 22px;
  }
  .greeting-section .content h3 {
    font-size: 18px;
  }
}

/**************************************************************************
  理念を実現するためにブロック
**************************************************************************/

.initiatives {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;

  /* フッターとの間に白の余白を取る */
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部に白い区切り帯を描画 */
.initiatives::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅：最大1440pxで中央寄せ */
.initiatives .inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* 見出し（中央短線） */
.initiatives h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  display: block;
  position: relative;
  padding-bottom: 0;
  border: 0;
}
.initiatives h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* リード文 */
.initiatives-lead {
  max-width: 48rem;
  margin: 0.25rem auto clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

/* カードレイアウト */
.initiatives-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  text-align: left;
}

.initiatives-list li {
  background: #fff;
  color: #0f2240;
  border: 1px solid #e6e9f2;
  border-radius: 0.9rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.initiatives-list li:hover,
.initiatives-list li:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: #dfe4f1;
}

/* タイトル */
.initiatives-title {
  display: block;
  position: relative;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.35;
  font-weight: 800;
  color: #0f2240;
  padding-left: clamp(2.05rem, 3vw, 2.25rem);
  margin: 0 0 clamp(0.45rem, 1vw, 0.65rem);
}
.initiatives-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: clamp(1.05rem, 2.1vw, 1.35rem);
  height: clamp(1.05rem, 2.1vw, 1.35rem);
  border-radius: 50%;
  background: #ffa400;
  box-shadow: 0 2px 6px rgba(255,164,0,0.45);
}

/* テキスト */
.initiatives-text {
  margin: 0 0 0.65rem;
  color: #333;
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: start;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* タグ */
.initiatives-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-top: 0.25rem;
}
.initiatives-tag {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.46rem 0.6rem;
  border-radius: 999px;
  background: #eef3ff;
  color: #345;
  border: 1px solid #e3e9ff;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .initiatives-lead { font-size: 0.95rem; }
}

/**弊社の特色ページ***********************************************************/

/* =========================
   弊社の特色ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.feature-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（タイトルなど） */
.feature-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（各特色セクション） */
.feature-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.feature-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式（必要に応じて再利用可能） */
.feature-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.feature-section .content th,
.feature-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.feature-section .content td {
  color: #dddddd;
}

/* リンク */
.feature-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.feature-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .feature-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .feature-section .content h2 {
    font-size: 22px;
  }
  .feature-section .content h3 {
    font-size: 18px;
  }
}

/**************************************************************************
  弊社の強みを支えるスタッフの紹介（横並びシンプル × 元デザイン準拠）
**************************************************************************/

.staff-intro {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;

  /* フッターとの間に白の余白を取る */
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部の白い区切り帯 */
.staff-intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅：最大1440pxで中央寄せ */
.staff-intro .inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* 見出し */
.staff-intro h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  display: block;
  position: relative;
  padding-bottom: 0;
  border: 0;
  color: #fff;
}
.staff-intro h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* リード文（紹介文や説明） */
.staff-intro-lead {
  max-width: 48rem;
  margin: 0.25rem auto clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

/* 横並び：4ブロック（PC）、ラップで可変） */
.staff-intro-row {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  flex-wrap: wrap;
}

/* 各スタッフカード */
.staff-card {
  flex: 1 1 21rem;
  max-width: 24rem;
  background: #fff;
  color: #0f2240;
  border: 1px solid #e6e9f2;
  border-radius: 0.9rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.staff-card:hover,
.staff-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: #dfe4f1;
}

/* スタッフ名・職種 */
.staff-name {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 800;
  color: #0a62c7;
  margin: 0 0 clamp(0.45rem, 1vw, 0.65rem);
  border-left: 4px solid #0a62c7;
  padding-left: 0.55rem;
  line-height: 1.35;
}

/* 紹介文 */
.staff-desc {
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: #333;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  text-align: justify;
  text-justify: inter-character;
  text-align-last: start;
}

/* スタッフ詳細データ（役職・得意分野など） */
.staff-data {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.92rem, 1.05vw, 0.98rem);
  color: #0f2240;
}
.staff-data li {
  margin-bottom: 0.35rem;
  line-height: 1.7;
}
.staff-data strong {
  color: #0a62c7;
  font-weight: 800;
}

/* リンク（必要なら） */
.staff-intro a {
  color: #66ccff;
  text-decoration: underline;
}
.staff-intro a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 1024px) {
  .staff-card { flex: 1 1 22rem; max-width: 28rem; }
}
@media (max-width: 768px) {
  .staff-card { flex: 1 1 100%; max-width: 100%; }
}

/**お断りするケースページ***********************************************************/

/* =========================
   お断りするケースページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.guideline-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し */
.guideline-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;            /* 余白統一 */
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}
.guideline-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.guideline-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル（必要時再利用） */
.guideline-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
.guideline-section .content th,
.guideline-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.guideline-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}
.guideline-section .content td {
  color: #dddddd;
}

/* リンク */
.guideline-section .content a {
  color: #66ccff;
  text-decoration: underline;
}
.guideline-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* -----------------------------
  <dl>（お断りするケース本体）
  各 <dt> に data-ico で絵文字/記号を指定
----------------------------- */
.guideline-section dl {
  margin: 1rem 0 0.5rem;
  padding: 0;
}
.guideline-section dt {
  position: relative;
  margin: 1.1rem 0 0.4rem;
  padding-left: 2.9rem;            /* アイコン分の余白 */
  font-weight: 800;
  line-height: 1.55;
  color: #ffffff;
}
.guideline-section dt::before {
  content: attr(data-ico);
  position: absolute;
  left: 0.05rem;                       /* 若干右寄せ補正（横ズレ対策） */
  top: 48%;                            /* 50%だとやや下なので微調整 */
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(102, 204, 255, 0.16);
  border: 1px solid rgba(102, 204, 255, 0.38);
  color: #66ccff;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}
/* 説明本文 */
.guideline-section dd {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 165, 0, 0.7);
  border-radius: 8px;
  color: #eaeaea;
  line-height: 1.85;
}

/* dd 内の補助（強調・リンク・リスト） */
.guideline-section dd strong {
  color: #ffffff;
  font-weight: 700;
}
.guideline-section dd a {
  color: #66ccff;
  text-decoration: underline;
}
.guideline-section dd a:hover {
  color: #99ddff;
  text-decoration: none;
}
.guideline-section dd ul,
.guideline-section dd ol {
  margin: 0.4rem 0 0.2rem 1.2rem;
  padding: 0;
}
.guideline-section dd li {
  margin: 0.25rem 0;
}

/* アクセシビリティ（キーボード操作） */
.guideline-section dt:focus-visible,
.guideline-section dd:focus-visible {
  outline: 2px dashed #66ccff;
  outline-offset: 3px;
}

/* -----------------------------
  スマホ対応
----------------------------- */
@media (max-width: 768px) {
  .guideline-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .guideline-section .content h2 {
    font-size: 22px;
  }
  .guideline-section .content h3 {
    font-size: 18px;
  }

  .guideline-section dt {
    padding-left: 2.5rem;
  }
  .guideline-section dt::before {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  .guideline-section dd {
    padding: 0.65rem 0.8rem;
  }
}

/* =========================
   SP（スマホ）向けのアイコン位置補正
   ========================= */
@media (max-width: 768px) {
  .guideline-section dt {
    padding-left: 2.5rem;   /* アイコンの実寸縮小に合わせて左余白も詰める */
  }
  .guideline-section dt::before {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.98rem;
    left: 0.08rem;          /* ほんの少しだけ右へ寄せる */
    top: 47%;               /* iOS系で下ブレしがちなので更に1%上げる */
    transform: translateY(-50%);
  }
}

/**************************************************************************
  まずはご相談ください（下部共通ブロック）- サヨナリンクス青トーン踏襲
**************************************************************************/

.contact-promo {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%); /* 元デザイン踏襲 */
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  position: relative;
}

/* 下部の白い区切り帯（元デザイン準拠） */
.contact-promo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅：最大1440pxで中央寄せ */
.contact-promo .inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* 見出し */
.contact-promo h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  color: #fff;
  position: relative;
}
.contact-promo h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* リード文 */
.contact-promo-lead {
  max-width: 48rem;
  margin: 0.25rem auto clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

/* CTAボタン */
.contact-promo .btn {
  display: inline-block;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0.9rem 2.4rem;
  background: #fff;
  color: #0a62c7;
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  border-radius: 2rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.contact-promo .btn:hover {
  background: #e8f3ff;
  transform: translateY(-2px);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact-promo {
    padding: 2rem 1.25rem 3rem;
  }
  .contact-promo h2 {
    font-size: 1.4rem;
  }
}

/** よくあるご質問（FAQ）ページ ***************************************/

/** =========================
    FAQ専用デザイン（ベース）
    ========================= */
.faq-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し */
.faq-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}
.faq-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.faq-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* テーブル（必要時） */
.faq-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
.faq-section .content th,
.faq-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.faq-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}
.faq-section .content td {
  color: #dddddd;
}

/* リンク */
.faq-section .content a {
  color: #66ccff;
  text-decoration: underline;
}
.faq-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* =========================
   <dl>（FAQ本体：Q→A）
   data-icoでQ/Aなどの表示可
   ========================= */
.faq-list {
  margin: 1rem 0 0.5rem;
  padding: 0;
}

/* 質問（Q） */
.faq-list dt {
  position: relative;
  margin: 1.1rem 0 0.4rem;
  padding: 0.9rem 0.9rem 0.9rem 3.6rem; /* 余白拡大 */
  font-weight: 800;
  line-height: 1.55;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(102, 204, 255, 0.8);
  border-radius: 8px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faq-list dt::before {
  content: attr(data-ico);
  position: absolute;
  left: 0.8rem; /* アイコンと文字の間を広げる */
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(102, 204, 255, 0.16);
  border: 1px solid rgba(102, 204, 255, 0.38);
  color: #66ccff;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

/* 回答（A） */
.faq-list dd {
  position: relative;
  margin: 0.45rem 0 1rem;
  padding: 0.85rem 0.95rem 0.85rem 3.6rem; /* 余白拡大 */
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 165, 0, 0.7);
  border-radius: 8px;
  color: #eaeaea;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faq-list dd::before {
  content: attr(data-ico);
  position: absolute;
  left: 0.8rem; /* アイコン右寄せ調整 */
  top: 0.85rem;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.16);
  border: 1px solid rgba(255, 165, 0, 0.36);
  color: rgba(255, 191, 94, 1);
  font-size: 1.02rem;
  line-height: 1;
  pointer-events: none;
}

/* 回答内補助（強調・リンク・リスト） */
.faq-list dd strong {
  color: #ffffff;
  font-weight: 700;
}
.faq-list dd a {
  color: #66ccff;
  text-decoration: underline;
}
.faq-list dd a:hover {
  color: #99ddff;
  text-decoration: none;
}
.faq-list dd ul,
.faq-list dd ol {
  margin: 0.4rem 0 0.2rem 1.2rem;
  padding: 0;
}
.faq-list dd li {
  margin: 0.25rem 0;
}

/* アクセシビリティ（キーボード操作） */
.faq-list dt:focus-visible,
.faq-list dd:focus-visible,
.faq-accordion summary:focus-visible {
  outline: 2px dashed #66ccff;
  outline-offset: 3px;
}

/* =========================
   <details>アコーディオン（任意）
   ========================= */
.faq-accordion {
  margin-top: 1.2rem;
}
.faq-accordion details {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(102, 204, 255, 0.8);
  border-radius: 8px;
  margin: 0.7rem 0;
  overflow: hidden;
}
.faq-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1rem 0.95rem 3.5rem; /* 余白調整 */
  position: relative;
  font-weight: 800;
  color: #ffffff;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faq-accordion summary::marker { display: none; }

.faq-accordion summary::before {
  content: "Q";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(102, 204, 255, 0.16);
  border: 1px solid rgba(102, 204, 255, 0.38);
  color: #66ccff;
  font-size: 1.02rem;
  line-height: 1;
}

.faq-accordion summary::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #e0e0e0;
  border-bottom: 2px solid #e0e0e0;
  transition: transform 0.2s ease;
}
.faq-accordion details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 回答ボディ（A） */
.faq-accordion .answer {
  padding: 0.85rem 1rem 1rem 3.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #eaeaea;
  line-height: 1.85;
  position: relative;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faq-accordion .answer::before {
  content: "A";
  position: absolute;
  left: 0.8rem;
  top: 0.85rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.16);
  border: 1px solid rgba(255, 165, 0, 0.36);
  color: rgba(255, 191, 94, 1);
  font-size: 1rem;
  line-height: 1;
}

/* =========================
   スマホ対応
   ========================= */
@media (max-width: 768px) {
  .faq-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .faq-section .content h2 {
    font-size: 22px;
  }
  .faq-section .content h3 {
    font-size: 18px;
  }

  .faq-list dt,
  .faq-list dd,
  .faq-accordion summary,
  .faq-accordion .answer {
    padding-left: 3.1rem; /* アイコン縮小に合わせて */
  }

  .faq-list dt::before,
  .faq-list dd::before,
  .faq-accordion summary::before,
  .faq-accordion .answer::before {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.95rem;
    left: 0.7rem;
  }
}
/**お問い合わせページ***********************************************************/

/* =========================
   お問い合わせページ専用デザイン
   ========================= */

/* 全体 */ 
.contact-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（お問い合わせタイトルなど） */
.contact-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（注意事項・お願いなど） */
.contact-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.contact-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* リンク */
.contact-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.contact-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .contact-section .content h2 {
    font-size: 22px;
  }
  .contact-section .content h3 {
    font-size: 18px;
  }
}

/**************************************************************************
  お問い合わせフォームセクション（青背景＋白カード）
**************************************************************************/

.contact-form-section {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  color: #fff;
  box-sizing: border-box;
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部白帯 */
.contact-form-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 中央寄せ */
.contact-form-section .inner {
  max-width: 64rem; /* 1024px */
  margin: 0 auto;
}

/* 見出し */
.contact-form-section h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;
}
.contact-form-section h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* 白いカード本体 */
.contact-card {
  background: #fff;
  color: #0f2240;
  border-radius: 1rem;
  padding: clamp(2rem, 3vw, 2.5rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  max-width: 100%;
}

/* 内部のテキスト・フォーム共通スタイル */
.contact-card p,
.contact-card label,
.contact-card input,
.contact-card textarea,
.contact-card select {
  color: #0f2240;
}

/* 小見出し（任意） */
.contact-card h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
  border-left: 4px solid #0a62c7;
  padding-left: 0.6rem;
  color: #0a62c7;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact-form-section .inner {
    max-width: 100%;
  }
  .contact-card {
    padding: 1.5rem;
  }
}

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

/* =========================
   会社概要ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.company-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（会社概要タイトルなど） */
.company-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（沿革・代表挨拶など） */
.company-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.company-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式の会社概要 */
.company-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.company-section .content th,
.company-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.company-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.company-section .content td {
  color: #dddddd;
}

/* リンク */
.company-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.company-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .company-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .company-section .content h2 {
    font-size: 22px;
  }
  .company-section .content h3 {
    font-size: 18px;
  }
}

/*************************************************************************/

/* ===== アクセスセクション（青背景で左右分割） ===== */

.access {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  color: #fff;
  box-sizing: border-box;
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

.access::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* 内幅中央寄せ */
.access .inner {
  max-width: 90rem; /* 1440px */
  margin: 0 auto;
}

/* 見出し */
.access h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;
}
.access h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 46rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* 左右分割（PC時） */
.access-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* 左：住所情報 */
.access-info {
  flex: 1 1 45%;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8;
}
.access-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  border-left: 4px solid #ffa400;
  padding-left: 0.6rem;
}
.access-info p {
  margin-bottom: 1rem;
}

/* 右：マップ */
.access-map {
  flex: 1 1 50%;
  height: clamp(420px, 45vh, 560px);
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .access-wrap {
    display: block;
  }
  .access-map {
    margin-top: 2rem;
    height: clamp(360px, 50vh, 420px);
  }
}

/**採用情報ページ***********************************************************/

/* =========================
   採用情報ページ専用デザイン
   ========================= */

/* 全体（既存構造を継承） */
.recruit-section .content {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f5f5f5;
  padding: 40px 32px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出し（採用情報タイトルなど） */
.recruit-section .content h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

/* サブ見出し（募集要項・メッセージなど） */
.recruit-section .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: #e0e0e0;
  border-left: 4px solid #66ccff;
  padding-left: 10px;
}

/* テキスト */
.recruit-section .content p {
  margin-bottom: 1.4em;
  color: #eaeaea;
}

/* テーブル形式（必要に応じて再利用可能） */
.recruit-section .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.recruit-section .content th,
.recruit-section .content td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.recruit-section .content th {
  text-align: left;
  width: 30%;
  color: #ffffff;
  font-weight: 600;
}

.recruit-section .content td {
  color: #dddddd;
}

/* 署名部分（担当者名や締めコメントのエリア） */
.recruit-section .content .sign {
  margin-top: 40px;
  font-size: 16px;
  color: #ffffff;
  text-align: right;
  line-height: 1.6;
}

/* リンク */
.recruit-section .content a {
  color: #66ccff;
  text-decoration: underline;
}

.recruit-section .content a:hover {
  color: #99ddff;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .recruit-section .content {
    padding: 24px 18px;
    font-size: 15px;
  }
  .recruit-section .content h2 {
    font-size: 22px;
  }
  .recruit-section .content h3 {
    font-size: 18px;
  }
}

/* =========================
   募集職種セクション（cardsは .staff-card を継承）
   ========================= */
.recruit-roles {
  width: 100%;
  background: linear-gradient(180deg, #005bb5 0%, #0a62c7 100%);
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
  position: relative;
}

/* 下部白区切り帯 */
.recruit-roles::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
}

/* タイトル */
.recruit-roles h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  color: #fff;
}
.recruit-roles h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 40rem);
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* リード文 */
.recruit-roles .staff-intro-lead {
  color: rgba(255, 255, 255, 0.95);
}

/* 各職種カード（staff-cardをベースに調整） */
.role-card {
  background: #fff;
  color: #0f2240;
}

.role-card .role-title {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 800;
  color: #0a62c7;
  margin: 0 0 clamp(0.45rem, 1vw, 0.65rem);
  border-left: 4px solid #0a62c7;
  padding-left: 0.55rem;
}

.role-card .role-desc {
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  color: #333;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  text-align: justify;
}

.role-points,
.role-meta {
  font-size: clamp(0.92rem, 1.05vw, 0.98rem);
  color: #0f2240;
  margin: 0.25rem 0 0.9rem;
  text-align: left;
  padding-left: 1rem;
}

.role-points strong { color: #0a62c7; }

.badge {
  display: inline-block;
  font-size: 0.82em;
  font-weight: 800;
  color: #005bb5;
  background: #eaf3ff;
  border: 1px solid #d6e7ff;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  margin-right: 0.45rem;
}

/* スマホ対応（既存と同じ設定） */
@media (max-width: 1024px) {
  .role-card { flex: 1 1 22rem; max-width: 28rem; }
}
@media (max-width: 768px) {
  .role-card { flex: 1 1 100%; max-width: 100%; }
}