@charset "UTF-8";

/* ===============================
   Air Sea Express - Services (JP, page-id-212)
   Modern Dynamic Design / Trust & Transparency (Revised)
   =============================== */

/* =========================================
   CSS変数定義（Lightningの干渉回避のためスコープ固定）
   ========================================= */
body.page-id-212 .ase-services{
  /* カラーパレット */
  --ase-primary:#0f6bd8;
  --ase-primary-dark:#0c4da2;
  --ase-primary-light:#3d8beb;
  --ase-accent:#00b4d8;
  --ase-accent-warm:#ff6b35;
  --ase-text:#0f172a;
  --ase-text-light:#334155;
  --ase-muted:#64748b;
  --ase-border:#e2e8f0;
  --ase-bg:#f8fafc;
  --ase-bg-blue:#f0f7ff;
  --ase-white:#ffffff;

  /* グラデーション */
  --gradient-primary:linear-gradient(135deg,#0f6bd8 0%,#0c4da2 100%);
  --gradient-accent:linear-gradient(135deg,#00b4d8 0%,#0077b6 100%);
  --gradient-overlay:linear-gradient(180deg,rgba(15,107,216,.05) 0%,rgba(255,255,255,0) 100%);
  --gradient-shine:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.30) 50%,transparent 100%);

  /* シャドウ */
  --shadow-sm:0 2px 8px rgba(15,24,40,.08);
  --shadow-md:0 4px 16px rgba(15,24,40,.12);
  --shadow-lg:0 8px 32px rgba(15,24,40,.16);
  --shadow-xl:0 16px 48px rgba(15,24,40,.20);
  --shadow-glow:0 0 40px rgba(15,107,216,.25);

  /* サイズ */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --gap:24px;

  /* トランジション（アニメ対象を限定してリペイント抑制） */
  --transition-fast:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
  --transition-base:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
  --transition-slow:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1);

  /* レイアウト（基準幅を 1200px に統一） */
  max-width:1200px;
  margin:0 auto;
  padding:clamp(40px,8vw,80px) clamp(16px,4vw,32px);
  color:var(--ase-text);
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif;
  line-height:1.8;
  position:relative;
}

/* =========================================
   Hero Image Styling - アイキャッチ画像
   ========================================= */
body.page-id-212 .ase-hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  animation:imageReveal 1.2s ease-out;
  /* 画質指定のベンダー差を避け auto を維持 */
  image-rendering:auto;
}
@keyframes imageReveal{
  from{opacity:0; transform:scale(1.06)}
  to{opacity:1; transform:scale(1)}
}

/* オーバーレイ（重複定義を統合） */
body.page-id-212 .ase-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(15,107,216,.40) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,180,216,.30) 0%, transparent 50%),
    linear-gradient(135deg, rgba(10,25,41,.80) 0%, rgba(15,52,96,.90) 100%);
  z-index:1;
  animation:gradientShift 15s ease infinite;
}
@keyframes gradientShift{
  0%,100%{opacity:1}
  50%{opacity:.85}
}

/* パララックス（大画面のみ・控えめ） */
@media (min-width:1024px){
  body.page-id-212 .ase-hero__image{transform:scale(1.04); transition:transform .3s ease-out}
  body.page-id-212 .ase-hero:hover .ase-hero__image{transform:scale(1.02)}
}

/* モバイル最適化（背景を少し濃く） */
@media (max-width:768px){
  body.page-id-212 .ase-hero__overlay{
    background:linear-gradient(135deg, rgba(10,25,41,.88) 0%, rgba(15,52,96,.92) 100%);
  }
}

/* =========================================
   Hero Section - ダイナミックヒーロー
   ========================================= */
