/* =====================================================
   docs.css（Page-only / site.css+site.js compatible）
   - 共通（タイポ/ヘッダー/ナビ/reveal/underline/フッター/共通ボタン）は site.css
   - ここには「ページ固有」のみ
   - docsカード：servicesの“航空輸送カード”と同系の濃紺グラデ
   - ボタン：青カード上でも潰れない（白→青の反転）
===================================================== */

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

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

  /* servicesの航空輸送カード系 */
  --svc-card-bg1:#1e3a75;
  --svc-card-bg2:#264d91;
  --svc-card-border: rgba(174,227,255,.22);
  --svc-card-border-strong: rgba(174,227,255,.28);
}

/* ページ配色は site.css のCSS変数で差し替え（正攻法） */
body.docs-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);
}

/* ===== Hero（docs固有：画像差し替えはここ） ===== */
.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--docs{
  /* ★背景画像の指定場所（差し替えはここ） */
  background: url("../images/docs01.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; }
.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;
}

/* ===== Intro（淡いガラス） ===== */
.docs-intro{
  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.62);
  border-radius:16px;
  padding:22px 22px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.08);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  position:relative;
  overflow:hidden;
}
.docs-intro::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 45%);
  pointer-events:none;
}
.docs-intro__label{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  color:#195aa6;
  font-weight:900;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.docs-intro__title{ position:relative; z-index:1; margin:0 0 12px; }
.docs-intro__text{
  margin:0;
  color: var(--ink2);
  font-size:16px;
  line-height:1.95;
  position:relative;
  z-index:1;
}

/* ===== List ===== */
.docs-list{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ===== Card（青：航空輸送カード系） ===== */
.docs-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;

  background: linear-gradient(180deg, var(--svc-card-bg1) 0%, var(--svc-card-bg2) 100%);
  border:1px solid var(--svc-card-border);

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

  color:#f6fbff;

  /* ★カード自体はホバー無し（方針） */
}
.docs-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;
}

.docs-card__head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:18px 18px 0;
  position:relative;
  z-index:1;
}

/* アイコンは“控えめガラス” */
.docs-ico{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;

  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 26px rgba(0,0,0,.14);
}

.docs-card__meta{ min-width:0; }

/* 見出しは site.css の underline（darkline）を使うので、ここは余計な装飾を持たせない */
.docs-h2{
  margin:2px 0 0;
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.7;
  text-shadow:0 10px 28px rgba(0,0,0,.18);
}

.docs-body{
  margin:10px 0 0;
  color: rgba(255,255,255,.92);
  font-size:15px;
  line-height:1.95;
  text-shadow:0 10px 28px rgba(0,0,0,.16);
}

.docs-actions{
  padding:14px 18px 18px;
  display:flex;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}

/* ===== Download button（青カード上で潰れない反転演出） ===== */
.docs-dl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:14px;

  text-decoration:none;
  white-space:nowrap;

  /* 通常：薄い白ガラス */
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.34);
  color:#ffffff;

  font-weight:900;
  letter-spacing:.03em;
  line-height:1.4;

  box-shadow: 0 16px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);

  position:relative;
  overflow:hidden;
  transition: color .28s ease, background .28s ease, transform .20s ease, box-shadow .20s ease, border-color .28s ease;
}

/* 三角スイープ（白） */
.docs-dl-btn::before{
  content:"";
  position:absolute;
  top:0;
  right:-70px;
  width:100%;
  height:100%;
  border-right:70px solid transparent;
  border-bottom:70px solid rgba(255,255,255,.95);
  transform: translateX(-120%);
  transition: transform .30s ease;
  z-index:0;
}

.docs-dl-btn > *{ position:relative; z-index:1; }

/* hoverはボタンだけ（方針） */
@media (hover:hover){
  .docs-dl-btn:hover{
    color:#0e5ea6;          /* 青系 */
    background:#ffffff;
    border-color:#ffffff;
    transform: translateY(-2px);
    box-shadow: 0 22px 36px rgba(0,0,0,.32);
  }
  .docs-dl-btn:hover::before{
    transform: translateX(0);
  }
}

@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .docs-intro{ padding:18px 16px; }
  .docs-card__head{ padding:16px 16px 0; gap:10px; }
  .docs-actions{ padding:12px 16px 16px; justify-content:stretch; }
  .docs-dl-btn{ width:100%; }
}