/* =====================================================
   seaairservices.css（Page-only / site.css+site.js compatible）
   - 共通（font / header / nav / dropdown / burger / reveal / underline / footer / buttons）は site.css に委譲
   - ここには「ページ固有」のみを置く
   - 画像は seaairservices01-04.jpg の命名規則に統一
===================================================== */

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

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

/* 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（ページ固有） ===== */
.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--seaairservices{
  /* ★画像01：タイトル帯背景 */
  background:url("../images/seaairservices01.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;
}

/* ===== Common small label ===== */
.sa-label{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  font-weight:900;
  color:#195aa6;
  text-transform:uppercase;
}
.sa-label--light{ color:#cfe9ff; }

/* =====================================================
   1) Overview row（左テキスト / 右画像）
===================================================== */
.sa-section{ padding: 0; }
.sa-section--overview{ padding: 6px 0 10px; }

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

.sa-body{
  margin:0;
  color: var(--ink2);
  font-size:16px;
  line-height:1.95;
}

/* 画像：PCはカード（角丸＋影）、SPは帯 */
.sa-imageband{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border: 0;
  box-shadow:
    0 22px 44px rgba(0,0,0,.18),
    0 10px 24px rgba(25,90,166,.10);
  background: transparent;
}
.sa-imageband img{
  width:100%;
  height:auto;
  display:block;
}

/* =====================================================
   2) SEA & AIR SERVICE band（背景画像＋ブルーフィルム＋半透明カード）
   ★修正①：カード幅を sub-container フルで使う（右側の空きを無くす）
===================================================== */
.sa-cta-block{
  position: relative;
  margin-top: 18px;
  padding: 110px 0;
  color:#f6fbff;

  /* ★画像03：スクロール背景 */
  background: url("../images/seaairservices03.jpg") center/cover no-repeat fixed;

  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.sa-cta-block::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: rgba(14,165,233,.42);
  z-index:0;
}

/* sub-container内で組む：ここは中央寄せに統一 */
.sa-cta-inner{
  position:relative;
  z-index:1;
  display:block;
}

/* ★幅を100%（sub-containerいっぱい） */
.sa-cta-card{
  width:100%;
  border-radius:16px;

  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow:
    0 28px 56px rgba(0,0,0,.22),
    0 12px 28px rgba(0,0,0,.14);

  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);

  padding:22px 20px;
}

.sa-cta-label{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  font-weight:900;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,.26);
}
.sa-cta-card .section-headline{
  color:#ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.32), 0 0 18px rgba(255,255,255,.28);
}
.sa-cta-text{
  margin:10px 0 0;
  color:#f0f6ff;
  text-shadow: 0 2px 12px rgba(0,0,0,.26);
}

/* =====================================================
   3) Map image（大きめ）
   ★画像04：ROUTE MAP（flow chart）
===================================================== */
.sa-map-section{ padding: 6px 0 0; }

.sa-map-head{ margin:0 0 12px; }

.sa-map-figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  border: 1px solid rgba(25,90,166,.14);
  box-shadow:
    0 26px 52px rgba(0,0,0,.14),
    0 14px 30px rgba(0,0,0,.10);
}
.sa-map-figure img{
  width:100%;
  height:auto;
  display:block;
}

/* =====================================================
   4) Text-only section（目休め：globalnetwork風の帯）
===================================================== */
.sa-textonly{
  margin-top: 22px;
  padding: 86px 0;
  background: linear-gradient(180deg, #2c5e9d 0%, #1e4275 100%);
  color:#f6fbff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sa-textonly-inner .section-headline{
  color:#ffffff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.32),
    0 0 18px rgba(255,255,255,.35);
}
.sa-textonly-body{
  margin:10px 0 0;
  color:#e3edff;
}

/* =====================================================
   5) Highlight card（scheduleのintroカード思想）
===================================================== */
.sa-highlight{ padding: 24px 0 10px; }
.sa-highlight-card{
  background: rgba(255,255,255,.55);
  border:1px solid rgba(25,90,166,.14);
  border-radius:16px;
  padding:22px 22px;
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  position:relative;
  overflow:hidden;
}
.sa-highlight-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 45%);
  pointer-events:none;
}
.sa-highlight-label{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  color:#195aa6;
  font-weight:900;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.sa-highlight-title{ position:relative; z-index:1; margin:0 0 12px; }
.sa-highlight-text{
  margin:0;
  color: var(--ink2);
  font-size:16px;
  line-height:1.95;
  position:relative;
  z-index:1;
}

/* =====================================================
   Responsive（SPで崩さない）
   - overview画像を“帯”へ（index GLOBALの考え方）
===================================================== */
@media (max-width: 960px){
  .sa-row{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px){
  .sa-cta-block{
    padding: 92px 0;
    background-attachment: scroll;
    /* SPも画像03を採用（固定を解除するだけ） */
    background: url("../images/seaairservices03.jpg") center/cover no-repeat;
  }

  /* 帯画像（フルブリード） */
  .sa-imageband{
    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);
  }
}

@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .sa-highlight-card{ padding:18px 16px; }
  .sa-cta-card{ padding:18px 16px; }
}