@charset "utf-8";

/* =========================================
   TOPページ専用スタイル (top.css)
========================================= */

/* --- 共通・ユーティリティ --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.top-content-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 3vw, 4rem) clamp(1.25rem, 2vw, 2.5rem);
  position: relative;
  z-index: 10;
}

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

.color-blue {
  color: #1787d8;
}

.color-orange {
  color: #ff9c00;
}

/* --- 見出しスタイル --- */
.sec-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

.sec-subtitle {
  display: inline-block;
  font-size: clamp(1rem, 1vw, 1.125rem);
  font-weight: bold;
  color: #1f286f;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

.sec-title {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.5;
  color: #333;
}

.sec-lead {
  text-align: center;
  font-size: clamp(0.9rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  margin-bottom: clamp(1.5rem, 2vw, 3rem);
}

/* =========================================
   KVエリア
========================================= */
.top-kv {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f5f9ff; /* 画像読み込み前のベース色 */
}

.kv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.kv-inner {
  position: relative;
  z-index: 2;
  width: 93%;
  max-width: 1500px;
  margin: clamp(0.625rem, 0.17rem + 2.27vw, 1.875rem) auto 0;
  padding: clamp(2rem, 4vw, 4rem) var(--fluid-padding);
}

/* PC版のGridレイアウト */
.kv-content {
  display: grid;
  /* 左側は残り幅いっぱい、右側(人物)は画像サイズに依存 */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title person"
    "products person"
    "laurels person";
  align-items: center;
  row-gap: 0;
  column-gap: 2rem;
}

/* 各エリアの割り当て */
.kv-item-title { grid-area: title; margin-top: clamp(1rem, -0.215rem + 2.53vw, 2rem);}
.kv-item-products { grid-area: products; margin: 0;}
.kv-item-laurels { grid-area: laurels; margin-bottom: clamp(1rem, -0.215rem + 2.53vw, 2rem);}
.kv-item-person { 
  grid-area: person;
  align-self: flex-end; /* 人物画像をコンテナの下部に揃える */
  display: flex;
  justify-content: flex-end;
}

/* 画像の基本設定 */
.kv-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC時の人物画像の最大幅を制御 */
.kv-item-person img { max-width: clamp(14.063rem, -4.545rem + 38.77vw, 29.375rem);}

/* =========================================
   レスポンシブ (スマホ・タブレット表示)
========================================= */
@media screen and (max-width: 787px) {
  .kv-inner {
    padding: 0 0.2rem;
  }
  
  /* スマホ・タブレット版のGridレイアウト */
  .kv-content {
    /* 左側(テキスト・製品・月桂冠)を約58%、右側(人物)を約42%の比率にキープ */
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    grid-template-areas:
      "title person"
      "products person"
      "laurels person"; /* ← 修正：月桂冠も左エリアに収める */
    row-gap: 0;
    column-gap: 10px;
    align-items: center;
  }

  /* 人物画像の位置調整 */
  .kv-item-person {
    align-self: flex-end; /* 下端揃えにして高さを合わせる */
    margin-bottom: -1rem; /* 下部へのハミ出し微調整用 */
  }
  
  .kv-item-person img {
    width: 100%; max-width: clamp(11.25rem, 3.361rem + 45.08vw, 25rem);
  }
  
  /* 各要素の余白微調整（必要に応じて変更してください） */
  .kv-item-title {
    margin-bottom: 0.5rem;
  }
  .kv-item-products {
    margin-bottom: 0.5rem;
  }
}

/* --- ニュースバナー --- */
.top-news-banner {
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 20;
  width: clamp(17.5rem, 6.25rem + 64.29vw, 62.5rem);
  max-width: 1000px;
  padding: 3rem 15px 2rem;
}
.top-news-banner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.top-news-banner a:hover img {
  transform: translateY(-2px);
}

@media screen and (max-width: 787px) {
.top-news-banner {
  padding: 2rem 0 0.5rem;
}
}

/* =========================================
   背景装飾画像設定 (アニメーションなし)
========================================= */
.bg-anim-white, .bg-anim-blue {
  position: relative;
  overflow: hidden;
  z-index: 0; /* 背景画像より手前にコンテンツを置くためのベース */
}
.bg-anim-white {
  background-color: #ffffff;
}
.bg-anim-blue {
  background-color: #e5f7ff;
}

/* --- エリア1 & エリア3: 背景画像の共通設定 --- */
.bg-line-bottom-right {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  /* 画面幅に合わせて画像サイズを可変（スマホで最小200px、PCで最大450px） */
  width: clamp(7.5rem, 1.204rem + 31.48vw, 28.75rem);
  height: clamp(23.063rem, 16.766rem + 31.48vw, 44.313rem);
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-line-top-left {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  /* 画面幅に合わせて画像サイズを可変（スマホで最小200px、PCで最大450px） */
  width: clamp(12.125rem, 6.569rem + 27.78vw, 30.875rem);
  height: clamp(6.938rem, 1.382rem + 27.78vw, 25.688rem);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 左上：erea_bg_01.webp */
.bg-line-top-left {
  top: 0;
  left: 0;
  /* CSSフォルダからの相対パス */
  background-image: url("../img/top/erea_bg_01.webp?=202608040910");
  background-position: top left;
}

/* 右下：erea_bg_02.webp */
.bg-line-bottom-right {
  bottom: 0;
  right: 0;
  /* CSSフォルダからの相対パス */
  background-image: url("../img/top/erea_bg_02.webp?=202608040910");
  background-position: bottom right;
}

/* --- 画像エリア共通 --- */
.area2-images img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- エリア3：クラウドWiFiといえば --- */
.top-area3 {
  padding: clamp(1.25rem, 0.491rem + 1.58vw, 1.875rem) 0;
}

.area3-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 見出し画像のサイズ・余白調整 */
.area3-img-01 {
  width: clamp(14.375rem, 10.116rem + 21.3vw, 28.75rem);
  margin-bottom: clamp(1.25rem, 0.88rem + 1.85vw, 2.5rem);
}
.area3-img-02 {
  width: clamp(17.5rem, 13.056rem + 22.22vw, 32.5rem);
  margin-bottom: 15px;
}
.area3-img-03 {
  width: clamp(13.75rem, 0.231rem + 67.59vw, 59.375rem);
  margin-bottom: clamp(1.25rem, 1.065rem + 0.93vw, 1.875rem);
}

/* キャッチコピー */
.area3-catch-title {
  font-size: clamp(1.2rem, 2.5vw, 2.2rem);
  color: #555;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  letter-spacing: 0.05em;
}

.area3-catch-title .color-blue {
  color: #1787d8;
}

/* グレーの説明テキストボックス */
.area3-desc-box {
  background-color: #f7f7f7;
  width: 80%;
  max-width: 960px;
  margin: 0 auto clamp(1.25rem, 0.694rem + 2.78vw, 3.125rem);
  padding: clamp(1.25rem, 1.157rem + 0.46vw, 1.563rem);
  border-radius: 4px;
  text-align: left;
}

.area3-desc-box p {
  font-size: clamp(0.813rem, 0.775rem + 0.19vw, 0.938rem);
  color: #333;
  line-height: 1.6;
  margin-bottom: 1.0em;
}

.area3-desc-box p:last-child {
  margin-bottom: 0;
}

/* アクションボタンコンテナ */
.area3-btn-container {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* 各カードの共通設定 */
.action-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  /* 上下の余白を広めにとり、画像を再現 */
  padding: clamp(1.563rem, 1.377rem + 0.93vw, 2.188rem) clamp(1rem, 3vw, 2rem) clamp(1.563rem, 1.377rem + 0.93vw, 2.188rem);
  box-shadow: 0 2px 16px rgba(0,0,0,0.28); /* 影を柔らかく広げる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: none;
  position: relative;
}

/* 上部のアクセントライン（擬似要素で作成） */
.action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* 両端に少し余白を残す */
  height: 8px; /* 線の太さ */
  border-radius: 0 0 8px 8px; /* 下の両角だけ丸くする */
}

/* 旧ボーダー指定を打ち消し（前回の記述がある場合） */
.action-card.card-primary, 
.action-card.card-secondary {
  border-top: none;
}

/* 各カードの色指定 */
.action-card.card-primary::before {
  background-color: #1f286f; /* 濃紺 */
}
.action-card.card-secondary::before {
  background-color: #1787d8; /* 水色 */
}

/* カード内のテキスト */
.action-card p {
  font-size: clamp(1rem, 0.926rem + 0.37vw, 1.25rem);
  font-weight: bold;
  color: #555;
  margin-bottom: clamp(0.938rem, 0.752rem + 0.93vw, 1.563rem);
  line-height: 1.6;
  width: 100%;
  text-align: center;
}

/* カード内のボタン */
.action-card .btn-primary, 
.action-card .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 85%; /* ボタン幅をカード幅に合わせて調整 */
  padding: 10px 10px;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  font-size: clamp(1rem, 0.815rem + 0.93vw, 1.625rem);
  text-decoration: none;
  transition: opacity 0.3s, transform 0.3s;
}

.action-card .btn-primary { background-color: #1f286f; }
.action-card .btn-secondary { background-color: #1787d8; }

.action-card .btn-primary:hover, 
.action-card .btn-secondary:hover { 
  opacity: 0.8;
  transform: translateY(-2px);
}

/* レスポンシブ (スマホ表示) */
@media screen and (max-width: 767px) {
  .area3-btn-container {
      width: 96%;
    flex-direction: column;
  }
  .action-card {
    padding: 2rem 1.5rem;
  }
  .area3-desc-box {
    width: 96%;
}
.area3-img-01 { width: 55%; min-width: 260px; margin-top: -10px; }
.area3-img-02 { width: 60%; min-width: 285px; }
.area3-img-03 {
  width: 65%; min-width: 305px;
  margin-bottom: 10px;
}
}
/* =========================================
   エリア4：クラウドSIM自社運用歴9年
========================================= */
.top-area4 {
  position: relative;
  /* 画像に合わせた鮮やかなブルーグラデーション */
  background: linear-gradient(to right, #0154d8 0%, #16bbdc 100%);
  padding: clamp(1.75rem, 1.528rem + 1.11vw, 2.5rem) 0 clamp(1.75rem, 1.528rem + 1.11vw, 2.5rem);
  z-index: 1;
  overflow: hidden; /* ← この1行を追加します */
}

/* 下部のライトグレー背景を擬似要素で表現 */
.top-area4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 白枠の背後（下半分）をカバー */
  background-color: #e2f6ff;
  z-index: -1;
}

/* 上下余白の重複を防ぐためのリセット */
.top-area4 .top-content-inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* 背面の巨大な透かし文字 */
.bg-watermark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(8rem, 16vw, 22rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  font-family: Arial, sans-serif; /* 視認性の高い太字フォント */
  letter-spacing: 0.05em;
  line-height: 0.35; /* ← 【追加】文字の上下の余白を削り、上にぴったりくっつける */
}

/* 人物＆見出し画像の配置 */
.area4-hero {
  position: relative;
  z-index: 10;
  text-align: center;
  /* 下の白枠に食い込ませるためのネガティブマージン */
  display: flex;
  justify-content: center;
}

.area4-hero img {
  width: 100%;
  max-width: 680px; /* バッジと人物のバランス調整 */
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15)); /* 立体感を少し強調 */
}

/* 全体を囲む白枠コンテナ */
.area4-feature-box {
  background-color: #ffffff;
  border-radius: 20px; /* 画像に合わせた大きな角丸 */
  /* ヒーロー画像が被る分、上部の余白（padding-top）を多めに取る */
  padding: clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px) clamp(30px, 5vw, 50px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* 柔らかく広がる影 */
  position: relative;
  z-index: 5;
}

/* カードのグリッドレイアウト */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 35px);
}

/* 各カードのスタイル */
.feature-item {
  display: flex;
  flex-direction: column;
  background-color: transparent; 
  border-radius: 0;
  box-shadow: none; /* コンテナ全体に影があるため、個別カードの影はなし */
}

/* カード内のサムネイル画像 */
.feature-img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 画像自体の角を少しだけ丸める */
  object-fit: cover;
  margin-bottom: 20px;
}

