@charset "utf-8";
/* =========================================
   Service Section（法人向け／個人向けセキュリティ）
   株式会社スリーエス

   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 の4段のまま
   ・980px / 480px は common.css にすでにある境界
     （--width980 / .sp-only・.content-inner の480px）に合わせた
     コンポーネント内の微調整で、デバイス区分は増やしていません
   ・法人向け／個人向けの両方で流用します
========================================= */

.service-section {
  /* 幅 */
  --sc-max: 1920px;              /* セクション幅の上限 */
  --sc-cards-width: 95%;         /* カードエリアはインナーの95% */
  --sc-radius: clamp(6px, 0.6vw, 10px);
  /* 見出しブロックを画像の下端よりどれだけ下げるか */
  --sc-body-drop: var(--space-40);
  /* 説明文の最大行数（写真が隠れすぎないように） */
  --sc-desc-lines: 3;

  /* --- 表示アニメーションの順番 ---------------------------------
     セクションが画面に入った時点を 0s とした開始時間です。

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

     速さを変えるときは、この2つの数字だけを触れば
     全体の順番がくずれません。
  ------------------------------------------------------------- */
  --sc-lead-delay: 0.55s;   /* 小見出しの開始 */
  --sc-cards-delay: 1.15s;  /* カードの開始（小見出しが終わってから） */

  /* 文字サイズ（aboutの見出しサイズから派生させる） */
  --sc-title: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); /* about-section__title と同値 */
  --sc-lead: calc(var(--sc-title) * 0.5);           /* 大見出しの半分 */
  --sc-card-title: calc(var(--sc-lead) * 0.8);      /* 小見出しの80% */
}

.service-section__inner {
  width: 100%;
  max-width: var(--sc-max);
  margin: 0 auto;
  /* 1920pxで60px → 1200pxで40px まで段階的に縮む */
  padding-left: clamp(var(--container-padding-pc), 0.42rem + 2.78vw, var(--space-60));
  padding-right: clamp(var(--container-padding-pc), 0.42rem + 2.78vw, var(--space-60));
}

/* =========================================
   タイトルエリア
========================================= */
.service-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(var(--space-20), 4vw, var(--space-60));
  margin-bottom: var(--space-40);
}

.service-section__title {
  color: var(--color-teal);
  font-size: var(--sc-title);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.service-section__lead {
  --wipe-delay: var(--sc-lead-delay);
  min-width: 0;
  max-width: 18em;
  color: var(--color-text-strong);
  font-size: var(--sc-lead);
  font-weight: 700;
  line-height: 1.5;
  line-break: strict;
}

.service-section__action {
  justify-self: end;
}

/* =========================================
   カードエリア
========================================= */
.service-section__cards {
  width: var(--sc-cards-width);
  margin: 0 auto;
}

.service-cards__list {
  --deal-base: var(--sc-cards-delay);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-20), 2vw, var(--space-40));
}

.service-cards__item {
  min-width: 0;
}

/* --- カード（全体がリンク） --- */
.service-card {
  position: relative;
  display: block;
  min-width: 0;
  /* 見出しブロックが画像より下に出る分の高さを確保する */
  padding-bottom: var(--sc-body-drop);
}

/* アイキャッチ：縦横中央でマスキング */
.service-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 7 / 8;
  border-radius: var(--sc-radius);
  background: var(--color-surface);
}

.service-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.service-card:hover .service-card__thumb img {
  transform: scale(1.05);
}

/* -----------------------------------------
   白の見出しブロック：カード右下に重ねる

   角丸は親（カード）の外周と連続させる：
     左上 … 内側にえぐれた角丸（ノッチ）
            白を角丸で削ることで、下の写真が丸く食い込んで見える
     右上 … カード右辺とそのまま連続（角丸なし）
     右下 … カードの外周角丸
     左下 … 左のタブと隙間なく接する（角丸なし）
   カード左下の「通常の外側角丸」は .service-card__thumb 側が担当します。

   bottom: 0 はカードのパディングボックス基準なので、
   .service-card の padding-bottom（= --sc-body-drop）ぶん
   画像の下端より下にずれます。文章が長いカードは上へ伸び、
   下端は全カードで揃います。
----------------------------------------- */
.service-card__body {
  position: absolute;
  left: var(--sc-body-inset, 22%);
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-10) var(--space-20) var(--space-20);
  background: var(--color-white);
  border-radius: var(--sc-radius) 0 var(--sc-radius) 0;
}

/*
 * 右上・左下の「外周に連続する角丸」
 * 白い四角から1/4円だけ抜いたパーツを重ね、
 * 下の写真の角が丸く見えるようにしています。
 *   ::before … ブロックの真上（写真の右下角）
 *   ::after  … ブロックの左隣（左タブの右下角）
 */
