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

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

/* ===== 強みブロック（背景） ===== */
.strengths {
  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;
}

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

/* セクション見出し：白下線でキリッと */
.strengths h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid rgba(255,255,255,0.9);
}

/* 旧 strength_frame は透明ボックスに */
.strength_frame {
  width: min(100%, 90rem);
  margin: 0 auto;
  background: transparent;
  border: none;
  text-align: left;
}

/* === カードグリッド化 === */
.strength-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* スマホ1列 → タブレット2列 → 広いPCで3列 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* 各カード */
.strength-list li {
  background: #fff;
  color: #0f2240;
  border: 1px solid #e6e9f2;
  border-radius: 0.9rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* ホバー/フォーカス時に少し持ち上げる */
.strength-list li:hover,
.strength-list li:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: #dfe4f1;
}

/* タイトル：アイコンバッジ + 見出し */
.strength-title {
  display: block;
  position: relative;
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  font-weight: 800;
  color: #0f2240;
  padding-left: clamp(2.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(0.5rem, 1vw, 0.75rem);
}

/* オレンジの丸バッジ（マーカーを疑似要素で） */
.strength-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: clamp(1.25rem, 2.4vw, 1.5rem);
  height: clamp(1.25rem, 2.4vw, 1.5rem);
  border-radius: 50%;
  background: #ffa400;
  box-shadow: 0 2px 6px rgba(255,164,0,0.5);
}

/* 本文：読みやすいグレー、適度な行間 */
.strength-text {
  margin: 0;
  color: #333;
  font-size: clamp(0.95rem, 1.1vw, 1rem);
  line-height: 1.8;
}

/* 動き弱め設定 */
@media (prefers-reduced-motion: reduce) {
  .strength-list li { transition: none; }
}

/* ---- オプション：コンパクト版（必要なら .strengths に .is-compact を付与） ---- */
.strengths.is-compact .strength-list {
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
.strengths.is-compact .strength-list li {
  padding: clamp(0.75rem, 1.6vw, 1rem);
}

/* 見出し */
.strengths h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
  border: 0;           /* ← 既存の border-bottom を無効化 */
  display: block;      /* ← inline-blockをやめてズレ防止 */
  position: relative;
  padding-bottom: 0;   /* 下線は疑似要素で描くので不要 */
}

/* 中央の短い下線（飾り線） */
.strengths h2::after {
  content: "";
  display: block;
  width: clamp(6rem, 90%, 46rem);  /* PCでも短めに */
  height: 3px;
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0; /* 中央寄せ */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

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

/* サービスブロック全体（背景用） */
.services {
  width: 100%;
  background: #f7f9fc;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  color: #111;
}

.services__inner {
  max-width: 90rem;     /* 1440px */
  margin: 0 auto;
  text-align: center;
}

/* 見出し & リード */
.services h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem); /* 24–30px */
  margin: clamp(0.75rem, 1.6vw, 1.25rem) 0;
  font-weight: 700;
  display: inline-block;
  color: #333;
  border-bottom: 2px solid #005bb5;
  padding-bottom: clamp(0.3rem, 0.8vw, 0.5rem);
}

.services__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); /* 17px〜20pxくらいに拡大 */
  line-height: 1.8;
  color: #333;
  max-width: 60rem;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
}

/* ===== カードリスト ===== */
.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: 1fr; /* デフォルト：スマホ1列 */
  text-align: left;
}

/* 768px以上 → 2列 */
@media (min-width: 768px) {
  .services__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1200px以上 → 4列 */
@media (min-width: 1200px) {
  .services__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== カード本体 ===== */
.service-card {
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 0.75rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color: #d9deea;
}

/* アイコン（任意） */
.service-card__icon {
  width: clamp(2.25rem, 6vw, 3rem);
  height: auto;
  margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
  display: block;
}

/* タイトル */
.service-card__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem); /* 20–24px に拡大 */
  text-align: center; 
  line-height: 1.3;
  font-weight: 700;
  color: #006fff;
  margin: 0 0 clamp(0.5rem, 1vw, 0.75rem);
}

/* 説明文 */
.service-card__text {
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: #333;
  margin: 0 0 clamp(0.9rem, 1.6vw, 1.25rem);
  flex: 1 1 auto; /* ボタンを下に押し出す */
}