/* テキストエリア */
.feature-body {
  padding: 0; /* 画像の左端とテキストを揃える */
}

.feature-body h4 {
  font-size: clamp(1.1rem, 1.25vw, 1.3rem);
  color: #0093d9; /* 参考画像に合わせた明るいシアンブルー */
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.2;
}

.feature-body p {
  font-size: clamp(0.85rem, 0.9vw, 0.95rem);
  color: #555;
  line-height: 1.5;
  margin: 0;
}
/* =========================================
   レスポンシブ (767px以下: スマホ表示)
========================================= */
@media screen and (max-width: 767px) {
  .top-content-inner {
    padding: 2rem 15px;
  }
  
  .action-card p {
    min-height: auto;
  }
.top-area4 {
    padding: 3rem 0;
  }
.bg-watermark {
    top: 0; /* ← 【変更】5% から 0 に変更 */
    font-size: clamp(5rem, 4.63rem + 1.85vw, 6.25rem);
  }
  .area4-hero {
    margin-bottom: 0;
  }
  .area4-hero img {
    max-width: 98%;
  }
  .area4-feature-box {
    padding-top: clamp(1.625rem, 1.44rem + 0.93vw, 2.25rem); /* スマホ時の重なり調整 */
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .top-area4::after {
    height: 80%; /* コンテンツが縦長になるため、下部のグレー領域の割合を増やす */
  }
}

/* =========================================
   エリア1：クラウドWiFiとは？
========================================= */
.area1-inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem) clamp(1.25rem, 2vw, 2.5rem) clamp(2rem, 3vw, 4rem);
  position: relative;
  z-index: 10;
}

