@charset "UTF-8";
/*
  shared/_static_closingcta.html.erb 専用CSS
  スコープ: .closing_cta 配下のみ

  共有パーシャルなのでページ固有CSS(func-ai.css 等)には依存させない。
  コンポーネント単位のCSSなので _sp に分けず、末尾に @media (max-width: 768px) をまとめる。
  <link> はパーシャル自身の先頭に置いてあるので、読み込むページにだけ配信される。

  旧デザインの shared/_static_etc_link.html / shared/_static_closing.html.erb が使う
  .site-link / .cv_area / .cv_link / .cv_btn / .closing_cv は common.css・common_sp.css に
  強い指定(!important 含む)があるため、意図的に再利用せず closing_cta_ 接頭辞で作り直している
*/

/* ---------

セクション枠

------------*/
.closing_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 96px 0 104px;
  background: #F6F9F9;
}

/* ---------

見出し

------------*/
.closing_cta_head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 672px;
  color: #384D4D;
  text-align: center;
}
.closing_cta_ttl {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  /* Figma の垂直トリム（キャップハイト〜ベースライン）を再現し、行の上下余白を削る */
  text-box: trim-both cap alphabetic;
}
.closing_cta_lead {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.5;
  text-box: trim-both cap alphabetic;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .closing_cta_ttl {
    margin-top: -16px;
    margin-bottom: -16px;
  }
  .closing_cta_lead {
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

.closing_cta_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* ---------

コンテンツリンク（白ボタン6個）

------------*/
.closing_cta_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 16px;
  width: 954px;
}
.closing_cta_links li {
  width: 307px;
}
/*
  Figma はラベルをボタン中央より 2.5px 下に置いている。
  padding-top 5px ＋ 垂直中央寄せで、その位置（上から 16.5px）を再現する
*/
.closing_cta_link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  padding: 5px 0 0 30px;
  border: 1px solid #519999;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(70, 145, 129, 0.25);
  color: #1C9898;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.04em;
  transition: 0.2s ease;
}
/* ホバーの動きは TOP の #feature .index_btn:hover（index.css:744）に合わせる（拡大はしない） */
.closing_cta_link:hover {
  opacity: 0.85;
  box-shadow: 0px 2px 24px 0px #15787833;
  border: 1px solid #85caca;
  transition: 0.2s ease;
}
/*
  Figma の「Group 3409」（#1C9898 の円＋白い山括弧）を画像を使わず疑似要素で描く。
  同じ AI機能ページの .ai_feature_btn (func-ai.css:409-460) が同一形状を疑似要素で作っているので、
  円の直径・山括弧の寸法ともそちらに揃えた（共有パーシャルなので CSS は独立させ、値だけ合わせている）
*/
.closing_cta_link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 25px;
  width: 24.609px;
  height: 24.609px;
  border-radius: 50%;
  background: #1C9898;
  transform: translateY(-50%);
}
/*
  right は円の中心＝ボタン右端から 37.3px（= ::after の right 25px + 直径 24.609px の半分）に合わせ、
  transform の translate(50%, -50%) でその点に要素の中心を重ねる。
  ただし45度回転した山括弧は、描画される墨（上辺と右辺の2本）が正方形の中心より
  右へ「1辺 ÷ 2√2」＝ 6.7 ÷ 2.828 ≒ 2.37px 寄るので、その分だけ左へ戻して見た目を中心に合わせる
*/
.closing_cta_link::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 37.3px;
  z-index: 1;
  width: 6.7px;
  height: 6.7px;
  border: 2px solid #fff;
  border-width: 2px 2px 0 0;
  transform: translate(calc(50% - 2.37px), -50%) rotate(45deg);
}

/* ---------

CVボタン3個

------------*/
.closing_cta_cv {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
/*
  Figma は中身をボタン中央より 3px 下に置いている。
  padding-top 6px ＋ 垂直中央寄せで、その位置（上から 17.5px）を再現する
*/
.closing_cta_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 364px;
  height: 90px;
  padding-top: 6px;
  border-radius: 10px;
  box-shadow: 0 4px 6.4px rgba(70, 145, 129, 0.3);
  color: #fff;
  transition: 0.2s ease;
}
/* .closing_cta_link:hover と同じ考え方。0 4px 6.4px 0.3 → 0 0 14px 0.25 */
.closing_cta_btn:hover {
  opacity: 1;
  box-shadow: 0 0 14px 0 rgba(70, 145, 129, 0.25);
  transform: scale(1.03);
  transition: 0.2s ease;
}
.closing_cta_btn_document {
  background: linear-gradient(82.69deg, #F20066 4%, #F27400 102.07%);
}
.closing_cta_btn_meeting {
  background: linear-gradient(82.69deg, #2AC3AC 4%, #B3D120 102.07%);
}
.closing_cta_btn_contact {
  border: 1px solid #519999;
  background: #fff;
  color: #1C9898;
}
.closing_cta_btn_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 278px;
}
/*
  Figma の区切り線はフレーム内側に引かれており、箱の高さ21px = テキスト11px + 下余白10px（線を含む）。
  CSS では border が高さに乗るので padding-bottom を 9px にして 21px に合わせる
*/
.closing_cta_btn_sub {
  display: block;
  width: 100%;
  padding-bottom: 9px;
  border-bottom: 1px solid #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: -0.04em;
  text-align: center;
  text-box: trim-both cap alphabetic;
}
.closing_cta_btn_contact .closing_cta_btn_sub {
  border-bottom-color: #519999;
  color: #1C9898;
}
.closing_cta_btn_main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 32px;
  padding-right: 3px;
}
.closing_cta_btn_contact .closing_cta_btn_main {
  gap: 8px;
  padding-right: 0;
}
.closing_cta_btn_icon {
  width: 30.15px;
  height: 30.15px;
}
.closing_cta_btn_label {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  text-box: trim-both cap alphabetic;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .closing_cta_btn_sub {
    margin-top: -6px;
  }
  .closing_cta_btn_label {
    margin-top: -9px;
    margin-bottom: -9px;
  }
}

