@charset "utf-8";
/* =========================================
   CTA（お問い合わせ導線）— 全ページ共通
   株式会社スリーエス

   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま（増やしていません）
   ・ボタンエリアの幅は .about-section__columns と同じ
     （= common.css の .content-inner。max-width 1200px ＋ 左右40px）
   ・色は :root の既存カラーのみを使用（新規カラーなし）
========================================= */

.cta-section {
  /* --- 表示アニメーションの順番 ---------------------------------
     セクションが画面に入った時点を 0s とした開始時間です。
     「法人向け／個人向けセキュリティ」と同じ仕組み・同じ順番です。

       0.00s  大見出し … 1文字ずつ下から上がる
              （16文字 × 0.04s ＋ 0.5s ＝ 約1.1s で終わる）
       0.70s  小見出し … 左からワイプ（0.6s なので 1.3s で終わる）
       1.30s  カード   … 左から1枚ずつ配る（0.12s ずつずれる）

     見出しの文字数を変えたときは、この2つを調整してください。
  ------------------------------------------------------------- */
  --cta-lead-delay: 0.7s;   /* 小見出しの開始 */
  --cta-cards-delay: 1.3s;  /* カードの開始（小見出しが終わってから） */

  position: relative;
  /* background-image は cta.php 側でインライン指定
     （カスタムプロパティ経由だと相対URLの解決先が参照元CSSになるため） */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: var(--color-ink);
  color: var(--color-white);
}

/*
 * 写真の上に文字を置くので、既存の --color-ink を敷いて読みやすくします。
 * 新しい色は追加せず、不透明度だけで濃さを調整しています。
 */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  opacity: 0.7;
}

.cta-section__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-60);
  padding-bottom: var(--space-60);
}

/* =========================================
   見出し
========================================= */
.cta-section__head {
  margin-bottom: var(--space-30);
  text-align: center;
}

.cta-section__title {
  color: var(--color-white);
  font-size: clamp(1.5rem, 1rem + 1vw, 2rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
  line-break: strict;
}

.cta-section__lead {
  --wipe-delay: var(--cta-lead-delay);
  margin-top: var(--space-10);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  line-break: strict;
}

/* =========================================
   3カラムのカード
========================================= */
.cta-list {
  --deal-base: var(--cta-cards-delay);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

.cta-list__item {
  min-width: 0;
}

.cta-card {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  height: 100%;
  min-width: 0;
  padding: var(--space-20);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-text-strong);
  text-align: left;
}

/* 電話カードはカード全体がリンク */
a.cta-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.cta-card:hover,
a.cta-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(var(--color-border-rgb), 0.45);
}

.cta-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 1.375rem;
  line-height: 1;
}

/* LINEだけはブランド色のままにしています */
.cta-card__icon--line {
  background: var(--color-line);
  color: var(--color-white);
  font-size: 1.75rem;
}

.cta-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  min-width: 0;
}

.cta-card__label {
  color: var(--color-text-mute);
  font-size: var(--font14-size);
  font-weight: 700;
  line-height: 1.5;
  line-break: strict;
}

.cta-card__tel {
  color: var(--color-text-strong);
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.cta-card__note {
  color: var(--color-text-mute);
  font-size: var(--font14-size);
  font-weight: 500;
  line-height: 1.5;
}

/*
 * ラベルとボタンだけのカードは、電話カードと高さがそろうように
 * 要素間を離して上下に寄せます。
 */
.cta-card--mail .cta-card__body,
.cta-card--line .cta-card__body {
  gap: var(--space-10);
  width: 100%;
}

/* カード内のボタンは、カード幅いっぱいまで伸ばす */
.cta-card__body .ts-button {
  width: 100%;
  min-width: 0;
  padding: 12px var(--space-20);
  font-size: var(--font-size-caption);
}

/* =========================================
   1439px以下：small-pc
========================================= */
@media screen and (max-width: 1439px) {
  .cta-card {
    gap: var(--space-10);
  }
}

/* =========================================
   1199px〜981px：タブレット（広め）
   3カラムは維持し、アイコンを上・テキストを下に切り替える
   （about の特長カードと同じ考え方）
========================================= */
@media screen and (max-width: 1199px) and (min-width: 981px) {
  .cta-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cta-card__body {
    align-items: center;
    width: 100%;
  }

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

  /* 3カラムのまま幅が縮むので、ボタンの左右を詰めて1行に収める */
  .cta-card__body .ts-button {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* =========================================
   980px以下：3カラムをやめて縦に1枚ずつ並べる

   ここだけPCと同じ3カラムを維持していません。
   3カラムのままだと1枚あたりの幅が足りず、
   電話番号が2行に割れ、ボタンの文字が3行になって
   ボタンが円形につぶれてしまうためです（701pxで確認）。
   縦積みにすると1枚が横に広く使えるので、
   電話番号もボタンも1行で収まります。

   980px は common.css の --width980 と同じ境界で、
   デバイス区分は増やしていません。
========================================= */
@media screen and (max-width: 980px) {
  .cta-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .cta-card__body {
    flex: 1 1 auto;
    align-items: flex-start;
  }

  .cta-card__label {
    text-align: left;
  }

  /*
   * 1枚が横に広くなるので、ボタンだけが極端に長くならないよう上限を付けます。
   * 幅が足りない画面では width:100% 側が効いて、そのまま縮みます。
   */
  .cta-card__body .ts-button {
    max-width: 360px;
  }
}

/* =========================================
   700px以下：スマートフォン
========================================= */
@media screen and (max-width: 700px) {
  .cta-section__inner {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
  }

  .cta-card__icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .cta-card__icon--line {
    font-size: 1.5rem;
  }
}

/* =========================================
   480px以下：ボタンの文字が2行に折れないように詰める
   （common.css の .sp-only / .content-inner と同じ境界）
========================================= */
@media screen and (max-width: 480px) {
  .cta-card__body .ts-button {
    gap: 8px;
    padding: 12px var(--space-10);
    font-size: var(--font14-size);
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .cta-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-10);
  }

  .cta-card__body {
    align-items: center;
  }

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