/* --- 見出し（タイトル＋サブ見出し） --- */
.area1-heading {
  text-align: center;
  margin-bottom: clamp(0.75rem, 0.231rem + 2.59vw, 2.5rem);
}
.area1-heading img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.area1-heading-title {
  max-width: clamp(13.125rem, 9.606rem + 17.59vw, 25rem);  /* 元544px相当を上限 */
  margin-bottom: clamp(1rem, 0.815rem + 0.93vw, 1.625rem);
}
.area1-heading-sub {
  max-width: clamp(18.625rem, 7.477rem + 55.74vw, 56.25rem);  /* 元1191px相当を上限 */
}

/* ステップ3点（連結矢印は各カード画像に内包） */
.area1-steps {
  grid-area: steps;
  display: flex;
  align-items: flex-start;
  gap: 0; margin: 10px auto;
}
.area1-steps img {
  display: block;
  height: auto;
}
/* 元画像の横比どおりに等倍縮小＝3枚のスケールが揃い矢印位置も合う */
.area1-steps img:nth-child(1) { width: 100%; }
.area1-steps img:nth-child(2) { width: 100%; }
.area1-steps img:nth-child(3) { width: 100%; }

/* 補足テキスト（グレーボックス） */
.area1-note {
  width: 99%; 
  grid-area: note;
  background-color: #f4f6f9;
  padding: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  color: #666;
  font-size: clamp(0.688rem, 0.665rem + 0.11vw, 0.75rem);
  line-height: 1.2; margin-left: auto; margin-right: auto;
}
.area1-note p + p {
  margin-top: 1em;
}

