/* =====================================================
   services.css（Page-only / Site Framework compatible）
   - 共通（header/nav/footer/reveal/underline）は site.css に委譲
   - services固有：
     1) 紙系の背景トーン（--page-bg / --page-fg を上書き）
     2) タイトル帯（sub-hero）
     3) サービスカード（ホバーで浮かせない／CTA帯寄りの高級感）
     4) SERVICE MENU（背景画像＋ブルーフィルム＋固定）
        - 境界の青帯は「フェード吸収」で根治
     5) 導線リンク（斜め“全面”スライド、hover後の色はindex思想）
===================================================== */

:root{
  --ink:#163a5c;
  --ink2:#244e7a;

  --paper1:#faf7ef;
  --paper2:#f5f1e8;

  /* SERVICE MENU背景（このページ専用） */
  --svc-menu-bg: url("../images/services02.jpg");
}

/* servicesページの配色：site.cssのCSS変数で差し替える */
body.services-page{
  --page-bg:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--paper1) 0%, var(--paper2) 100%);
  --page-fg: var(--ink);
  color: var(--page-fg);
}

/* ===== Sub Hero（services固有） ===== */
.sub-hero{
  position:relative;
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  margin-top:64px; /* fixed header offset */
}
.sub-hero--services{
  background:url("../images/services01.jpg") center/cover no-repeat;
}
.sub-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,58,92,.78) 0%, rgba(22,58,92,.72) 100%);
}
.sub-hero__inner{ position:relative; z-index:1; }

/* ここは“ページの看板”なので、section-headlineとは別軸でOK（=H1帯） */
.sub-hero__title{
  margin:0;
  font-size:clamp(28px,3.2vw,40px); /* ★微調整：少しだけ芯を出す */
  font-weight:900;
  letter-spacing:.02em;
  color:#eaf4ff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.sub-hero__lead{
  margin:6px 0 0;
  font-size:13px; /* ★微調整：ほんの少し締める */
  letter-spacing:.16em;
  color:#bfe2ff;
  text-transform:uppercase;
}

/* ===== Layout ===== */
.sub-main{ padding:34px 0 0; }
.sub-container{
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px;
}

/* ===== Headings =====
   見出しサイズ/太さは site.css（.section-headline）に委譲
   services.cssは余白・色のみ担当
*/
.sec-title{
  margin:0 0 12px;
  color: var(--ink);
}
.sec-lead{
  margin:0 0 24px;
  font-size:16px;
  line-height:1.95;
  color: var(--ink2);
}

/* ===== Services Cards grid ===== */
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap:18px;
}
@media (max-width: 1024px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   サービスカード（ホバーアニメ無し／高級感）
===================================================== */
.svc-card{
  position:relative;
  border-radius:16px;
  padding:18px 16px;
  overflow:hidden;

  background: linear-gradient(180deg, #1e3a75 0%, #264d91 100%);
  border:1px solid rgba(174,227,255,.22);

  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    0 10px 24px rgba(0,0,0,.12);

  color:#f6fbff;
}
.svc-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 44%);
  opacity:.65;
  pointer-events:none;
}
.svc-card--primary{
  border-color: rgba(174,227,255,.28);
  box-shadow:
    0 22px 44px rgba(0,0,0,.20),
    0 14px 30px rgba(0,0,0,.14);
}
@media (hover:hover){
  .svc-card:hover{
    /* 動かさない：輪郭だけ軽く */
    border-color: rgba(174,227,255,.34);
  }
}

.card-illust{
  font-size:26px;
  line-height:1;
  margin-bottom:10px;
  position:relative;
  z-index:1;
  text-shadow:0 10px 28px rgba(0,0,0,.22);
}

