@charset "UTF-8";

/* ===============================
   Air Sea Express - JP HOME（page-id-50）
   White theme / CloudSecure taste
   ※先のHTML構造に完全対応（NEWSは一覧誘導のみ／SERVICESはカード＋一覧導線／STATSは概要＋2ボタン）
   =============================== */

/* -------- Tokens -------- */
body.page-id-50{
  --ase-text:#0f172a;
  --ase-muted:#64748b;
  --ase-border:#e6e9ee;
  --ase-surface:#ffffff;
  --ase-bg:#ffffff;
  --ase-primary:#0f6bd8;
  --ase-primary-dark:#0c4da2;
  --ase-teal:#0aa39a;
  --ase-shadow-sm:0 6px 16px rgba(16,24,40,.06);
  --ase-shadow-md:0 10px 25px rgba(16,24,40,.08);
  --ase-shadow-lg:0 16px 32px rgba(16,24,40,.12);
  background:var(--ase-bg);
  color:var(--ase-text);
}

/* ================== News（お知らせ：一覧ボタンのみ） ================== */
body.page-id-50 .ase-news{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(28px,6vw,64px) 16px;
  position:relative;
}
body.page-id-50 .ase-news::before{
  content:"NEWS";
  position:absolute;
  inset:auto 0 12px 0;
  margin:auto;
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(60px,16vw,160px);
  line-height:1;
  color:#0f172a;
  opacity:.035;
  pointer-events:none;
  user-select:none;
}
body.page-id-50 .ase-news__inner{
  background:var(--ase-surface);
  border:1px solid var(--ase-border);
  border-radius:16px;
  box-shadow:var(--ase-shadow-md);
  padding:clamp(20px,4.8vw,36px);
  text-align:center;
}
body.page-id-50 .ase-news__title{
  margin:0 0 6px;
  font-size:clamp(24px,4vw,36px);
  line-height:1.2;
  color:var(--ase-text);
  letter-spacing:.02em;
}
body.page-id-50 .ase-news__lead{
  margin:0 0 22px;
  color:var(--ase-muted);
  font-size:clamp(14px,2.4vw,16px);
}

/* 一覧ボタン（誘導のみ） */
body.page-id-50 .ase-news__actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
body.page-id-50 .ase-news__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:9999px;
  background:var(--ase-primary);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid color-mix(in oklab, var(--ase-primary) 15%, transparent);
  box-shadow:0 8px 18px color-mix(in oklab, var(--ase-primary) 18%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
body.page-id-50 .ase-news__button:hover,
body.page-id-50 .ase-news__button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px color-mix(in oklab, var(--ase-primary) 26%, transparent);
  background:var(--ase-primary-dark);
  outline:none;
}
body.page-id-50 .ase-news__inner > *:last-child{ margin-bottom:0; }

/* ================== Our Services（カード＋一覧導線） ================== */
body.page-id-50 .ase-services{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(28px,6vw,64px) 16px;
  text-align:center;
  position:relative;
}
body.page-id-50 .ase-services::before{
  content:"SERVICE";
  position:absolute;
  inset:8px 0 auto 0;
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(60px,16vw,160px);
  line-height:1;
  color:#0f172a;
  opacity:.035;
  pointer-events:none;
  user-select:none;
}
body.page-id-50 .ase-services__title{
  margin:0 0 6px;
  font-size:clamp(24px,4vw,36px);
  line-height:1.2;
  color:var(--ase-text);
  letter-spacing:.02em;
}
body.page-id-50 .ase-services__lead{
  margin:0 0 28px;
  color:var(--ase-muted);
  font-size:clamp(14px,2.4vw,16px);
}

/* グリッド */
body.page-id-50 .ase-services__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:768px){
  body.page-id-50 .ase-services__list{
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
}

/* カード */
body.page-id-50 .ase-services__card{
  display:grid;
  grid-template-rows:auto auto 1fr;
  justify-items:center;
  gap:14px;
  height:100%;
  padding:32px 24px;
  background:var(--ase-surface);
  border:1px solid var(--ase-border);
  border-radius:16px;
  box-shadow:var(--ase-shadow-md);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-id-50 .ase-services__card:hover,
body.page-id-50 .ase-services__card:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--ase-shadow-lg);
  border-color:color-mix(in oklab, var(--ase-primary) 35%, var(--ase-border));
  outline:none;
}

/* サムネイル */
body.page-id-50 .ase-services__thumb{
  display:flex;
  justify-content:center;
  align-items:center;
  width:140px;
  height:100px;
  border-radius:18px;
  overflow:hidden;
  background:#f3f6fb;
  box-shadow:0 6px 14px color-mix(in oklab, var(--ase-primary) 15%, transparent);
}
body.page-id-50 .ase-services__thumb img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:18px;
  transition:transform .3s ease;
}
body.page-id-50 .ase-services__card:hover .ase-services__thumb img{ transform:scale(1.05); }