/* 人物＋端末 */
.area1-person {
  grid-area: person;
  align-self: end;              /* 補足ボックスの下端に揃える */
  display: flex;
  justify-content: center;
}
.area1-person img {
  display: block;
  width: 100%;
  height: auto;
  max-width: clamp(22.5rem, 13.766rem + 18.2vw, 29.688rem);  /* PC人物画像の最大幅 */
}
/* --- リード文 --- */
.area1-lead {
  grid-area: lead; /* Gridエリア指定を追加 */
  font-size: clamp(0.875rem, 0.764rem + 0.56vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  color: #333;
  margin-top: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /* マージンをリセット */
  margin-bottom: 0px; /* マージンをリセット */
}

/* --- メイン：PC = 左（リード文＋ステップ＋補足）／右（人物） --- */
.area1-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lead   person"
    "steps  person"
    "note   person";
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 0; /* リード文・ステップ・補足間の縦間隔を調整 */
}
/* =========================================
   エリア1：レスポンシブ（767px以下＝スマホ・タブレット）
========================================= */
@media screen and (max-width: 1080px) {
  .area1-inner {
      width: 80%;
    padding: 1rem 15px 1rem;
  }
.area1-steps {
  margin: -10px auto;
}

  /* ステップは3列並びのまま維持 */
  .area1-steps {
    gap: 0;
  }

  /* 1カラムに再構成：リード文 → ステップ → 補足 → 人物 */
  .area1-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "steps"
      "note"
      "person";
    row-gap: clamp(1.25rem, 4vw, 1.75rem);
  }

}
/* =========================================
   エリア1：レスポンシブ（767px以下＝スマホ・タブレット）
========================================= */
@media screen and (max-width: 767px) {
  .area1-inner {
      width: 98%;
  }}