/* カードの見出しは section-headline ではなく “カード用” として安定させる */
.card-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.03em;
  position:relative;
  z-index:1;
  text-shadow:0 10px 28px rgba(0,0,0,.22);
}
.card-text{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:rgba(255,255,255,.92);
  position:relative;
  z-index:1;
  text-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* =====================================================
   SERVICE MENU（背景画像＋ブルーフィルム＋固定）
   - 青帯対策：ベタ補正を廃止し「フェード吸収」にする
===================================================== */
.svc-menu-block{
  position:relative;
  margin-top: 44px;
  padding: 88px 0;
  color:#f6fbff;

  background: var(--svc-menu-bg) center/cover no-repeat fixed;

  border-top: none;
  border-bottom: none;
  overflow:hidden;
}

/* フィルム：画像より少し大きめに被せて微細な噛み合わせを吸収 */
.svc-menu-block::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: rgba(14,165,233,.42);
  z-index:0;
}

/* 下端の線（噛み合わせ）を“帯にせず”消す：フェードで吸収 */
.svc-menu-block::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:18px;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(14,165,233,0) 0%,
    rgba(14,165,233,.10) 45%,
    rgba(26,47,85,.85) 100%
  );
}

.svc-menu-inner{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding: 0 20px;
}

.svc-menu-head{
  max-width:1100px;
  margin: 0 0 22px;
}

.svc-menu-label{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:900;
  color:#ffffff;
  text-transform:uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.26);
}

/* 見出しサイズ/太さは section-headline に委譲、ここでは“白＋陰影”のみ */
.svc-menu-title{
  margin:0 0 12px;
  color:#ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.32), 0 0 18px rgba(255,255,255,.28);
}

.svc-menu-desc{
  margin:0;
  color:#f0f6ff;
  text-shadow: 0 2px 12px rgba(0,0,0,.26);
}

/* ===== LINK CARDS GRID（←ここが消えてはいけない部分） ===== */
.svc-menu-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap:14px;
}
@media (max-width:1024px){ .svc-menu-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .svc-menu-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   リンクカード（斜め“全面”スライド）
===================================================== */
.ui-linkcard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;

  border-radius:16px;
  padding:16px 14px;
  text-decoration:none;

  overflow:hidden;
  transition: color .30s ease, border-color .30s ease, box-shadow .20s ease;
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

/* dark：写真＋フィルム上 */
.ui-linkcard--dark{
  color:#f6fbff;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(174,227,255,.30);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

/* 通常時の視認性を安定させる */
.ui-linkcard--dark .ui-linkcard__title,
.ui-linkcard--dark .ui-linkcard__sub{
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
}

/* light：淡色背景用（将来他ページで使用） */
.ui-linkcard--light{
  color:#163a5c;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

/* 斜め全面スライド（カード全面を覆う） */
.ui-linkcard::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:0;
  background: rgba(255,255,255,.92);
  transform: translateX(-120%) skewX(-14deg);
  transition: transform .30s ease;
  pointer-events:none;
}

@media (hover:hover){
  .ui-linkcard:hover::before{
    transform: translateX(0) skewX(-14deg);
  }

  .ui-linkcard--dark:hover{
    color:#0e5ea6;
    border-color: rgba(255,255,255,.92);
    box-shadow: 0 22px 40px rgba(0,0,0,.26);
  }

  .ui-linkcard--light:hover{
    color:#0e5ea6;
    border-color: rgba(25,90,166,.22);
    box-shadow: 0 18px 34px rgba(0,0,0,.16);
  }
}

/* テキストは前面へ */
.ui-linkcard__title,
.ui-linkcard__sub{
  position:relative;
  z-index:1;
}

.ui-linkcard__title{
  font-weight:900;
  letter-spacing:.01em;
}
.ui-linkcard__sub{
  font-size:13px;
  opacity:.92;
}

/* SPは fixed を避ける */
@media (max-width: 768px){
  .svc-menu-block{
    padding: 78px 0;
    background-attachment: scroll;
    background: var(--svc-menu-bg) center/cover no-repeat;
  }
}

/* Responsive tweak */
@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .svc-menu-inner{ padding:0 14px; }
}

/* SPだけ上書き（追加） */
@media (max-width: 768px){
  .ui-linkcard--dark{
    background: rgba(255,255,255,.45); /* ←ここだけ調整 */
  }
}