/* ============================================
   service.css - サービスページ固有スタイル
   ============================================ */

/* イントロ（ページ見出し+説明文）
   XD: padding-top 95px（COMPANYと同じ） */
.service-intro {
  padding-top: 95px;
}

/* 説明文ラッパー: 見出しと同じ左右padding(316px)で配置 */
.service-intro__desc-wrap {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 316px;
  box-sizing: border-box;
}

/* 説明文: Noto Sans JP Bold 20px / line-height:60px / letter-spacing:1px / #000
   XD: サブタイトル下端(Y:701) から約35px下(Y:736) に配置 */
.service-intro__description {
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 1px;
  color: #000;
  margin: 35px 0 0 0;
}

/* サービスカードセクション（ベージュ枠）
   XD: 長方形175 W:1284 H:2102 X:316 Y:830 / 背景 #F5F1E4
   説明文下端(Y:765) → 枠上端(Y:830) = 65pxの間隔
   枠下端(Y:2932) → CONTACT上端(推定Y:3100) = 約168pxの間隔
   ※CONTACT位置はXD仕様(1920×4000のartboard, COMPANY構造と類推)で推算 */
.service-cards {
  max-width: 1284px;
  margin: 65px auto 168px;
  /* XD: H:2102 だが固定すると●とカードの間が間延びするため
     min-height は外し、内容に応じて縮ませる */
  background: #F5F1E4;
  padding: 60px 60px 68px 60px; /* 下は●下端からベージュ下端まで68px */
  box-sizing: border-box;
}

/* グリッド: PC 2列 × 3行
   XD実測: 行gap 50px / 列gap 44px (CheckMaster X:376 → SES事業 X:980 → 980-376-560=44 / Y:890→Y:1500 → 1500-890-560=50) */
.service-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 44px;
}

/* 1カード: W:560 H:560 正方形 白背景
   position:relative ← ボタンを absolute で右上に配置するため */