body.page-id-212 .ase-hero{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  margin-bottom:clamp(48px,8vw,80px);
  box-shadow:var(--shadow-xl);
  background:linear-gradient(135deg,#0a1929 0%,#0f3460 100%);
  min-height:clamp(400px,50vh,600px);
  display:flex;
  align-items:center;
  justify-content:center;
}
body.page-id-212 .ase-hero__background{position:absolute; inset:0; z-index:1}
body.page-id-212 .ase-hero__content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:clamp(40px,8vw,80px) clamp(20px,4vw,40px);
  max-width:900px;
  margin:0 auto;
}
body.page-id-212 .ase-hero__title{margin:0 0 clamp(32px,6vw,48px)}
body.page-id-212 .ase-hero__title-main{
  display:block;
  font-size:clamp(32px,6vw,56px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ase-white);
  margin-bottom:16px;
  background:linear-gradient(135deg,#fff 0%,#e0f2fe 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleFadeIn .8s ease-out;
}
body.page-id-212 .ase-hero__title-sub{
  display:block;
  font-size:clamp(16px,3vw,22px);
  font-weight:500;
  line-height:1.6;
  color:rgba(255,255,255,.9);
  animation:titleFadeIn .8s ease-out .2s both;
}
@keyframes titleFadeIn{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

/* Stats Counter */
body.page-id-212 .ase-hero__stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:clamp(24px,4vw,40px);
  max-width:600px;
  margin:0 auto;
  animation:statsSlideUp .8s ease-out .4s both;
}
@keyframes statsSlideUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}
body.page-id-212 .ase-stat{
  position:relative;
  padding:clamp(20px,4vw,32px);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);
  transition:var(--transition-base);
  will-change:transform;
  /* フィルタは対応端末のみ */
}
@supports (backdrop-filter: blur(10px)){
  body.page-id-212 .ase-stat{backdrop-filter:blur(10px)}
}
body.page-id-212 .ase-stat:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.15);
  box-shadow:0 8px 32px rgba(15,107,216,.30);
}
body.page-id-212 .ase-stat__number{
  font-size:clamp(32px,5vw,48px);
  font-weight:800;
  line-height:1;
  color:var(--ase-white);
  margin-bottom:8px;
  background:linear-gradient(135deg,#fff 0%,#bfdbfe 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body.page-id-212 .ase-stat__label{
  font-size:clamp(12px,2vw,14px);
  font-weight:700;
  color:rgba(255,255,255,.85);
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* =========================================
   Services Container - イントロ
   ========================================= */
body.page-id-212 .ase-services__container{margin-bottom:clamp(64px,10vw,96px)}
body.page-id-212 .ase-services__intro{text-align:center; margin-bottom:clamp(40px,6vw,64px)}
body.page-id-212 .ase-intro__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; background:var(--gradient-primary); color:var(--ase-white);
  border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:16px; box-shadow:var(--shadow-md); animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
body.page-id-212 .ase-intro__badge-icon{animation:iconRotate 3s linear infinite}
@keyframes iconRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.page-id-212 .ase-intro__title{
  font-size:clamp(28px,5vw,42px); font-weight:800; line-height:1.2; color:var(--ase-text);
  margin:0; position:relative; display:inline-block;
}
body.page-id-212 .ase-intro__title::after{
  content:''; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  width:60px; height:4px; background:var(--gradient-primary); border-radius:999px;
}

/* =========================================
   Service Cards - 3カラムカード
   ========================================= */
body.page-id-212 .ase-services__body{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:var(--gap); margin-bottom:clamp(64px,10vw,96px);
}
@media (max-width:768px){
  body.page-id-212 .ase-services__body{grid-template-columns:1fr}
}
body.page-id-212 .ase-service-card{
  position:relative; background:var(--ase-white); border:1px solid var(--ase-border);
  border-radius:var(--radius-lg); padding:clamp(24px,4vw,32px);
  box-shadow:var(--shadow-sm); transition:var(--transition-base); overflow:hidden; will-change:transform;
}
body.page-id-212 .ase-service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--gradient-primary); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1);
}
body.page-id-212 .ase-service-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-xl); border-color:var(--ase-primary-light)}
body.page-id-212 .ase-service-card:hover::before{transform:scaleX(1)}
body.page-id-212 .ase-service-card__icon{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-overlay); border-radius:var(--radius-md); margin-bottom:20px;
  color:var(--ase-primary); transition:var(--transition-base); will-change:transform;
}
body.page-id-212 .ase-service-card:hover .ase-service-card__icon{
  transform:scale(1.1) rotate(5deg); background:var(--gradient-primary); color:var(--ase-white); box-shadow:var(--shadow-glow);
}
body.page-id-212 .ase-service-card__title{
  font-size:clamp(18px,3vw,22px); font-weight:700; line-height:1.4; color:var(--ase-text); margin:0 0 12px;
}
body.page-id-212 .ase-service-card__text{
  font-size:clamp(14px,2.5vw,16px); line-height:1.8; color:var(--ase-text-light); margin:0;
}