/* =========================================
   エリア2：選ばれる理由 専用スタイル
========================================= */

/* --- 背景装飾画像 --- */
.bg-area2-top-left {
  position: absolute; pointer-events: none; z-index: -1;
  width: clamp(200px, 35vw, 450px); height: clamp(200px, 35vw, 450px);
  background-repeat: no-repeat; background-size: contain;
  top: 0; left: 0;
  background-image: url("../img/top/erea2_bg_01.webp?=202608040910");
  background-position: top left;
}

.bg-area2-bottom-right {
  position: absolute; pointer-events: none; z-index: -1;
  width: clamp(200px, 35vw, 450px); height: clamp(200px, 35vw, 450px);
  background-repeat: no-repeat; background-size: contain;
  bottom: 0; right: 0;
  background-image: url("../img/top/erea2_bg_02.webp?=202608040910");
  background-position: bottom right;
}

/* --- 全体のコンテナ --- */
.area2-inner {
  width: 100%; max-width: 1480px;
  margin: 0 auto;
  padding: clamp(1.875rem, 0.949rem + 4.63vw, 5rem) clamp(1.25rem, 2vw, 2.5rem) clamp(1.25rem, 0.139rem + 5.56vw, 5rem);
  position: relative; z-index: 10;
}

/* --- 見出しエリア --- */
.area2-heading {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.area2-heading img {
  display: block; width: 100%; height: auto; margin-inline: auto;
}
/* ▼ 見出し上段（クラウドWiFiが選ばれる理由）のサイズ調整 */
.area2-heading-title {
  max-width: clamp(18.75rem, 1.282rem + 36.39vw, 33.125rem); /* ← ここでサイズ調整 */
  margin-bottom: clamp(1.25rem, 0.88rem + 1.85vw, 2.5rem);
}
/* ▼ 見出し下段（手間・不安・ムダを〜）のサイズ調整 */
.area2-heading-sub {
  max-width: clamp(21.25rem, -12.168rem + 69.62vw, 48.75rem); /* ← ここでサイズ調整 */
}

/* --- メイン：PC版は左（人物）／右（ステップ＋補足） --- */
.area2-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "person steps"
    "person note";
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 2.5rem); /* 人物とステップカードの間の余白 */
  row-gap: clamp(1.25rem, 2vw, 2rem);
}

/* --- ステップ3点 --- */
.area2-steps {
  grid-area: steps;
  display: flex; align-items: flex-start; gap: 0; margin: 10px auto -10px ;
}
.area2-steps img { display: block; height: auto; width: 100%; }

/* --- 補足テキスト --- */
.area2-note {
  width: 99%; grid-area: note;
  background-color: #fffdf2; /* エリア1と少し色を変えたい場合はここで調整 (#f4f6f9 など) */
  padding: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  color: #666;
  font-size: clamp(0.688rem, 0.665rem + 0.11vw, 0.75rem);
  line-height: 1.2; margin-left: auto; margin-right: auto;
}
.area2-note p + p { margin-top: 1em; }

/* --- 人物エリア --- */
.area2-person {
  grid-area: person;
  align-self: end;
  display: flex; justify-content: center;
}
/* ▼ 人物画像のサイズ調整 */
.area2-person img {
  display: block; width: 100%; height: auto;
  max-width: clamp(20.625rem, 10.752rem + 20.57vw, 28.75rem); /* ← ここでサイズ調整 */
}


/* =========================================
   レスポンシブ (1080px以下 / タブレット・スマホ)
========================================= */
@media screen and (max-width: 1080px) {
  .area2-inner { 
    width: 80%; padding-bottom: 0.6rem;
  }
  .area2-steps { 
    margin: -10px auto; 
  }
  /* 1カラムに再構成：ステップ → 補足 → 人物 */
  .area2-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "steps"
      "note"
      "person";
    row-gap: clamp(1.25rem, 4vw, 1.75rem);
  }
}

@media screen and (max-width: 767px) {
  .area2-inner { 
    width: 98%;
  }
}