/* ==========================================================

SP

========================================================== */
@media (max-width: 768px) {
  .closing_cta {
    gap: 40px;
    padding: 64px 24px 72px;
  }
  /*
    タブレット幅でもコンテンツ幅を 600px に揃える（375px では内寸 327px なので効かない）。
    背景はセクション(.closing_cta)全体に敷いているので、1つの器で包まず head と body をそれぞれ止める。
    親の .closing_cta が align-items: center なので位置は自動で中央
  */
  .closing_cta_head {
    gap: 32px;
    width: 100%;
    max-width: 600px;
  }
  .closing_cta_ttl {
    font-size: 2.4rem;
    letter-spacing: 0.12em;
  }
  .closing_cta_lead {
    font-size: 1.6rem;
  }
  @supports not (text-box: trim-both cap alphabetic) {
    .closing_cta_ttl {
      margin-top: -10px;
      margin-bottom: -10px;
    }
    .closing_cta_lead {
      margin-top: -6px;
      margin-bottom: -6px;
    }
  }

  .closing_cta_body {
    gap: 39px;
    max-width: 600px;
  }

  /*
    タブレット幅では 157px 固定だと1行に4個入り、2段目の中央が空くので、li を「半分 − 横の余白 13px の半分」にして2列を保つ
    （375px の内寸 327px で 157px になり Figma と一致）。
    ただし 157px を下限にして、内寸が 327px 未満の狭い端末ではこれまで通り 157px のままにする
  */
  .closing_cta_links {
    row-gap: 13px;
    width: 100%;
  }
  .closing_cta_links li {
    width: max(157px, calc(50% - 6.5px));
  }
  .closing_cta_link {
    height: 46px;
    padding: 5px 0 0 14px;
    box-shadow: 0 2px 5px 0 rgba(70, 145, 129, 0.25);
    font-size: 1.4rem;
    letter-spacing: normal;
  }
  .closing_cta_link::after {
    right: 10.32px;
    width: 16px;
    height: 16px;
  }
  /* PC と同じ計算。1辺 4.36px ÷ 2√2 ≒ 1.54px 左へ戻す */
  .closing_cta_link::before {
    right: 18.32px;
    width: 4.36px;
    height: 4.36px;
    border-width: 1.3px 1.3px 0 0;
    transform: translate(calc(50% - 1.54px), -50%) rotate(45deg);
  }

  .closing_cta_cv {
    flex-direction: column;
    gap: 20px;
  }
  .closing_cta_btn {
    width: 100%;
    height: 80px;
    box-shadow: 0 3px 3.4px rgba(70, 145, 129, 0.3);
  }
  /* 0 3px 3.4px 0.3 → 0 0 7.6px 0.25 */
  .closing_cta_btn:hover {
    box-shadow: 0 0 7.6px 0 rgba(70, 145, 129, 0.25);
  }
  .closing_cta_btn_document {
    background: linear-gradient(83.57deg, #F20066 4%, #F27400 102.07%);
  }
  .closing_cta_btn_meeting {
    background: linear-gradient(83.57deg, #2AC3AC 4%, #B3D120 102.07%);
  }
  .closing_cta_btn_inner {
    gap: 4px;
  }
  .closing_cta_btn_sub {
    font-size: 1.4rem;
  }
  .closing_cta_btn_label {
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  @supports not (text-box: trim-both cap alphabetic) {
    .closing_cta_btn_sub {
      margin-top: -6px;
    }
    .closing_cta_btn_label {
      margin-top: -8px;
      margin-bottom: -8px;
    }
  }

  /*
    タブレット（768px ちょうど＝iPad mini 縦）。
    このファイルは PC でも読み込まれるので、単独の @media (min-width: 768px) にすると PC にも効いてしまう。
    SP ブロックの中に入れ子にして 768px だけに絞る。375px では効かない max-width も、768px 用だと分かるようここに置く
  */
  @media (min-width: 768px) {
    /*
      器(.closing_cta_body)は 600px だが、リンク群と CV ボタンが横に長くなりすぎるのでこのパーツだけ 480px で止める。
      ボタン単体ではなく並びの ul に付けて、3つ（リンクは6つ）をまとめて止める。
      親の .closing_cta_body が align-items: center なので位置は自動で中央。
      リンクの li は calc(50% - 6.5px) なので、ul を止めても2列のまま
    */
    .closing_cta_links,
    .closing_cta_cv {
      max-width: 480px;
    }
  }
}