.service-card {
  position: relative;
  width: 100%;
  height: 560px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ヘッダ: バッジ(左)のみ配置。ボタンは absolute で右上固定 */
.service-card__header {
  display: flex;
  align-items: center;
}

.service-card__badges {
  display: flex;
  gap: 6px;
}

.service-card__badge {
  background: #6CABC3;
  color: #FFFFFF;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  padding: 6px 18px;
  line-height: 1;
  display: inline-block;
}

/* ボタン群: カード右上に縦並び。XD: 最大2個まで(リーフレット/パンフレット) */
.service-card__buttons {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ボタン: XD計測 W:156 H:42 / border 3px #535353 / 角丸50px (ピル型)
   文字: M PLUS 1p ExtraBold 16px / 色 #535353 */
.service-card__button {
  background: #FFFFFF;
  color: #535353;
  border: 3px solid #535353;
  border-radius: 50px;
  width: 156px;
  height: 42px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  line-height: 36px; /* = 42 - border*2 */
  display: inline-block;
  box-sizing: border-box;
  transition: background .2s, color .2s;
}

.service-card__button:hover {
  background: #535353;
  color: #FFFFFF;
}

/* タイトル共通: 色 #6CABC3 / margin / 左寄せ
   英語タイトル(--en) と 日本語タイトル(--ja) でフォントとサイズが異なる */
.service-card__title {
  color: #6CABC3;
  font-weight: 700;
  margin: 20px 0 12px;
  line-height: 1.1;
  text-align: left;
}

/* XD: 英語タイトル Barlow Bold 50px (CheckMaster, Hawk-AI) */
.service-card__title--en {
  font-family: var(--font-barlow);
  font-size: 50px;
}

/* XD: 日本語タイトル Noto Sans JP Bold 40px (DX人材育成支援, SES事業, SES＋ブリッジエンジニア) */
.service-card__title--ja {
  font-family: var(--font-ja);
  font-size: 40px;
}

/* 説明文: Noto Sans JP Bold 16px / line-height:34px (XD実測) */
.service-card__description {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  color: #000;
  line-height: 34px;
  margin: 0;
}

/* 画像は下端固定・横は中央寄せ
   XD: 各画像はそれぞれW×Hが異なる（CheckMaster縦長/Hawk-AI横長/他）
   実寸を保持するため width/height はHTML属性で出力 */
.service-card__image-wrap {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.service-card__image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 一部の画像にXDでドロップシャドウ指定あり (Hawk-AI 等)
   XD: x:6 y:6 blur:10 #00000029 */
.service-card__image--shadow {
  box-shadow: 6px 6px 10px rgba(0,0,0,0.16);
}

/* SP対応で画像をフル幅表示するなら以下を有効化:
@media (max-width: 991.98px) {
  .service-card__image { width: 100%; height: auto; }
}
*/

/* ベージュ枠下の装飾●3つ（縦並び）
   XD: グループ150 W:15 H:105、●直径15px、縦間隔30px
   ※XDではカード下端から149px下にあるが、min-height固定なしの状態だと
     視覚的に間延びするので 80px に調整 */
.service-cards__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 80px;
}

.service-cards__dots span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #535353;
}

/* SP対応 */
@media (max-width: 991.98px) {
  /* イントロ（見出しは共通page-headingで40/20） */
  .service-intro {
    padding-top: 56px;
  }
  .service-intro__desc-wrap {
    padding: 0 20px;
  }
  .service-intro__description {
    font-size: 15px;           /* 最初のテキスト 15px */
    line-height: 2;            /* PCの60px直書きを解除 */
    letter-spacing: 0.5px;
    margin-top: 50px;          /* サービス〜技術伝承 の間 50px */
  }

  /* カードは縦並び。390px幅に対しカード部=350px（左右20px） */
  .service-cards {
    padding: 30px 20px;
    min-height: 0;
    margin-bottom: 0;   /* PCの168px下マージン（赤上の白スペース）を解除 */
  }
  .service-cards__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    height: auto;
    padding: 20px;
  }

  /* ●3つ: サイズをTOPと統一（7.6px）、カード→ドットの余白を詰める */
  .service-cards__dots {
    margin-top: 24px;
    gap: 16px;
  }
  .service-cards__dots span {
    width: 7.6px;
    height: 7.6px;
  }

  /* カード内の並び順: バッジ → タイトル → 説明 → 画像 → ボタン(右下)
     headerを display:contents でカード直下のflex itemに分解して order制御 */
  .service-card__header {
    display: contents;
  }
  .service-card__badges {
    order: 1;
  }
  .service-card__title {
    order: 2;
    font-size: 26px;          /* CheckMaster 26px */
    margin: 4px 0 12px;       /* 開発(バッジ)〜タイトル間 4px */
  }
  .service-card__description {
    order: 3;
    font-size: 11px;          /* 説明文 11px */
    line-height: 20px;        /* line-height 20px */
  }
  .service-card__image-wrap {
    order: 4;
    margin-top: 16px;         /* PCの margin-top:auto を解除 */
  }
  /* ボタンは absolute解除 → 最下部・横並びの独立した行に */
  .service-card__buttons {
    order: 5;
    position: static;
    flex-direction: row;       /* リーフレット・パンフレットを横並び */
    width: 100%;
    justify-content: flex-end; /* 右寄せグループ（1つでも2つでも右） */
    gap: 10px;
    margin-top: 24px;
  }
  .service-card__button {
    flex: 0 0 auto;            /* 内容幅・縮小しない（改行防止） */
    width: auto;
    padding: 0 16px;
    white-space: nowrap;       /* 文字を折り返さない */
  }
}

/* ============================================
   リーフレット／パンフレット モーダル
   ・position:fixed inset:0 でズーム(html zoom)の影響を受けず全画面
   ============================================ */
.leaflet-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;               /* ヘッダー(1000)より前面 */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
}
.leaflet-modal.is-open {
  display: flex;
}
.leaflet-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(72, 72, 72, 0.8);  /* マスク: #484848 不透明度80% */
  cursor: pointer;
}
.leaflet-modal__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  max-height: 88vh;
}
.leaflet-modal__image {
  display: block;
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.leaflet-modal__counter {
  margin-top: 16px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.05em;
}
/* 閉じる × ボタン */
.leaflet-modal__close {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s;
}
.leaflet-modal__close:hover { opacity: 0.6; }
/* 左右ページ送り（XDの白シェブロン矢印SVG） */
.leaflet-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: none;
  background: transparent;
  padding: 20px;               /* タップ領域を広げる */
  cursor: pointer;
  transition: opacity .2s;
}
.leaflet-modal__nav img {
  display: block;
  width: 21px;                 /* XD: W20.886 H34.012 */
  height: 34px;
}
.leaflet-modal__nav:hover { opacity: 0.6; }
.leaflet-modal__nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.leaflet-modal__nav--prev { left: 24px; }
.leaflet-modal__nav--next { right: 24px; }

@media (max-width: 991px) {
  .leaflet-modal { padding: 16px; }
  .leaflet-modal__nav { padding: 12px; }
  .leaflet-modal__nav img { width: 16px; height: 26px; }
  .leaflet-modal__nav--prev { left: 4px; }
  .leaflet-modal__nav--next { right: 4px; }
  .leaflet-modal__close { top: 12px; right: 16px; }
  .leaflet-modal__image { max-height: 78vh; }
}