/* テキスト */
body.page-id-50 .ase-services__name{
  font-size:clamp(16px,2.8vw,18px);
  font-weight:700;
  color:var(--ase-text);
}
body.page-id-50 .ase-services__desc{
  color:var(--ase-muted);
  font-size:14px;
  line-height:1.7;
  text-align:left;
  max-width:42ch;
  margin:0 auto;
}
body.page-id-50 .ase-services__card:hover .ase-services__name{ color:var(--ase-primary); }

/* 一覧導線（/service/ へ） */
body.page-id-50 .ase-services__actions{
  margin-top:20px;
  display:flex;
  justify-content:center;
}
body.page-id-50 .ase-services__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:9999px;
  background:var(--ase-primary);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid color-mix(in oklab, var(--ase-primary) 15%, transparent);
  box-shadow:0 8px 18px color-mix(in oklab, var(--ase-primary) 18%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
body.page-id-50 .ase-services__button:hover,
body.page-id-50 .ase-services__button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px color-mix(in oklab, var(--ase-primary) 26%, transparent);
  background:var(--ase-primary-dark);
  outline:none;
}

/* ================== Global Network / Stats（概要＋2ボタン） ================== */
body.page-id-50 .ase-stats{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(32px,6vw,72px) 16px;
  text-align:center;
  position:relative;
}
body.page-id-50 .ase-stats::before{
  content:"NETWORK";
  position:absolute;
  inset:8px 0 auto 0;
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(56px,15vw,150px);
  line-height:1;
  color:#0f172a;
  opacity:.03;
  pointer-events:none;
  user-select:none;
}
body.page-id-50 .ase-stats__title{
  margin:0 0 6px;
  font-size:clamp(24px,4vw,36px);
  line-height:1.2;
  color:var(--ase-text);
  letter-spacing:.02em;
}
body.page-id-50 .ase-stats__lead{
  margin:0 0 28px;
  color:var(--ase-muted);
  font-size:clamp(14px,2.4vw,16px);
}

/* HOMEでは数値カードは非必須（残す場合は以下を利用） */
body.page-id-50 .ase-stats__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:768px){
  body.page-id-50 .ase-stats__list{ grid-template-columns:repeat(4,1fr); gap:20px; }
}
body.page-id-50 .ase-stats__card{
  height:100%;
  background:linear-gradient(180deg,#ffffff,#fafcff);
  border:1px solid var(--ase-border);
  border-radius:16px;
  box-shadow:var(--ase-shadow-md);
  padding:24px 18px;
  display:grid;
  gap:8px;
  place-items:center;
}
body.page-id-50 .ase-stats__value{
  font-weight:800;
  font-size:clamp(26px,5vw,42px);
  line-height:1;
  letter-spacing:.02em;
  background:radial-gradient(60% 60% at 30% 30%,#5fb3ff,var(--ase-primary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.page-id-50 .ase-stats__value.is-teal{
  background:radial-gradient(60% 60% at 30% 30%,#4bd7c4,var(--ase-teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.page-id-50 .ase-stats__label{
  color:var(--ase-muted);
  font-size:14px;
}

/* ボタン2種（会社概要／お問い合わせ） */
body.page-id-50 .ase-stats__actions{
  margin-top:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body.page-id-50 .ase-stats__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:9999px;
  background:var(--ase-primary);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid color-mix(in oklab, var(--ase-primary) 15%, transparent);
  box-shadow:0 8px 18px color-mix(in oklab, var(--ase-primary) 18%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
body.page-id-50 .ase-stats__button:hover,
body.page-id-50 .ase-stats__button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px color-mix(in oklab, var(--ase-primary) 26%, transparent);
  background:var(--ase-primary-dark);
  outline:none;
}
body.page-id-50 .ase-stats__button.is-secondary{
  background:#fff;
  color:var(--ase-primary-dark);
  border:1px solid color-mix(in oklab, var(--ase-primary) 35%, var(--ase-border));
  box-shadow:var(--ase-shadow-sm);
}
body.page-id-50 .ase-stats__button.is-secondary:hover,
body.page-id-50 .ase-stats__button.is-secondary:focus-visible{
  background:#f7faff;
  transform:translateY(-2px);
  box-shadow:var(--ase-shadow-md);
}

/* ================== Accessibility ================== */
body.page-id-50 .sr-only{
  position:absolute!important; width:1px;height:1px; margin:-1px;padding:0;border:0;
  white-space:nowrap; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden;
}

/* ====== Full-bleed 化（左右余白ゼロ：見出し英字を中央に保つ） ====== */
body.page-id-50{ overflow-x: clip; }

body.page-id-50 .ase-news,
body.page-id-50 .ase-services,
body.page-id-50 .ase-stats{
  max-width: none !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

body.page-id-50 .ase-news__inner,
body.page-id-50 .ase-services__list,
body.page-id-50 .ase-stats__list,
body.page-id-50 .ase-stats__actions{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

body.page-id-50 .ase-news::before,
body.page-id-50 .ase-services::before,
body.page-id-50 .ase-stats::before{
  left: 0; right: 0; margin: 0 auto;
}