/* =====================================================
   services_GSA.css（Page-only / services baseline compatible）
   - 共通（font / header / nav / dropdown / burger / reveal / underline / footer / buttons）は site.css に委譲
   - 本CSSは「ページ固有」だけを保持する
   - 仕様：
     ① SP画像は index overview のように帯（フルブリード）表示、縁取りなし
     ② PC文章はカードをやめて通常本文（index overview 横テキスト風）
        ※SPはカード表示を維持
===================================================== */

: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);
}

/* ページ背景（services.cssと同思想で site.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--gsa{
  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; }
.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;
}

/* 見出し：サイズ/太さは site.css（.section-headline）に委譲 */
.sec-title{
  margin:0 0 12px;
  color: var(--ink);
}

/* =====================================================
   GSAカード（servicesの航空輸送カードに寄せる）
   - 横長カードはこのまま“カード”
===================================================== */
.gsa-wide-wrap{ margin: 8px 0 30px; }

.gsa-wide-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-strong);

  box-shadow:
    0 22px 44px rgba(0,0,0,.20),
    0 14px 30px rgba(0,0,0,.14);

  color:#f6fbff;

  padding:22px 18px;
}
.gsa-wide-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;
}
@media (hover:hover){
  .gsa-wide-card:hover{
    border-color: rgba(174,227,255,.34);
  }
}

.gsa-wide-text{
  margin:0;
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.85;
  position:relative;
  z-index:1;
  text-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* =====================================================
   2段スタック（PC: 2カラム / SP: 文字→画像を固定）
===================================================== */
.gsa-stack{ display:grid; gap: 18px; }

.gsa-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* =====================================================
   ② PC版：文章は “カードではなく本文” にする（index overview 横テキスト風）
   - 背景なし、影なし、余白は本文として自然に
   - 文字色はサブタイトルと同系（--ink2）
===================================================== */
.gsa-textcard{
  /* カードを解除 */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  color: var(--ink2);
}

.gsa-text{
  margin:0;
  color: var(--ink2);
  text-shadow: none;
  position:relative;
  z-index:1;
  line-height: 1.95;
}
.gsa-text + .gsa-text{ margin-top: 12px; }

/* =====================================================
   画像（PC）：現状の表示を維持しつつ “縁取りなし”
===================================================== */
.gsa-imagecol{ display:block; }

.gsa-image{
  margin:0;
  border-radius:16px;
  overflow:hidden;

  /* 縁取り（白ライン）は無し */
  border: 0;

  box-shadow: 0 20px 40px rgba(0,0,0,.14);
  background: transparent;
}
.gsa-image img{ width:100%; height:auto; display:block; }

.gsa-image-note{
  margin:10px 2px 0;
  font-size:12px;
  color:#2a527f;
  opacity:.82;
}

/* ROW2をPCだけ左右反転（DOM順は維持 → SPで文字→画像を守る） */
.gsa-row--reverse .gsa-textcard{ order: 2; }
.gsa-row--reverse .gsa-imagecol{ order: 1; }

/* =====================================================
   ① SP版：画像を index overview のように “帯（フルブリード）” にする
   ② SP版：文章は “カード表示を維持”
===================================================== */
@media (max-width: 1024px){
  .gsa-row{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gsa-row--reverse .gsa-textcard{ order: 1; }
  .gsa-row--reverse .gsa-imagecol{ order: 2; }

  /* SPでは文章をカードに戻す（= 現状維持） */
  .gsa-textcard{
    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;
    padding:18px 16px;
  }
  .gsa-textcard::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;
  }

  .gsa-text{
    color: rgba(255,255,255,.94);
    text-shadow:0 10px 28px rgba(0,0,0,.18);
  }

  /* SP画像：帯（フルブリード） */
  .gsa-image{
    border-radius: 0;
    border: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    box-shadow: 0 18px 34px rgba(0,0,0,.18);
  }
  .gsa-image img{ width:100%; height:auto; display:block; }

  /* 注釈はコンテンツ幅に戻す */
  .gsa-image-note{
    margin:10px 0 0;
    padding:0 20px;
  }
}

/* Responsive tweak */
@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .gsa-wide-card{ padding: 18px 14px; }

  /* SPカード余白微調整 */
  .gsa-textcard{ padding: 16px 14px; }

  /* 注釈の左右余白も合わせる */
  .gsa-image-note{ padding:0 14px; }
}