/* ==========================================================================
   1. メインビジュアルエリア (.main_visual)
   ========================================================================== */
/* メインビジュアルの内側を包むコンテナ */
.main_visual .main_visual__inner {
  position: relative; /* 子要素（h2など）の絶対配置の基準点 */
}
/* メインビジュアル内の見出し（キャッチコピーの背景） */
.main_visual .main_visual__inner h2 {
  position: relative;
  z-index: 1; /* スライダー画像より前面に表示 */
  /* 画面幅（320px〜1200px）に応じて20px〜52pxの間でフォントサイズを動的変更 */
  font-size: clamp(20px, calc(20px + 32 * ((var(--vw) * 100) - 320px) / 880), 52px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  width: fit-content; /* テキストの長さに幅を合わせる */
  margin-top: -0.76em; /* 画像に少し被せるためのネガティブマージン */
  margin-bottom: 0;
  padding: 0.76em 1.73em 0 0;
  background-color: #fff; /* テキストの背景を白に */
  border-radius: 0 0.38em 0 0; /* 右上のみ角丸 */
}
/* 見出し内のテキスト（グラデーション文字の設定） */
.main_visual .main_visual__inner h2 span {
  display: block;
  color: transparent; /* 背景グラデーションを透過して見せるため文字色を透明に */
  background-image: linear-gradient(45deg, #187042 0%, #7FBF65 100%); /* 緑系のグラデーション */
  -webkit-background-clip: text; /* テキストの形に背景をくり抜く（Safari/Chrome用） */
  background-clip: text; /* テキストの形に背景をくり抜く */
  opacity: 1.0; /* 最初から100%表示 */
  transform: none; /* 位置移動のアニメーションを排除 */
}
/* PCサイズ（980px以上）のスタイル調整 */
@media screen and (min-width: 980px) {
  .main_visual .main_visual__inner h2 {
    position: absolute; /* 画像の左下に絶対配置 */
    bottom: 0;
    left: min(2.92%, 56px); /* 画面幅に応じて左余白を可変（最大56px） */
  }
}
/* スライダー（Swiper）全体のコンテナ */
.main_visual .main_visual__inner .main_visual__img {
  width: 83.07%;
  max-height: 800px;
  /* 画面右端まで画像を一杯に広げるためのマージン計算 */
  margin-right: calc(((var(--vw) * 50) - 50%) * -1);
  margin-left: auto; /* 右寄せ */
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に固定 */
}
/* スライダー内の各画像 */
.main_visual .main_visual__inner .main_visual__img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を維持したままエリアを埋め尽くす */
  object-position: right min(1.886%, 20px); /* 画像の切り抜き位置を右側基準に固定 */
}
/* Swiper プログレスバー（時間経過インジケーターの土台） */
.main_visual .main_visual__inner .main_visual__img .swiper-progressbar {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
/* Swiper プログレスバーの動くゲージ部分 */
.main_visual .main_visual__inner .main_visual__img .swiper-progressbar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  background-color: #019742;
  /* 各ブラウザ用の初期状態（幅ゼロ）の設定 */
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  transform-origin: left center; /* 左端を起点に伸びるように設定 */
  transition-timing-function: linear; /* 一定の速度でアニメーション */
}
/* ==========================================================================
   2. アバウトエリア (.home_about)
   ========================================================================== */
/* 事務所概要セクション全体の余白設定 */
.home_about {
  /* 画面幅に応じて可変する上部マージンの計算 */
  margin-top: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.66);
}
/* 事務所概要の画像（スマホ表示ではテキストの右に回り込み） */
.home_about .home_about__rows .home_about__img {
  width: min(38.46%, 525px);
  margin-left: min(5%, 60px);
  float: right; /* 右に回り込み */
}
/* 事務所概要の本文テキスト */
.home_about .home_about__rows .home_about__text p {
  letter-spacing: 0.04em;
  line-height: 2.0;
}
/* 本文テキストの最後の要素の余白を消去 */
.home_about .home_about__rows .home_about__text p:last-child {
  margin-bottom: 0;
}
/* 回り込み（float）を解除するための設定 */
.home_about .button {
  clear: both;
}
/* PCサイズ（980px以上）のレイアウト切り替え */
@media screen and (min-width: 980px) {
  .home_about {
    position: relative;
    z-index: 1;
  }
  /* 横並びのフレックスボックスに変更 */
  .home_about .home_about__rows {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; /* 画像を右、テキストを左に入れ替え */
    gap: min(5%, 60px); /* 要素間の余白 */
  }
  /* 画像とテキストブロックの伸縮比率を均等に */
  .home_about .home_about__rows .home_about__img,
  .home_about .home_about__rows .home_about__text {
    flex-grow: 1;
    flex-basis: 525px;
  }
  /* PCではfloatを解除 */
  .home_about .home_about__rows .home_about__img {
    margin-left: 0;
    float: none;
  }
}
/* ==========================================================================
   3. ビジネスエリア (.home_business)
   ========================================================================== */