/* =========================================
   Network Section - 地域ネットワーク
   ========================================= */
body.page-id-212 .ase-network{
  position:relative; margin-bottom:clamp(64px,10vw,96px);
  padding:clamp(40px,6vw,64px) clamp(24px,4vw,40px);
  background:var(--ase-white); border:1px solid var(--ase-border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden;
}
body.page-id-212 .ase-network::before{
  content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(15,107,216,.08) 0%, transparent 70%); pointer-events:none;
}
body.page-id-212 .ase-network__header{text-align:center; margin-bottom:clamp(40px,6vw,56px); position:relative; z-index:1}
body.page-id-212 .ase-network__badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--ase-bg-blue); color:var(--ase-primary);
  border:1px solid rgba(15,107,216,.2); border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;
}
body.page-id-212 .ase-network__title{
  font-size:clamp(28px,5vw,42px); font-weight:800; line-height:1.2; color:var(--ase-text); margin:0 0 16px;
}
body.page-id-212 .ase-network__description{
  font-size:clamp(15px,2.5vw,18px); line-height:1.8; color:var(--ase-text-light); max-width:800px; margin:0 auto;
}

/* Region Cards Grid */
body.page-id-212 .ase-network__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--gap); position:relative; z-index:1;
}
@media (max-width:768px){body.page-id-212 .ase-network__grid{grid-template-columns:1fr}}
body.page-id-212 .ase-region-card{
  position:relative; background:var(--ase-white); border:1px solid var(--ase-border);
  border-radius:var(--radius-lg); padding:clamp(24px,4vw,32px); box-shadow:var(--shadow-sm);
  transition:var(--transition-base); overflow:hidden; cursor:pointer; will-change:transform;
}
body.page-id-212 .ase-region-card::after{
  content:''; position:absolute; inset:0; background:var(--gradient-primary); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
body.page-id-212 .ase-region-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--ase-primary)}
body.page-id-212 .ase-region-card:hover::after{opacity:.05}
body.page-id-212 .ase-region-card__header{
  position:relative; z-index:1; margin-bottom:16px; padding-bottom:16px; border-bottom:2px solid var(--ase-border); transition:border-color .3s cubic-bezier(.4,0,.2,1);
}
body.page-id-212 .ase-region-card:hover .ase-region-card__header{border-color:var(--ase-primary)}
body.page-id-212 .ase-region-card__icon{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-primary); color:var(--ase-white); border-radius:var(--radius-md); margin-bottom:12px; transition:var(--transition-base); will-change:transform;
}
body.page-id-212 .ase-region-card:hover .ase-region-card__icon{transform:scale(1.1) rotate(-5deg); box-shadow:var(--shadow-glow)}
body.page-id-212 .ase-region-card__title{
  font-size:clamp(18px,3vw,22px); font-weight:700; line-height:1.3; color:var(--ase-text); margin:0 0 8px;
}
body.page-id-212 .ase-region-card__count{
  display:inline-block; padding:4px 12px; background:var(--ase-bg-blue); color:var(--ase-primary);
  border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.05em;
}
body.page-id-212 .ase-region-card__countries{font-size:clamp(13px,2.2vw,15px); line-height:1.9; color:var(--ase-text-light); margin:0}
body.page-id-212 .ase-region-card__overlay{
  position:absolute; inset:0; background:var(--gradient-shine); opacity:0; transform:translateX(-100%); transition:var(--transition-slow); pointer-events:none;
}
body.page-id-212 .ase-region-card:hover .ase-region-card__overlay{opacity:1; transform:translateX(100%)}

/* =========================================
   Track Record Section - 実績国タグ
   ========================================= */