/* ボタン */
.service-card__btn {
  align-self: flex-start;
  display: inline-block;
  font-size: clamp(0.9375rem, 1.2vw, 1rem); /* 15–16px */
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #005bb5;
  padding: clamp(0.625rem, 1.2vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.service-card__btn:hover {
  background: #0a66cc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.service-card__btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,91,181,.25);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__btn {
    transition: none;
  }
}

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

/* 依頼の流れブロック全体（背景用） */
.steps {
  width: 100%;
  background: #005bb5;
  color: #111;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}

.steps__inner {
  max-width: 90rem; /* 1440px */
  margin: 0 auto;
  text-align: center;
}

/* H2とリード文をカード風にまとめる */
.steps__header {
  background: #fff;
  border: 2px solid #005bb5;
  border-radius: 0.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  max-width: 60rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

/* H2 */
.steps__header h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem); /* 24–30px */
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem);
  font-weight: 700;
  border-bottom: 2px solid #005bb5;
  padding-bottom: clamp(0.3rem, 0.8vw, 0.5rem);
  display: inline-block;
}

/* リード文 */
.steps__header .steps__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); /* 17px〜20pxくらいに拡大 */
  line-height: 1.8;
  color: #333;
  margin: 0;
}

/* ===== リスト本体（縦ライン無し） ===== */
.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stepCount;
  position: relative;
  text-align: left;
}

/* 各ステップ */
.step {
  position: relative;
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 0.75rem;
  padding: clamp(1rem, 2.2vw, 1.5rem)
           clamp(1rem, 2.2vw, 1.5rem)
           clamp(1rem, 2.2vw, 1.5rem)
           clamp(3.5rem, 10vw, 6rem); /* 左にバッジ分の余白 */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  z-index: 1; /* 念のため */
}

.step:hover,
.step:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color: #d9deea;
}

/* 丸い番号バッジ（残す） */
.step::before {
  counter-increment: stepCount;
  content: counter(stepCount);
  position: absolute;
  left: clamp(0.5rem, 3vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2rem, 6vw, 3rem);
  height: clamp(2rem, 6vw, 3rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #005bb5;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.125rem);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2; /* カードより前面 */
}

/* タイトル・本文 */
.step__title {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); /* 17–20px */
  line-height: 1.35;
  font-weight: 700;
  color: #0f2240;
  margin: 0 0 clamp(0.4rem, 1vw, 0.6rem);
}

.step__text {
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: #333;
  margin: 0;
}

/* ===== オプション：ワイド時に2段にする（縦ライン無しのまま） ===== */
@media (min-width: 1100px) {
  .steps__list {
    column-count: 2;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .step {
    break-inside: avoid;
  }
}

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

/* 注意ブロック全体 */
.notice {
  background-color: rgba(0,0,0,0.7);
  /* 上下は2rem程度、左右は1rem程度に */
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1rem);
  box-sizing: border-box;
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}

/* 内側コンテナに赤枠を付与 + 横幅を1440pxに */
.notice__inner {
  background: #fff;
  max-width: 90rem;            /* 1440px */
  margin: 0 auto;
  border: 2px solid #d32f2f;   /* 赤枠 */
  border-radius: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-sizing: border-box;
}

/* 大見出し h2 */
.notice h2 {
  background: #d32f2f;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
  border-radius: 0; /* 内枠と一体化するので角丸なし */
  margin: calc(-1 * clamp(1.5rem, 3vw, 2rem))
          calc(-1 * clamp(1.5rem, 3vw, 2rem))
          clamp(1rem, 2vw, 1.5rem); 
  /* 上左右をパディング分マイナス → 枠と一体化 */
}

/* 小見出し h3 */
.notice h3 {
  text-align: left; 
  font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16–20px */
  font-weight: 700;
  color: #d32f2f;
  margin: clamp(1rem, 2vw, 1.25rem) 0 0.5rem;
}

/* リストスタイル */
.notice ul {
  text-align: left; 
  margin: 0;
  padding-left: 2.0rem;   /* マーカー位置を少し右へ */
  list-style: disc;
}

.notice li {
  font-size: clamp(0.95rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: #333;
  margin: 0 0 clamp(0.4rem, 0.8vw, 0.6rem);
}