/* 業務案内セクションの上部マージン */
.home_business {
  margin-top: clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px);
}
/* 業務一覧のグリッド（フレックス）コンテナ */
.home_business .business_list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 15px min(1.35%, 15px); /* 各パネルの間隔 */
}
/* 業務案内パネル（個別カード）の初期状態（アニメーション前） */
.home_business .business_list li {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; /* 下詰めで要素を配置 */
  position: relative;
  z-index: 1;
  flex-basis: calc(50% - (min(1.35%, 15px))); /* スマホ時は2カラム（2列並び） */
  color: #fff;
  padding: min(11.11%, 40px) min(5%, 40px);
  aspect-ratio: 3 / 4; /* カードの比率を3:4に固定 */
  /* アニメーション用の初期値：透明かつ下に15%下がった状態 */
  opacity: 0;
  -webkit-transform: translateY(15%);
  -moz-transform: translateY(15%);
  -ms-transform: translateY(15%);
  -o-transform: translateY(15%);
  transform: translateY(15%);
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -ms-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
}
/* パネル内の見出し（h4） */
.home_business .business_list li h4 {
  font-size: clamp(16px, calc(16px + 8 * ((var(--vw) * 100) - 320px) / 880), 24px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: 1.0em;
}
.home_business .business_list li h4 a {
  color: inherit;
  text-decoration: none;
}
/* リンクの判定をカード全体に広げるための擬似要素 */
.home_business .business_list li h4 a::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
}
/* パネル内の説明文（p） */
.home_business .business_list li p {
  flex-grow: 1;
  font-size: clamp(12px, calc(12px + 4 * ((var(--vw) * 100) - 320px) / 880), 16px);
  line-height: 2.0;
  letter-spacing: 0.04em;
}
/* パネルの背景画像配置エリア */
.home_business .business_list li .business_list__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* テキストの後ろに配置 */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 背景画像自体の設定（ホバー時に拡大するトランジション付き） */
.home_business .business_list li .business_list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
/* 文字の視認性を確保するため、画像の上に敷く黒グラデーションのオーバーレイ */
.home_business .business_list li .business_list__img::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(32, 32, 32, 0) 0%, #202020 100%);
}
/* パネル右下の矢印アイコン */
.home_business .business_list li::after {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  margin-left: auto; /* 右寄せ */
  background: url("../img/icon_arrow_white.svg") no-repeat 50% 50%/contain;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
/* リストアイテムの角丸制御 (スマホ時：2カラム用の外周角丸設定) */
.home_business .business_list li:nth-child(1) .business_list__img {
  border-radius: 1.25em 0 0 0; /* 左上を角丸に */
}
.home_business .business_list li:nth-child(2) .business_list__img {
  border-radius: 0 1.25em 0 0; /* 右上を角丸に */
}
.home_business .business_list li:nth-last-child(1) .business_list__img {
  border-radius: 0 0 1.25em 0; /* 右下を角丸に */
}
.home_business .business_list li:nth-last-child(2) .business_list__img {
  border-radius: 0 0 0 1.25em; /* 左下を角丸に */
}
/* ホバー時の画像拡大エフェクト */
.home_business .business_list li:hover .business_list__img img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2); /* 1.2倍に拡大 */
}
/* ホバー時の矢印アイコンスライドエフェクト */
.home_business .business_list li:hover::after {
  -webkit-transform: translateX(0.5em);
  -moz-transform: translateX(0.5em);
  -ms-transform: translateX(0.5em);
  -o-transform: translateX(0.5em);
  transform: translateX(0.5em); /* 右に0.5文字分ずらす */
}
/* PCサイズ（980px以上）のレイアウト切り替え */
@media screen and (min-width: 980px) {
  /* 3カラム（3列並び）の幅に再計算 */
  .home_business .business_list li {
    flex-basis: calc(33.33% - (min(1.35%, 15px) - (min(1.35%, 15px) / 3)));
  }
  /* リストアイテムの角丸制御 (PC: 3カラム用の外周角丸に上書きリセット) */
  .home_business .business_list li:nth-child(2) .business_list__img {
    border-radius: 0; /* 上中央は角丸なし */
  }
  .home_business .business_list li:nth-child(3) .business_list__img {
    border-radius: 0 1.25em 0 0; /* 右上を角丸に */
  }
  .home_business .business_list li:nth-last-child(2) .business_list__img {
    border-radius: 0; /* 下中央は角丸なし */
  }
  .home_business .business_list li:nth-last-child(3) .business_list__img {
    border-radius: 0 0 0 1.25em; /* 左下を角丸に */
  }
}
/* スクロール連動アニメーション用のクラス（JavaScript等で付与） */
.home_business .business_list.is-animated li {
  opacity: 1.0; /* 100%表示 */
  /* 元の位置（垂直移動なし）に戻す */
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
/* 各パネルが左から順番に時間差（フェードイン）で表示されるよう遅延を設定 */
.home_business .business_list.is-animated li:nth-child(1) { transition-delay: 0s; }
.home_business .business_list.is-animated li:nth-child(2) { transition-delay: .2s; }
.home_business .business_list.is-animated li:nth-child(3) { transition-delay: .4s; }
.home_business .business_list.is-animated li:nth-child(4) { transition-delay: .6s; }
.home_business .business_list.is-animated li:nth-child(5) { transition-delay: .8s; }
.home_business .business_list.is-animated li:nth-child(6) { transition-delay: 1s; }
/* ==========================================================================
   4. コンテンツ・下部リンク・マップエリア (.home_content / .google-map)
   ========================================================================== */
/* 下部コンテンツをまとめる背景付きエリア */
.home_content {
  position: relative;
  z-index: 1;
  margin-top: clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px);
  padding-top: 2.5em;
  overflow: hidden;
}
/* 2つ並ぶ大型リンクボタン（バナー）のコンテナ */
.home_content .home_link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1.5em min(7.2%, 80px);
  margin-bottom: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.66);
}
/* 個別の大型リンクボタン（白背景の角丸カード形式） */
.home_content .home_link .home_link__bnr {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; /* 中央揃えで縦並び */
  position: relative;
  flex-grow: 1;
  flex-basis: 408px;
  margin-bottom: 0;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 1.25em;
  aspect-ratio: 103 / 40; /* アスペクト比の設定 */
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
/* バナー内のアイコン（フォントアイコン） */
.home_content .home_link .home_link__bnr .home_link__icon {
  font-size: 2.75em;
  color: #019742;
}
/* バナー内のテキストリンク */
.home_content .home_link .home_link__bnr a {
  font-size: clamp(16px, calc(16px + 8 * ((var(--vw) * 100) - 320px) / 880), 24px);
  font-weight: 500;
  color: #202020;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  margin-top: 1.0em;
}
/* ボタン全体のクリック判定を有効化する擬似要素 */
.home_content .home_link .home_link__bnr a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
}
/* バナー右下の緑の矢印アイコン */
.home_content .home_link .home_link__bnr::after {
  position: absolute;
  right: 1.5em;
  bottom: 1.5em;
  content: '';
  width: 1.25em;
  height: 1.25em;
  background: url("../img/icon_arrow_green.svg") no-repeat 50% 50%/contain;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
/* バナーホバー時に枠線の色を変更 */
.home_content .home_link .home_link__bnr:hover {
  border-color: #7FBF65;
}
/* バナーホバー時に右下の矢印を右にスライド */
.home_content .home_link .home_link__bnr:hover::after {
  -webkit-transform: translateX(0.5em);
  -moz-transform: translateX(0.5em);
  -ms-transform: translateX(0.5em);
  -o-transform: translateX(0.5em);
  transform: translateX(0.5em);
}
/* アクセスセクションの見出し調整 */
.home_content .home_access .headline {
  text-align: center;
  margin-bottom: 0;
  padding-left: 0;
}
/* 見出しの下線（装飾）設定 */
.home_content .home_access .headline::after {
  position: static;
  height: 5.0rem;
  margin: 2.5rem auto 0;
}
/* 背景装飾用の画像エリア */
.home_content .home_content__img {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1; /* コンテンツの後ろ側 */
  width: 100%;
  height: 73.42%;
  overflow: hidden;
  border-radius: 0 1.25em 0 0;
}
.home_content .home_content__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PCサイズ時の装飾画像幅調整（右側に少し余白を空ける） */
@media screen and (min-width: 980px) {
  .home_content .home_content__img {
    width: calc(100% - min(5%, 96px));
  }
}
/* 薄緑色の背景色の面を作る擬似要素 */
.home_content::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2; /* 装飾画像よりもさらに後ろ側 */
  content: '';
  width: 100%;
  height: 100%;
  background-color: #e8f3e3;
  border-radius: 1.25em 0 0 0;
}
/* PCサイズ時の薄緑背景の幅調整（左側に少し余白を空ける） */
@media screen and (min-width: 980px) {
  .home_content::after {
    width: calc(100% - min(5%, 96px));
  }
}
/* Googleマップの埋め込みエリア（最大の高さを制限） */
.google-map {
  max-height: 420px;
}