body.page-id-212 .ase-records{position:relative; margin-bottom:clamp(64px,10vw,96px)}
body.page-id-212 .ase-records__container{
  background:var(--ase-white); border:1px solid var(--ase-border); border-radius:var(--radius-xl);
  padding:clamp(40px,6vw,64px) clamp(24px,4vw,40px); box-shadow:var(--shadow-lg);
}
body.page-id-212 .ase-records__header{text-align:center; margin-bottom:clamp(32px,5vw,48px)}
body.page-id-212 .ase-records__badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--ase-bg-blue);
  color:var(--ase-primary); border:1px solid rgba(15,107,216,.2); border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;
}
body.page-id-212 .ase-records__title{font-size:clamp(28px,5vw,42px); font-weight:800; line-height:1.2; color:var(--ase-text); margin:0 0 8px}
body.page-id-212 .ase-records__subtitle{font-size:clamp(15px,2.5vw,18px); color:var(--ase-muted); margin:0}
body.page-id-212 .ase-records__list{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
body.page-id-212 .ase-country-tag{
  display:inline-block; padding:10px 18px; background:var(--ase-bg); color:var(--ase-text);
  border:1px solid var(--ase-border); border-radius:999px; font-size:clamp(13px,2.2vw,15px); font-weight:600; transition:transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}
body.page-id-212 .ase-country-tag:hover{
  transform:translateY(-2px); background:var(--ase-primary); color:var(--ase-white); border-color:var(--ase-primary); box-shadow:var(--shadow-md);
}
body.page-id-212 .ase-country-tag--more{background:var(--gradient-primary); color:var(--ase-white); border-color:transparent; font-weight:700}

/* =========================================
   レスポンシブ
   ========================================= */
@media (max-width:1024px){
  body.page-id-212 .ase-services{padding:clamp(32px,6vw,64px) clamp(16px,3vw,24px)}
}
@media (max-width:768px){
  body.page-id-212 .ase-hero{min-height:clamp(350px,45vh,500px)}
  body.page-id-212 .ase-hero__stats{grid-template-columns:1fr; gap:16px}
}

/* =========================================
   アクセシビリティ & モーション削減
   ========================================= */
@media (prefers-reduced-motion: reduce){
  body.page-id-212 *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  body.page-id-212 .ase-service-card:hover,
  body.page-id-212 .ase-region-card:hover,
  body.page-id-212 .ase-stat:hover{
    transform:none !important;
    box-shadow:var(--shadow-sm) !important;
  }
}
body.page-id-212 *:focus-visible{outline:3px solid var(--ase-primary); outline-offset:2px; border-radius:var(--radius-sm)}

/* =========================================
   印刷スタイル
   ========================================= */
@media print{
  body.page-id-212 .ase-services{padding:20px}
  body.page-id-212 .ase-hero,
  body.page-id-212 .ase-service-card,
  body.page-id-212 .ase-region-card,
  body.page-id-212 .ase-records__container{box-shadow:none !important; break-inside:avoid}
  body.page-id-212 .ase-hero__overlay,
  body.page-id-212 .ase-network::before{display:none !important}
}

/* =========================================
   ダークモード（オプション）
   ========================================= */
@media (prefers-color-scheme: dark){
  body.page-id-212 .ase-services{
    --ase-text:#f1f5f9; --ase-text-light:#cbd5e1; --ase-muted:#94a3b8;
    --ase-border:#334155; --ase-bg:#1e293b; --ase-bg-blue:#1e3a5f; --ase-white:#0f172a;
  }
  body.page-id-212 .ase-service-card,
  body.page-id-212 .ase-region-card,
  body.page-id-212 .ase-records__container,
  body.page-id-212 .ase-network{background:#1e293b}
}

/* ===============================
   JP Services (page-id-212) 追加上書き
   — ヒーローをファーストビューに／2000の改行防止
   =============================== */

/* 1) ページ上部の見出し帯や余白を消してヒーローを最上部へ */
body.page-id-212 .vk_pageHeader,
body.page-id-212 .page-header,
body.page-id-212 .entry-header{ display: none !important; }

body.page-id-212 main#main,
body.page-id-212 .siteContent__wrap,
body.page-id-212 .entry-body,
body.page-id-212 .entry-content{ padding-top: 0 !important; }

body.page-id-212 .entry-content > *:first-child{ margin-top: 0 !important; }
/* ※ パンくずがある場合の下マージン微調整（必要なければ削除OK） */
body.page-id-212 .vk_breadcrumb{ margin-bottom: 8px !important; }

/* 2) 「2000」が「200／0」で折り返されるのを防止 */
body.page-id-212 .ase-stat__number{
  white-space: nowrap;               /* 改行禁止 */
  font-variant-numeric: tabular-nums;/* 桁揃え（任意） */
}
body.page-id-212 .ase-stat{ min-width: 180px; } /* カード最小幅の確保 */

/* 3) 念のため：数字とラベルの縦詰まりを防ぐ微調整（任意） */
body.page-id-212 .ase-stat__number{ line-height: 1.05; }

/* ===============================
   Hero 背景を薄くする上書き（いずれか1つを使用）
   =============================== */

/* ① 少し薄く（推奨・まずはここから） */
body.page-id-212 .ase-hero{
  background: linear-gradient(135deg, #0d2a4b 0%, #154b7f 100%) !important;
}
body.page-id-212 .ase-hero__overlay{
  background:
    radial-gradient(circle at 20% 30%, rgba(15,107,216,.28) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,180,216,.22) 0%, transparent 50%),
    linear-gradient(135deg, rgba(10,25,41,.68) 0%, rgba(15,52,96,.76) 100%) !important;
}

/* ② 中間（もう一段階明るく） */
/*
body.page-id-212 .ase-hero{
  background: linear-gradient(135deg, #0f365f 0%, #1c66a6 100%) !important;
}
body.page-id-212 .ase-hero__overlay{
  background:
    radial-gradient(circle at 20% 30%, rgba(15,107,216,.22) 0%, transparent 52%),
    radial-gradient(circle at 80% 70%, rgba(0,180,216,.18) 0%, transparent 52%),
    linear-gradient(135deg, rgba(10,25,41,.56) 0%, rgba(15,52,96,.66) 100%) !important;
}
*/

/* ③ かなり薄く（写真の存在感を強めたい時） */
/*
body.page-id-212 .ase-hero{
  background: linear-gradient(135deg, #164a80 0%, #2a7cc7 100%) !important;
}
body.page-id-212 .ase-hero__overlay{
  background:
    radial-gradient(circle at 20% 30%, rgba(15,107,216,.16) 0%, transparent 54%),
    radial-gradient(circle at 80% 70%, rgba(0,180,216,.14) 0%, transparent 54%),
    linear-gradient(135deg, rgba(10,25,41,.40) 0%, rgba(15,52,96,.52) 100%) !important;
}
*/

/* モバイル時は可読性のため若干だけ濃く（上のどれかを使う場合の補正） */
@media (max-width:768px){
  body.page-id-212 .ase-hero__overlay{
    background:
      radial-gradient(circle at 20% 30%, rgba(15,107,216,.20) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(0,180,216,.18) 0%, transparent 50%),
      linear-gradient(135deg, rgba(10,25,41,.58) 0%, rgba(15,52,96,.66) 100%) !important;
  }
}

/* ===============================
   Services（page-id-212）
   「私たちについて」見出しの微左寄せ（カード中央合わせ）
   =============================== */
@media (min-width: 992px){
  /* 見出し＆バッジだけをオフセット（本文グリッドはそのまま） */
  body.page-id-212 .ase-services__intro .ase-intro__badge,
  body.page-id-212 .ase-services__intro .ase-intro__title{
    position: relative;
    left: -3%;              /* ← -2%〜-5%で微調整 */
  }
}

/* PC版でもう少し左へ（大画面でオフセット強め） */
@media (min-width: 1200px){
  body.page-id-212 .ase-services__intro .ase-intro__badge,
  body.page-id-212 .ase-services__intro .ase-intro__title{
    position: relative;
    left: -6%;   /* -5%〜-8%で微調整 */
  }
}
@media (min-width: 1440px){
  body.page-id-212 .ase-services__intro .ase-intro__badge,
  body.page-id-212 .ase-services__intro .ase-intro__title{
    left: -8%;
  }
}