.service-card__body::before,
.service-card__body::after {
  content: "";
  position: absolute;
  width: var(--sc-radius);
  height: var(--sc-radius);
  background: radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0) var(--sc-radius),
    var(--color-white) calc(var(--sc-radius) + 0.5px)
  );
}

.service-card__body::before {
  right: 0;
  bottom: 100%;
}

.service-card__body::after {
  right: 100%;
  /* 左タブ（画像）の下端に合わせる */
  bottom: var(--sc-body-drop);
}

.service-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  color: var(--color-ink);
  font-size: var(--sc-card-title);
  font-weight: 700;
  line-height: 1.5;
  line-break: strict;
}

.service-card__title i {
  flex: 0 0 auto;
  color: var(--color-teal);
  font-size: 0.9em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__title i {
  transform: translateX(4px);
}

/*
 * 説明文は --sc-desc-lines 行で打ち切ります。
 * 抜粋が長くても写真の隠れる量が一定になります。
 * はみ出した文字は非表示になるだけで、HTMLには残ります。
 */
.service-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sc-desc-lines);
  line-clamp: var(--sc-desc-lines);
  overflow: hidden;
  margin-top: var(--space-10);
  color: var(--color-base);
  font-size: var(--font14-size);
  font-weight: 500;
  line-height: 1.7;
  overflow-wrap: normal;
  line-break: strict;
}

/* =========================================
   1439px以下：small-pc
========================================= */
@media screen and (max-width: 1439px) {
  .service-section__head {
    margin-bottom: var(--space-30);
  }
}

/* =========================================
   1199px以下：タブレット
   カードは2列2行（701pxまで維持）
========================================= */
@media screen and (max-width: 1199px) {
  .service-section {
    --sc-card-title: clamp(var(--font-size-caption), 0.7rem + 0.8vw, var(--font18-size));
  }

  .service-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2列だとカード幅が広くなるため、画像を正方形にして高くなりすぎないようにする */
  .service-card__thumb {
    aspect-ratio: 1 / 1;
  }

  .service-card {
    --sc-body-inset: 18%;
  }
}


@media screen and (max-width: 1199px) and (min-width: 981px) {
  .service-section__lead br {
    display: none;
  }
}

/* =========================================
   980px以下：タイトルを縦積み・左寄せにする
   （横並びのままだと大見出し＋小見出し＋ボタンが窮屈になるため）
========================================= */
@media screen and (max-width: 980px) {
  .service-section__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-10);
    text-align: center;
	
  }

  .service-section__title {
    white-space: normal;
  }

  /* 小見出しとボタンのあいだを20px空ける */
  .service-section__action {
    justify-self: center;
    margin-top: var(--space-20);
  }
  
  .service-section__lead {
    max-width: none;
  }
}

/* =========================================
   700px以下：スマートフォン
   カードは1行の横スワイプ（1枚80%）
========================================= */
@media screen and (max-width: 700px) {
  .service-section__inner {
    padding-left: var(--container-padding-sp);
    padding-right: var(--container-padding-sp);
  }

  .service-section__head {
    margin-bottom: var(--space-20);
  }

  .service-section__action {
    width: 100%;
  }

  .service-section__cards {
    width: 100%;
  }

  .service-cards__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--space-20);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .service-cards__list::-webkit-scrollbar {
    display: none;
  }

  .service-cards__item {
    scroll-snap-align: start;
  }

  /* 横スクロールで画面外にあるカードは個別に判定できないため、
     リストが画面に入った時点でまとめて表示する（横のずれは無し） */
  .service-cards__item.reveal-deal {
    transform: none;
  }

  .service-cards__list.is-inview .service-cards__item.reveal-deal {
    opacity: 1;
  }

  .service-section {
    --sc-body-drop: var(--space-20);
  }

  /* スワイプ時は1枚ずつ大きく見えるので縦長に戻す */
  .service-card__thumb {
    aspect-ratio: 7 / 8;
  }

  .service-card {
    --sc-body-inset: 16%;
  }

  .service-card__body {
    padding: var(--space-10) var(--space-10) var(--space-20);
  }
}

/* =========================================
   480px以下：カードを大きくして次の1枚を少しだけ見せる
   （common.css の .sp-only / .content-inner と同じ境界）
========================================= */
@media screen and (max-width: 480px) {
  .service-cards__list {
    grid-auto-columns: 88%;
    gap: var(--space-10);
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .service-section {
    --sc-card-title: var(--font-size-caption);
  }

  .service-section__inner {
    padding-left: var(--container-padding-xs);
    padding-right: var(--container-padding-xs);
  }

  .service-card {
    --sc-body-inset: 12%;
  }
}